github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Lens/SCSS] Migrate tooltip.scss file (#215702) (#216862)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens/SCSS] Migrate `tooltip.scss` file
(#215702)](https://github.com/elastic/kibana/pull/215702)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Maria
Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-02T14:49:22Z","message":"[Lens/SCSS]
Migrate `tooltip.scss` file (#215702)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces
`tooltip.scss` file to css-in-js .\n\n## Considerations\n\nWe copied the
styles found in
the\n[euiToolTipStyle](80dacb3dcc/packages/eui/src/global_styling/mixins/_tool_tip.scss (L1))\nmixing
that the .scss file is using the right background and color\ntokens
.\n\n\n\n### before\n<img width=\"304\" alt=\"Screenshot 2025-03-25 at
13 36
01\"\nsrc=\"https://github.com/user-attachments/assets/434ae0eb-0895-47a8-b959-624760f14492\"\n/>\n\n###
after\n\n\n\n<img width=\"297\" alt=\"Screenshot 2025-03-26 at 11 31
22\"\nsrc=\"https://github.com/user-attachments/assets/cd7727ff-764c-4bbe-b863-aa1ee01639bd\"\n/>\n\n\n##
Checklist\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Marco
Liberati
<dej611@users.noreply.github.com>","sha":"972da88f8f26ac1f6126a3c31b3d6c50a8e57300","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["technical
debt","Team:Visualizations","release_note:skip","Feature:Lens","backport:version","v9.1.0","v8.19.0","scss-removal"],"title":"[Lens/SCSS]
Migrate `tooltip.scss`
file","number":215702,"url":"https://github.com/elastic/kibana/pull/215702","mergeCommit":{"message":"[Lens/SCSS]
Migrate `tooltip.scss` file (#215702)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces
`tooltip.scss` file to css-in-js .\n\n## Considerations\n\nWe copied the
styles found in
the\n[euiToolTipStyle](80dacb3dcc/packages/eui/src/global_styling/mixins/_tool_tip.scss (L1))\nmixing
that the .scss file is using the right background and color\ntokens
.\n\n\n\n### before\n<img width=\"304\" alt=\"Screenshot 2025-03-25 at
13 36
01\"\nsrc=\"https://github.com/user-attachments/assets/434ae0eb-0895-47a8-b959-624760f14492\"\n/>\n\n###
after\n\n\n\n<img width=\"297\" alt=\"Screenshot 2025-03-26 at 11 31
22\"\nsrc=\"https://github.com/user-attachments/assets/cd7727ff-764c-4bbe-b863-aa1ee01639bd\"\n/>\n\n\n##
Checklist\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Marco
Liberati
<dej611@users.noreply.github.com>","sha":"972da88f8f26ac1f6126a3c31b3d6c50a8e57300"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215702","number":215702,"mergeCommit":{"message":"[Lens/SCSS]
Migrate `tooltip.scss` file (#215702)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces
`tooltip.scss` file to css-in-js .\n\n## Considerations\n\nWe copied the
styles found in
the\n[euiToolTipStyle](80dacb3dcc/packages/eui/src/global_styling/mixins/_tool_tip.scss (L1))\nmixing
that the .scss file is using the right background and color\ntokens
.\n\n\n\n### before\n<img width=\"304\" alt=\"Screenshot 2025-03-25 at
13 36
01\"\nsrc=\"https://github.com/user-attachments/assets/434ae0eb-0895-47a8-b959-624760f14492\"\n/>\n\n###
after\n\n\n\n<img width=\"297\" alt=\"Screenshot 2025-03-26 at 11 31
22\"\nsrc=\"https://github.com/user-attachments/assets/cd7727ff-764c-4bbe-b863-aa1ee01639bd\"\n/>\n\n\n##
Checklist\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n---------\n\nCo-authored-by:
Marco Vettorello <marco.vettorello@elastic.co>\nCo-authored-by: Marco
Liberati
<dej611@users.noreply.github.com>","sha":"972da88f8f26ac1f6126a3c31b3d6c50a8e57300"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2025-04-02 18:45:52 +02:00 • committed by GitHub
parent 6e7c49674e
commit 0a7a62ba8c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 101 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/endzone_tooltip_header.test.tsx.snap generated
View file

@ -4,7 +4,7 @@ exports[`EndzoneTooltipHeader should render endzone tooltip with value, if it is
<Fragment>
<EuiFlexGroup
alignItems="center"
className="detailedTooltip__header--partial"
css={[Function]}
gutterSize="xs"
responsive={false}
>
@ -32,7 +32,7 @@ exports[`EndzoneTooltipHeader should render endzone tooltip without value, if it
<Fragment>
<EuiFlexGroup
alignItems="center"
className="detailedTooltip__header--partial"
css={[Function]}
gutterSize="xs"
responsive={false}
>

24
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`Tooltip should render plain tooltip 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -38,10 +38,10 @@ exports[`Tooltip should render plain tooltip 1`] = `
exports[`Tooltip should render tooltip with partial buckets 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<div
className="detailedTooltip__header"
css={[Function]}
>
<EndzoneTooltipHeader />
</div>
@ -79,10 +79,10 @@ exports[`Tooltip should render tooltip with partial buckets 1`] = `
exports[`Tooltip should render tooltip with partial buckets 2`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<div
className="detailedTooltip__header"
css={[Function]}
>
<EndzoneTooltipHeader />
</div>
@ -120,7 +120,7 @@ exports[`Tooltip should render tooltip with partial buckets 2`] = `
exports[`Tooltip should render tooltip with xDomain 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -156,7 +156,7 @@ exports[`Tooltip should render tooltip with xDomain 1`] = `
exports[`Tooltip should render tooltip without split-column-values 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -187,7 +187,7 @@ exports[`Tooltip should render tooltip without split-column-values 1`] = `
exports[`Tooltip should render tooltip without split-row-values 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -218,7 +218,7 @@ exports[`Tooltip should render tooltip without split-row-values 1`] = `
exports[`Tooltip should render tooltip without splitAccessors-values 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -249,7 +249,7 @@ exports[`Tooltip should render tooltip without splitAccessors-values 1`] = `
exports[`Tooltip should render tooltip without x-value 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -280,7 +280,7 @@ exports[`Tooltip should render tooltip without x-value 1`] = `
exports[`Tooltip should render tooltip without x-value 2`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>
@ -311,7 +311,7 @@ exports[`Tooltip should render tooltip without x-value 2`] = `
exports[`Tooltip should render tooltip without y-value 1`] = `
<div
className="detailedTooltip"
css={[Function]}
>
<table>
<tbody>

20
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip_row.test.tsx.snap generated
View file

@ -3,19 +3,27 @@
exports[`TooltipRow should render label and value if both are specified 1`] = `
<tr>
<td
className="detailedTooltip__label"
css={[Function]}
>
<div
className="detailedTooltip__labelContainer"
css={[Function]}
>
tooltip
</div>
</td>
<td
className="detailedTooltip__value"
>
<td>
<div
className="detailedTooltip__valueContainer"
css={
Object {
"map": undefined,
"name": "us16fb",
"next": undefined,
"styles": "
overflow-wrap: break-word;
",
"toString": [Function],
}
}
>
0
</div>

8
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/endzone_tooltip_header.tsx
View file

@ -8,8 +8,9 @@
*/
import React, { FC } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, type UseEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
export interface EndzoneTooltipHeaderProps {
value?: string;
@ -19,7 +20,10 @@ export const EndzoneTooltipHeader: FC<EndzoneTooltipHeaderProps> = ({ value }) =
<>
<EuiFlexGroup
alignItems="center"
className="detailedTooltip__header--partial"
css={({ euiTheme }: UseEuiTheme) => css`
font-weight: ${euiTheme.font.weight.regular};
min-width: calc(${euiTheme.size.base} * 12);
`}
responsive={false}
gutterSize="xs"
>

45
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss
View file

@ -1,45 +0,0 @@
.detailedTooltip {
pointer-events: none;
@include euiToolTipStyle('s');
& { // stylelint-disable-line no-duplicate-selectors
max-width: $euiSizeXL * 10;
overflow: hidden;
padding: $euiSizeS;
}
table {
table-layout: fixed;
width: 100%;
td,
th {
text-align: left;
padding: $euiSizeXS;
overflow-wrap: break-word;
}
}
}
.detailedTooltip__header {
> :last-child {
margin-bottom: $euiSizeS;
}
}
.detailedTooltip__labelContainer {
max-width: $euiSizeXL * 5;
}
.detailedTooltip__labelContainer,
.detailedTooltip__valueContainer {
overflow-wrap: break-word;
}
.detailedTooltip__label {
font-weight: $euiFontWeightMedium;
color: shade($euiColorGhost, 20%);
}
.detailedTooltip__header--partial {
font-weight: $euiFontWeightRegular;
min-width: $euiSize * 12;
}

47
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx
View file

@ -11,6 +11,8 @@ import { TooltipInfo, XYChartSeriesIdentifier } from '@elastic/charts';
import { FormatFactory } from '@kbn/field-formats-plugin/common';
import { getAccessorByDimension } from '@kbn/visualizations-plugin/common/utils';
import React, { FC } from 'react';
import { euiFontSize, euiShadow, type UseEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { CommonXYDataLayerConfig } from '../../../common';
import {
DatatablesWithFormatInfo,
@ -23,8 +25,6 @@ import { EndzoneTooltipHeader } from './endzone_tooltip_header';
import { TooltipData, TooltipRow } from './tooltip_row';
import { isEndzoneBucket } from './utils';
import './tooltip.scss';
type Props = TooltipInfo & {
xDomain?: XDomain;
fieldFormats: LayersFieldFormats;
@ -126,9 +126,9 @@ export const Tooltip: FC<Props> = ({
const renderEndzoneTooltip = header ? isEndzoneBucket(header?.value, xDomain) : false;
return (
<div className="detailedTooltip">
<div css={styles.customToolTip}>
{renderEndzoneTooltip && (
<div className="detailedTooltip__header">
<div css={styles.header}>
<EndzoneTooltipHeader />
</div>
)}
@ -138,3 +138,42 @@ export const Tooltip: FC<Props> = ({
</div>
);
};
const styles = {
header: ({ euiTheme }: UseEuiTheme) => css`
> :last-child {
margin-bottom: ${euiTheme.size.s};
}
`,
customToolTip: (euiThemeContext: UseEuiTheme) =>
css`
z-index: ${euiThemeContext.euiTheme.levels.toast};
pointer-events: none;
padding: ${euiThemeContext.euiTheme.size.s};
border-radius: ${euiThemeContext.euiTheme.border.radius.medium};
max-width: calc(${euiThemeContext.euiTheme.size.xl} * 10);
overflow: hidden;
border: ${euiThemeContext.euiTheme.border.width.thin} solid
${euiThemeContext.euiTheme.components.tooltipBorderFloating};
${euiFontSize(euiThemeContext, 's')}
color: ${euiThemeContext.euiTheme.colors.textParagraph};
${euiShadow(euiThemeContext)}
background-color: ${euiThemeContext.euiTheme.colors.backgroundBasePlain};
table {
table-layout: fixed;
width: 100%;
td,
th {
text-align: left;
padding: ${euiThemeContext.euiTheme.size.xs};
overflow-wrap: break-word;
}
}
`,
};

28
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip_row.tsx
View file

@ -7,6 +7,7 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/
import { css } from '@emotion/react';
import React, { FC } from 'react';
export interface TooltipData {
@ -17,12 +18,31 @@ export interface TooltipData {
export const TooltipRow: FC<TooltipData> = ({ label, value }) => {
return label && value ? (
<tr>
<td className="detailedTooltip__label">
<div className="detailedTooltip__labelContainer">{label}</div>
<td
css={({ euiTheme }) => css`
font-weight: ${euiTheme.font.weight.medium};
`}
>
<div
css={({ euiTheme }) =>
css`
max-width: calc(${euiTheme.size.xl} * 5);
overflow-wrap: break-word;
`
}
>
{label}
</div>
</td>
<td className="detailedTooltip__value">
<div className="detailedTooltip__valueContainer">{value}</div>
<td>
<div
css={css`
overflow-wrap: break-word;
`}
>
{value}
</div>
</td>
</tr>
) : null;