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

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

Browse source 
## Summary

Part of https://github.com/elastic/kibana/issues/208908

Replaces `tooltip.scss` file to css-in-js .

## Considerations

We copied the styles found in the
[euiToolTipStyle](80dacb3dcc/packages/eui/src/global_styling/mixins/_tool_tip.scss (L1))
mixing that the .scss file is using the right background and color
tokens .

<!--

We want to replace `euiToolTipStyle` mixin that we can find in the file
that we want to migrate:


8d81ed4a5b/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss (L3)

We decided to follow a similar approach to the one used here:


12aa3fc6ca/x-pack/platform/plugins/shared/ml/public/application/components/chart_tooltip/chart_tooltip_styles.ts (L12)

That imports from:


f615b48410/packages/eui/src/components/tool_tip/tool_tip.styles.ts (L47)

However, the styles are not exactly the same as the ones found in the
mixing:


80dacb3dcc/packages/eui/src/global_styling/mixins/_tool_tip.scss (L1)

For this reason, we need to override some of the fields e.g. `position:
absolute` ➡️ `position: relative`.

As we can see in the comparison, the color looks different:

-->

### before
<img width="304" alt="Screenshot 2025-03-25 at 13 36 01"
src="https://github.com/user-attachments/assets/434ae0eb-0895-47a8-b959-624760f14492"
/>

### after

<!--

<img width="326" alt="Screenshot 2025-03-25 at 13 33 20"
src="https://github.com/user-attachments/assets/a172bd05-489d-4396-830a-72e4296328ab"
/>

-->

<img width="297" alt="Screenshot 2025-03-26 at 11 31 22"
src="https://github.com/user-attachments/assets/cd7727ff-764c-4bbe-b863-aa1ee01639bd"
/>


## Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
This commit is contained in:
Maria Iriarte 2025-04-02 16:49:22 +02:00 • committed by GitHub
parent d08e5521f2
commit 972da88f8f
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;