[Dashboard] Rewrite scss to emotion by mbondyra · Pull Request #220520 · elastic/kibana

mbondyra · 2025-05-08T14:12:00Z

Summary

Part of #207852

II tested printed styles via exporting PDF and comparing.
I prioritized classes over overly complex emotion props.

mbondyra · 2025-06-06T12:13:41Z

src/platform/plugins/shared/dashboard/public/dashboard_api/track_panel.ts

      if (id && panelRef) {
        untilLoaded(id).then(() => {
-          panelRef.classList.add('dshDashboardGrid__item--highlighted');
+          // Adds the highlight class in the next event loop to allow the DOM to update


this fixes a previously broken highlighting the vis when coming back from Lens

elasticmachine · 2025-06-06T12:16:45Z

Pinging @elastic/kibana-presentation (Team:Presentation)

ThomThomson

Changes LGTM! Looked through the code and ran this locally. Found one strange behaviour which could be fixed as part of this PR.

For some reason, when a panel is highlighted - i.e. after adding it covers up the hover actions on the panel below. Not sure if this is in main or not, but could be something to clean up.

…d_scss_emotion

elasticmachine · 2025-06-11T10:22:19Z

💚 Build Succeeded

Buildkite Build
Commit: 3f59ffc

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	691	669	-22

Async chunks

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

id	before	after	diff
`canvas`	1.1MB	1.1MB	-92.0B
`dashboard`	627.4KB	616.8KB	-10.6KB
total			-10.7KB

Page load bundle

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

id	before	after	diff
`dashboard`	18.1KB	18.1KB	-12.0B

History

💚 Build #307166 succeeded 085b8e5
💚 Build #306778 succeeded 7145d2d
💛 Build #306278 was flaky eefe77a
💔 Build #306200 failed 131d2c3

kibanamachine · 2025-06-11T12:17:44Z

Starting backport for target branches: 8.19

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

kibanamachine · 2025-06-11T12:24:07Z

💔 All backports failed

Status	Branch	Result
❌	8.19	Backport failed because of merge conflicts You might need to backport the following PRs to 8.19: - [ES\|QL] Better handling of ccs and local sources in the registry (#223365) - [Dataset Quality] Apply chunking algorithm for getIndexBasicStats (#221153) - [Obs AI Assistant] Anonymization support (#223351) - [ska] update paths, kibana.jsons for test plugins (#223004) - [Discover] Support setting columns in Discover session embeddable (#222858) - [Obs AI Assistant] Add Elastic Managed LLM tour callout (#220782) - [Security Solution] [Elastic Defend] Add `disable_origin_info_collection` in endpoint advanced policy setting (#222030) - [Fleet] Update spec.max to 3.4 (#221544) - [Security Solution] Replace data view creation with data view picker data views in AI pages (#219988) - feat(slo): add metadata in rollup document (#222108)

Manual backport

To create the backport manually run:

node scripts/backport --pr 220520

Questions ?

Please refer to the Backport tool documentation

## Summary Part of elastic#207852 II tested printed styles via exporting PDF and comparing. I prioritized classes over overly complex emotion props. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2025-06-13T12:48:46Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

## Summary Part of elastic#207852 II tested printed styles via exporting PDF and comparing. I prioritized classes over overly complex emotion props. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2025-06-16T13:48:41Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

kibanamachine · 2025-06-17T13:48:53Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

kibanamachine · 2025-06-18T13:50:15Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

mbondyra · 2025-06-18T14:06:31Z

💚 All backports created successfully

Status	Branch	Result
✅	8.19

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

Questions ?

Please refer to the Backport tool documentation

## Summary Part of elastic#207852 II tested printed styles via exporting PDF and comparing. I prioritized classes over overly complex emotion props. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 1dfc7ce) # Conflicts: # src/platform/plugins/shared/dashboard/public/dashboard_app/_dashboard_app.scss # src/platform/plugins/shared/dashboard/public/dashboard_renderer/viewport/_dashboard_viewport.scss # src/platform/plugins/shared/dashboard/public/dashboard_top_nav/_dashboard_top_nav.scss

kibanamachine · 2025-06-19T14:50:53Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

kibanamachine · 2025-06-20T15:48:56Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

kibanamachine · 2025-06-23T15:49:58Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

kibanamachine · 2025-06-24T16:49:05Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

kibanamachine · 2025-06-25T17:49:16Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 220520 locally
cc: @mbondyra

mbondyra force-pushed the dashboard_scss_emotion branch 3 times, most recently from 8fc4325 to 28b58df Compare June 6, 2025 12:12

mbondyra commented Jun 6, 2025

View reviewed changes

mbondyra mentioned this pull request Jun 3, 2025

[Presentation] [Meta] Remove Sass in favour of Emotion #207852

Open

mbondyra changed the title ~~Dashboard scss emotion~~ [Dashboard] Rewrite scss to emotion Jun 6, 2025

mbondyra marked this pull request as ready for review June 6, 2025 12:16

mbondyra requested review from a team as code owners June 6, 2025 12:16

mbondyra added release_note:skip Skip the PR/issue when compiling release notes v9.1.0 v8.19.0 Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// scss-removal labels Jun 6, 2025

mbondyra added 12 commits June 6, 2025 15:11

dashboard_app

ca0d40a

emoty prompt

5680c20

renderer

ed5c2e5

panel_actions(?)

081d8cc

dashboard grid

8e7c99e

top_nav

380d2f1

wip

d30101a

grid item

f327a98

removing some extra files

28c910f

print styles

e278e1c

move global print styles

7089467

dashboard viewport

3eca20d

mbondyra force-pushed the dashboard_scss_emotion branch from 131d2c3 to 3eca20d Compare June 6, 2025 13:14

mbondyra added 2 commits June 6, 2025 15:33

dashboard print styles

c963dd9

obj syntax alignment

349b576

ThomThomson approved these changes Jun 10, 2025

View reviewed changes

mbondyra added 2 commits June 10, 2025 21:43

Merge commit 'f2129b04dd63de83746982e1a08816a5ccd06f5e' into dashboar…

085b8e5

…d_scss_emotion

fix highlighted vis zIndex

3f59ffc

mbondyra merged commit 1dfc7ce into elastic:main Jun 11, 2025
10 checks passed

mbondyra deleted the dashboard_scss_emotion branch June 11, 2025 12:17

This was referenced Jun 11, 2025

[Obs AI Assistant] Improve conversation callout #223442

Merged

[dashboard] migrate embeddable_data_grid test cases to discover functional test #223452

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Jun 13, 2025

mbondyra mentioned this pull request Jun 18, 2025

[8.19] [Dashboard] Rewrite scss to emotion (#220520) #224434

Closed

kibanamachine mentioned this pull request Jun 24, 2025

[Dashboards as code] remove client transform of panels array to map #224314

Merged

ThomThomson removed the v8.19.0 label Jun 25, 2025

mbondyra added backport:skip This PR does not require backporting and removed backport missing Added to PRs automatically when the are determined to be missing a backport. backport:version Backport to applied version labels labels Jun 26, 2025

Comments

Conversation

mbondyra commented May 8, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

mbondyra Jun 6, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jun 6, 2025

Uh oh!

ThomThomson left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jun 11, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Uh oh!

kibanamachine commented Jun 11, 2025

Uh oh!

kibanamachine commented Jun 11, 2025

💔 All backports failed

Manual backport

Questions ?

Uh oh!

kibanamachine commented Jun 13, 2025

Uh oh!

kibanamachine commented Jun 16, 2025

Uh oh!

kibanamachine commented Jun 17, 2025

Uh oh!

kibanamachine commented Jun 18, 2025

Uh oh!

mbondyra commented Jun 18, 2025

💚 All backports created successfully

Questions ?

Uh oh!

kibanamachine commented Jun 19, 2025

Uh oh!

kibanamachine commented Jun 20, 2025

Uh oh!

kibanamachine commented Jun 23, 2025

Uh oh!

kibanamachine commented Jun 24, 2025

Uh oh!

kibanamachine commented Jun 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mbondyra commented May 8, 2025 •

edited by kibanamachine

Loading