[Visualizations] Migrate vislib scss files to Emotion by andrimal · Pull Request #228979 · elastic/kibana

andrimal · 2025-07-22T14:55:57Z

Summary

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 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: [Lens/SCSS] Migrate tooltip.scss file #215702
The rest of the necessary styles were copied from the euiTooltipStyle

Before

light:

dark:

After

light:

dark:

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Unit or functional tests were updated or added to match the most common scenarios
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

andrimal · 2025-07-24T14:26:02Z

src/platform/plugins/private/vis_types/vislib/public/vislib/components/legend/legend.tsx


    .vislib--legend-bottom & {
-      margin-left: ${euiThemeContext.euiTheme.size.l};
+      margin-left: ${euiThemeContext.euiTheme.size.xl};


This was increased on purpose.

Before:

After:

…optimization

elasticmachine · 2025-07-30T14:08:13Z

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

ryankeairns

SCSS files deleted; styles migrated

mariairiartef

I tested locally I didn't find issues, thanks for taking care of this 🙌🏻

elasticmachine · 2025-08-01T12:39:46Z

💚 Build Succeeded

Buildkite Build
Commit: c944436

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`visTypeVislib`	178	170	-8

Async chunks

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

id	before	after	diff
`visTypeVislib`	365.9KB	354.4KB	-11.5KB

Page load bundle

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

id	before	after	diff
`visTypeVislib`	13.0KB	13.0KB	-14.0B

History

💚 Build #324716 succeeded 4c189da
💚 Build #324377 succeeded 4b49fe7
💔 Build #322918 failed a8b9a5f

## 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)

Migrate _layout.sccs file

48db02b

andrimal mentioned this pull request Jul 22, 2025

[Visualizations] Replace SCSS with CSS-in-JS Part 5 #221885

Closed

13 tasks

andrimal added 4 commits July 24, 2025 11:37

Migrate _meter.scss file

4fb6677

Migate _legend.scss file

b9437cd

Migrate _vislib_vis_type.scss file

857fea8

Update legend style when placed below the chart

a8b9a5f

andrimal commented Jul 24, 2025

View reviewed changes

andrimal and others added 5 commits July 29, 2025 15:27

Merge branch 'main' into vis/vislib/scss-js/221885

6e3400a

Migrate _tooltip.scss file

f37da83

Fix opacity

4b49fe7

Refactor GlobalVislibWrapperStyles to use React.memo for performance …

d7f9ea4

…optimization

Include typings in tsconfig.json

4c189da

andrimal marked this pull request as ready for review July 30, 2025 14:08

andrimal requested review from a team as code owners July 30, 2025 14:08

mariairiartef self-requested a review July 31, 2025 08:40

ryankeairns approved these changes Jul 31, 2025

View reviewed changes

andrimal mentioned this pull request Aug 1, 2025

[Vislib][Legacy Heatmap] Tooltip info icon is not visible after page refresh #230180

Closed

Merge branch 'main' into vis/vislib/scss-js/221885

c944436

mariairiartef approved these changes Aug 1, 2025

View reviewed changes

andrimal merged commit 7ef1fe6 into elastic:main Aug 1, 2025
12 checks passed

kibanamachine added the v9.2.0 label Aug 1, 2025

wildemat mentioned this pull request Aug 7, 2025

pr 230826 #231022

Closed

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visualizations] Migrate vislib scss files to Emotion#228979

[Visualizations] Migrate vislib scss files to Emotion#228979
andrimal merged 11 commits intoelastic:mainfrom
andrimal:vis/vislib/scss-js/221885

andrimal commented Jul 22, 2025 •

edited

Loading

Uh oh!

andrimal Jul 24, 2025

Uh oh!

elasticmachine commented Jul 30, 2025

Uh oh!

ryankeairns left a comment

Uh oh!

mariairiartef left a comment •

edited

Loading

Uh oh!

elasticmachine commented Aug 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

andrimal commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Old vislib chart

Tooltip changes

Before

After

Checklist

Uh oh!

andrimal Jul 24, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 30, 2025

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

mariairiartef left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Aug 1, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

andrimal commented Jul 22, 2025 •

edited

Loading

mariairiartef left a comment •

edited

Loading