Skip to content

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

Merged
mariairiartef merged 15 commits intoelastic:mainfrom
mariairiartef:lens/scss-js/tooltip
Apr 2, 2025
Merged

[Lens/SCSS] Migrate tooltip.scss file#215702
mariairiartef merged 15 commits intoelastic:mainfrom
mariairiartef:lens/scss-js/tooltip

Conversation

@mariairiartef
Copy link
Contributor

@mariairiartef mariairiartef commented Mar 24, 2025 •
edited by kibanamachine
Loading

Summary

Part of #208908

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

Considerations

We copied the styles found in the euiToolTipStyle mixing that the .scss file is using the right background and color tokens .

before

Screenshot 2025-03-25 at 13 36 01

after

Screenshot 2025-03-26 at 11 31 22

Checklist

  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

@mariairiartef mariairiartef self-assigned this Mar 24, 2025
@mariairiartef mariairiartef added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// technical debt Improvement of the software architecture and operational architecture release_note:skip Skip the PR/issue when compiling release notes Feature:Lens backport:version Backport to applied version labels v9.1.0 v8.19.0 labels Mar 25, 2025
@mariairiartef mariairiartef marked this pull request as ready for review March 25, 2025 12:39
@mariairiartef mariairiartef requested review from a team as code owners March 25, 2025 12:39
@elasticmachine
Copy link
Contributor

elasticmachine commented Mar 25, 2025

Pinging @elastic/kibana-visualizations (Team:Visualizations)

MichaelMarcialis
MichaelMarcialis approved these changes Mar 26, 2025
View reviewed changes
Copy link
Contributor

@MichaelMarcialis MichaelMarcialis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @mariairiartef! I left one small comment below. Otherwise, assuming you're able to address it, this LGTM. Approving now so I don't hold you up.

dej611
dej611 reviewed Mar 28, 2025
View reviewed changes
...latform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx Outdated
padding: ${euiTheme.size.s};
z-index: ${euiTheme.levels.toast};
border-radius: ${euiTheme.border.radius.medium};
background-color: ${euiTheme.colors.backgroundBasePlain};
Copy link
Contributor

@dej611 dej611 Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a border could help here for the dark theme:
Screenshot 2025-03-28 at 11 00 32

Copy link
Contributor

@markov00 markov00 Mar 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-03-28 at 11 25 23

We don't have borders in general on tooltip. I will check again and find the right color to use instead (that looks a bit darker then the one I selected here

Copy link
Contributor

@MichaelMarcialis MichaelMarcialis Mar 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, @dej611. For these sorts of dark-on-dark elements, Borealis utilizes a "floating border". In short, it's a light border that appears only in dark mode. I guess the tooltip mixin doesn't include the floating border styles.

In any case, this is the style you'll likely want to copy from EUI to get that floating border:

border: ${euiTheme.border.width.thin} solid ${euiTheme.components.tooltipBorderFloating};

Copy link
Contributor Author

@mariairiartef mariairiartef Apr 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done: Add border to tooltip

It looks like this in dark theme:

Screenshot 2025-04-02 at 13 20 54

@elasticmachine
Copy link
Contributor

elasticmachine commented Apr 2, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
expressionXY 266 253 -13

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
expressionXY 102.3KB 96.8KB -5.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
expressionXY 39.1KB 39.1KB -73.0B

History

cc @mariairiartef

@mariairiartef mariairiartef merged commit 972da88 into elastic:main Apr 2, 2025
9 checks passed
@kibanamachine
Copy link
Contributor

kibanamachine commented Apr 2, 2025

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/14222648685

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Apr 2, 2025
@mariairiartef @markov00 @dej611
[Lens/SCSS] Migrate tooltip.scss file (elastic#215702)
3e7afe5 
## Summary

Part of elastic#208908

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

## Considerations

We copied the styles found in the
[euiToolTipStyle](https://github.com/elastic/eui/blob/80dacb3dcc21120e28efdfcf267e5fdfee84b692/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:

https://github.com/elastic/kibana/blob/8d81ed4a5b6f540ce9847bdd0477f52d514031b3/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:

https://github.com/elastic/kibana/blob/12aa3fc6ca8124db8cf5e940baec121482fd1a4b/x-pack/platform/plugins/shared/ml/public/application/components/chart_tooltip/chart_tooltip_styles.ts#L12

That imports from:

https://github.com/elastic/eui/blob/f615b48410ce199e2069b11a84131423d52e7b0f/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:

https://github.com/elastic/eui/blob/80dacb3dcc21120e28efdfcf267e5fdfee84b692/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>
(cherry picked from commit 972da88)
@kibanamachine
Copy link
Contributor

kibanamachine commented Apr 2, 2025

💚 All backports created successfully

Status Branch Result
✅ 8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

@kibanamachine kibanamachine mentioned this pull request Apr 2, 2025
Merged
kibanamachine added a commit that referenced this pull request Apr 2, 2025
@kibanamachine @mariairiartef
[8.x] [Lens/SCSS] Migrate tooltip.scss file (#215702) (#216862)
0a7a62b 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens/SCSS] Migrate `tooltip.scss` file
(#215702)](#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](https://github.com/elastic/eui/blob/80dacb3dcc21120e28efdfcf267e5fdfee84b692/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](https://github.com/elastic/eui/blob/80dacb3dcc21120e28efdfcf267e5fdfee84b692/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](https://github.com/elastic/eui/blob/80dacb3dcc21120e28efdfcf267e5fdfee84b692/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>
@andrimal andrimal mentioned this pull request Jul 29, 2025
Merged
2 tasks
andrimal added a commit that referenced this pull request Aug 1, 2025
@andrimal
[Visualizations] Migrate vislib scss files to Emotion (#228979)
7ef1fe6 
## Summary
Fix #221885 

Migrates the below files to Emotion CSS-in-JS: 
### Old vislib chart
- `src/platform/plugins/private/vis_types/vislib/public/index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_variables.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_vislib_vis_type.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_legend.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss`

## Tooltip changes
The tooltip styles in the `_tooltip.scss` file apply to the legacy
heatmap chart. Here the
[euiToolTipStyle](https://github.com/elastic/eui/blob/main/packages/eui/src/global_styling/mixins/_tool_tip.scss)
mixin was used.
For this migration: 
- The colors were changed and a border was added on purpose to match the
xy tooltip style introduced during this migration:
#215702
- The rest of the necessary styles were copied from the
`euiTooltipStyle`

### Before 
- light:
<img width="373" height="171" alt="Screenshot 2025-07-29 at 4 12 45 PM"
src="https://github.com/user-attachments/assets/81080d2c-bb90-44c9-bad6-fdb3222a4548"
/>
<img width="391" height="232" alt="Screenshot 2025-07-29 at 3 44 50 PM"
src="https://github.com/user-attachments/assets/df876bd2-5bd5-4baf-8352-2efc605e023c"
/>

- dark: 
<img width="291" height="162" alt="Screenshot 2025-07-29 at 4 13 32 PM"
src="https://github.com/user-attachments/assets/1cb6b64e-a5e6-4cec-b6ea-f75c0d9cca63"
/>
<img width="348" height="198" alt="Screenshot 2025-07-29 at 5 17 53 PM"
src="https://github.com/user-attachments/assets/4569e14a-e738-40d7-a941-b23d6166b0f0"
/>

### After 
- light: 
<img width="323" height="144" alt="Screenshot 2025-07-29 at 4 12 50 PM"
src="https://github.com/user-attachments/assets/6719b7ee-810b-48e6-9cc1-06b170c48220"
/>
<img width="387" height="189" alt="Screenshot 2025-07-29 at 3 44 57 PM"
src="https://github.com/user-attachments/assets/a2f713f8-7bd0-42e1-9e39-11c7133fe74b"
/>

- dark:
<img width="256" height="127" alt="Screenshot 2025-07-29 at 4 13 20 PM"
src="https://github.com/user-attachments/assets/47534025-541e-4b2f-88d5-720b13601830"
/>
<img width="381" height="207" alt="Screenshot 2025-07-29 at 3 51 01 PM"
src="https://github.com/user-attachments/assets/9ffc6dd4-60ca-4295-a4ad-f2390b2da57f"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [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)
szaffarano pushed a commit to szaffarano/kibana that referenced this pull request Aug 5, 2025
@andrimal @szaffarano
[Visualizations] Migrate vislib scss files to Emotion (elastic#228979)
eb46dab 
## Summary
Fix elastic#221885 

Migrates the below files to Emotion CSS-in-JS: 
### Old vislib chart
- `src/platform/plugins/private/vis_types/vislib/public/index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_variables.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_vislib_vis_type.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_legend.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss`

## Tooltip changes
The tooltip styles in the `_tooltip.scss` file apply to the legacy
heatmap chart. Here the
[euiToolTipStyle](https://github.com/elastic/eui/blob/main/packages/eui/src/global_styling/mixins/_tool_tip.scss)
mixin was used.
For this migration: 
- The colors were changed and a border was added on purpose to match the
xy tooltip style introduced during this migration:
elastic#215702
- The rest of the necessary styles were copied from the
`euiTooltipStyle`

### Before 
- light:
<img width="373" height="171" alt="Screenshot 2025-07-29 at 4 12 45 PM"
src="https://github.com/user-attachments/assets/81080d2c-bb90-44c9-bad6-fdb3222a4548"
/>
<img width="391" height="232" alt="Screenshot 2025-07-29 at 3 44 50 PM"
src="https://github.com/user-attachments/assets/df876bd2-5bd5-4baf-8352-2efc605e023c"
/>

- dark: 
<img width="291" height="162" alt="Screenshot 2025-07-29 at 4 13 32 PM"
src="https://github.com/user-attachments/assets/1cb6b64e-a5e6-4cec-b6ea-f75c0d9cca63"
/>
<img width="348" height="198" alt="Screenshot 2025-07-29 at 5 17 53 PM"
src="https://github.com/user-attachments/assets/4569e14a-e738-40d7-a941-b23d6166b0f0"
/>

### After 
- light: 
<img width="323" height="144" alt="Screenshot 2025-07-29 at 4 12 50 PM"
src="https://github.com/user-attachments/assets/6719b7ee-810b-48e6-9cc1-06b170c48220"
/>
<img width="387" height="189" alt="Screenshot 2025-07-29 at 3 44 57 PM"
src="https://github.com/user-attachments/assets/a2f713f8-7bd0-42e1-9e39-11c7133fe74b"
/>

- dark:
<img width="256" height="127" alt="Screenshot 2025-07-29 at 4 13 20 PM"
src="https://github.com/user-attachments/assets/47534025-541e-4b2f-88d5-720b13601830"
/>
<img width="381" height="207" alt="Screenshot 2025-07-29 at 3 51 01 PM"
src="https://github.com/user-attachments/assets/9ffc6dd4-60ca-4295-a4ad-f2390b2da57f"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [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)
delanni pushed a commit to delanni/kibana that referenced this pull request Aug 5, 2025
@andrimal @delanni
[Visualizations] Migrate vislib scss files to Emotion (elastic#228979)
cec7f3f 
## Summary
Fix elastic#221885 

Migrates the below files to Emotion CSS-in-JS: 
### Old vislib chart
- `src/platform/plugins/private/vis_types/vislib/public/index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_variables.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_vislib_vis_type.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_legend.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss`

## Tooltip changes
The tooltip styles in the `_tooltip.scss` file apply to the legacy
heatmap chart. Here the
[euiToolTipStyle](https://github.com/elastic/eui/blob/main/packages/eui/src/global_styling/mixins/_tool_tip.scss)
mixin was used.
For this migration: 
- The colors were changed and a border was added on purpose to match the
xy tooltip style introduced during this migration:
elastic#215702
- The rest of the necessary styles were copied from the
`euiTooltipStyle`

### Before 
- light:
<img width="373" height="171" alt="Screenshot 2025-07-29 at 4 12 45 PM"
src="https://github.com/user-attachments/assets/81080d2c-bb90-44c9-bad6-fdb3222a4548"
/>
<img width="391" height="232" alt="Screenshot 2025-07-29 at 3 44 50 PM"
src="https://github.com/user-attachments/assets/df876bd2-5bd5-4baf-8352-2efc605e023c"
/>

- dark: 
<img width="291" height="162" alt="Screenshot 2025-07-29 at 4 13 32 PM"
src="https://github.com/user-attachments/assets/1cb6b64e-a5e6-4cec-b6ea-f75c0d9cca63"
/>
<img width="348" height="198" alt="Screenshot 2025-07-29 at 5 17 53 PM"
src="https://github.com/user-attachments/assets/4569e14a-e738-40d7-a941-b23d6166b0f0"
/>

### After 
- light: 
<img width="323" height="144" alt="Screenshot 2025-07-29 at 4 12 50 PM"
src="https://github.com/user-attachments/assets/6719b7ee-810b-48e6-9cc1-06b170c48220"
/>
<img width="387" height="189" alt="Screenshot 2025-07-29 at 3 44 57 PM"
src="https://github.com/user-attachments/assets/a2f713f8-7bd0-42e1-9e39-11c7133fe74b"
/>

- dark:
<img width="256" height="127" alt="Screenshot 2025-07-29 at 4 13 20 PM"
src="https://github.com/user-attachments/assets/47534025-541e-4b2f-88d5-720b13601830"
/>
<img width="381" height="207" alt="Screenshot 2025-07-29 at 3 51 01 PM"
src="https://github.com/user-attachments/assets/9ffc6dd4-60ca-4295-a4ad-f2390b2da57f"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [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)
NicholasPeretti pushed a commit to NicholasPeretti/kibana that referenced this pull request Aug 18, 2025
@andrimal @NicholasPeretti
[Visualizations] Migrate vislib scss files to Emotion (elastic#228979)
d8848c6 
## Summary
Fix elastic#221885 

Migrates the below files to Emotion CSS-in-JS: 
### Old vislib chart
- `src/platform/plugins/private/vis_types/vislib/public/index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_variables.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/_vislib_vis_type.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/_legend.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss`
-
`src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss`

## Tooltip changes
The tooltip styles in the `_tooltip.scss` file apply to the legacy
heatmap chart. Here the
[euiToolTipStyle](https://github.com/elastic/eui/blob/main/packages/eui/src/global_styling/mixins/_tool_tip.scss)
mixin was used.
For this migration: 
- The colors were changed and a border was added on purpose to match the
xy tooltip style introduced during this migration:
elastic#215702
- The rest of the necessary styles were copied from the
`euiTooltipStyle`

### Before 
- light:
<img width="373" height="171" alt="Screenshot 2025-07-29 at 4 12 45 PM"
src="https://github.com/user-attachments/assets/81080d2c-bb90-44c9-bad6-fdb3222a4548"
/>
<img width="391" height="232" alt="Screenshot 2025-07-29 at 3 44 50 PM"
src="https://github.com/user-attachments/assets/df876bd2-5bd5-4baf-8352-2efc605e023c"
/>

- dark: 
<img width="291" height="162" alt="Screenshot 2025-07-29 at 4 13 32 PM"
src="https://github.com/user-attachments/assets/1cb6b64e-a5e6-4cec-b6ea-f75c0d9cca63"
/>
<img width="348" height="198" alt="Screenshot 2025-07-29 at 5 17 53 PM"
src="https://github.com/user-attachments/assets/4569e14a-e738-40d7-a941-b23d6166b0f0"
/>

### After 
- light: 
<img width="323" height="144" alt="Screenshot 2025-07-29 at 4 12 50 PM"
src="https://github.com/user-attachments/assets/6719b7ee-810b-48e6-9cc1-06b170c48220"
/>
<img width="387" height="189" alt="Screenshot 2025-07-29 at 3 44 57 PM"
src="https://github.com/user-attachments/assets/a2f713f8-7bd0-42e1-9e39-11c7133fe74b"
/>

- dark:
<img width="256" height="127" alt="Screenshot 2025-07-29 at 4 13 20 PM"
src="https://github.com/user-attachments/assets/47534025-541e-4b2f-88d5-720b13601830"
/>
<img width="381" height="207" alt="Screenshot 2025-07-29 at 3 51 01 PM"
src="https://github.com/user-attachments/assets/9ffc6dd4-60ca-4295-a4ad-f2390b2da57f"
/>

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@markov00 markov00 markov00 left review comments

@MichaelMarcialis MichaelMarcialis MichaelMarcialis approved these changes

@dej611 dej611 dej611 approved these changes

Assignees

@mariairiartef mariairiartef

Labels

backport:version Backport to applied version labels Feature:Lens release_note:skip Skip the PR/issue when compiling release notes scss-removal Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// technical debt Improvement of the software architecture and operational architecture v8.19.0 v9.1.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@mariairiartef @elasticmachine @kibanamachine @dej611 @markov00 @MichaelMarcialis