[Controls] migrate scss to emotion by mbondyra · Pull Request #216413 · elastic/kibana

mbondyra · 2025-03-30T20:25:48Z

Summary

Part of #207852

About bundle size change: the bundle increased slightly since we have to add core/public package. It's only 100B though, so I don't think it's worth optimizing (if we do, we should focus on different parts on application, for example async load of ControlPanel)

elasticmachine · 2025-06-02T10:24:29Z

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

src/platform/plugins/shared/controls/public/control_group/components/control_panel.test.tsx

...atform/plugins/shared/controls/public/controls/timeslider_control/components/play_button.tsx

.../controls/data_controls/options_list_control/components/options_list_popover_suggestions.tsx

src/platform/plugins/shared/controls/public/control_group/components/floating_actions.tsx

src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx

…t --include-path /api/status --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/streams --include-path /api/fleet --include-path /api/dashboards --include-path /api/saved_objects/_import --include-path /api/saved_objects/_export --include-path /api/maintenance_window --update'

jbudz

packages/kbn-optimizer/limits.yml LGTM

Heenawter

LGTM - tested various scenarios and this PR actually fixes a lot of previously-broken styles 🎉 Thanks so much for your work on this!

…_snapshot --include-path /api/status --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/streams --include-path /api/fleet --include-path /api/dashboards --include-path /api/saved_objects/_import --include-path /api/saved_objects/_export --include-path /api/maintenance_window --update'" This reverts commit 4fc6c08.

This reverts commit 65b30cb.

…t --include-path /api/status --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/streams --include-path /api/fleet --include-path /api/dashboards --include-path /api/saved_objects/_import --include-path /api/saved_objects/_export --include-path /api/maintenance_window --update'

elasticmachine · 2025-06-06T07:02:16Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 4bab3b7

Failed CI Steps

FTR Configs #42

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`controls`	380	354	-26

Async chunks

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

id	before	after	diff
`controls`	479.0KB	464.3KB	-14.8KB
`dashboard`	622.9KB	622.8KB	-144.0B
total			-14.9KB

Page load bundle

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

id	before	after	diff
`controls`	11.7KB	11.8KB	+120.0B

History

## Summary Part of elastic#207852 About bundle size change: the bundle increased slightly since we have to add core/public package. It's only 100B though, so I don't think it's worth optimizing (if we do, we should focus on different parts on application, for example async load of ControlPanel) <img width="1580" alt="Screenshot 2025-06-03 at 12 09 03" src="https://github.com/user-attachments/assets/2fcd558c-0401-4f1a-b8d5-f63b66d2fad2" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

mbondyra added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting v9.1.0 scss-removal labels Mar 30, 2025

mbondyra mentioned this pull request Mar 30, 2025

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

Open

mbondyra force-pushed the controls_scss_emotion branch 2 times, most recently from 276ea69 to a89380b Compare April 3, 2025 13:53

elastic deleted a comment from elasticmachine Apr 3, 2025

mbondyra force-pushed the controls_scss_emotion branch from 3e64887 to 3817cd6 Compare April 3, 2025 19:47

mbondyra force-pushed the controls_scss_emotion branch from 3817cd6 to 110406f Compare May 8, 2025 14:23

mbondyra force-pushed the controls_scss_emotion branch 4 times, most recently from f188033 to 09ed761 Compare June 2, 2025 09:23

mbondyra marked this pull request as ready for review June 2, 2025 10:24

mbondyra requested review from a team as code owners June 2, 2025 10:24

mbondyra force-pushed the controls_scss_emotion branch from 633c538 to 9af4f56 Compare June 2, 2025 12:06

mbondyra and others added 2 commits June 2, 2025 14:07

controlgroup.scss

0fbcb65

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

05efa7f

mbondyra force-pushed the controls_scss_emotion branch from d7e9fe5 to 05efa7f Compare June 2, 2025 13:23

[CI] Auto-commit changed files from 'node scripts/notice'

a07b9e3

Heenawter self-requested a review June 2, 2025 16:20

Heenawter reviewed Jun 2, 2025

View reviewed changes

mbondyra added 2 commits June 3, 2025 11:36

cr

00f937d

increase bundle size

12e59b0

mbondyra requested a review from a team as a code owner June 3, 2025 10:10

test

55f0775

mbondyra and others added 4 commits June 3, 2025 13:26

Merge branch 'main' into controls_scss_emotion

389409d

Merge branch 'main' into controls_scss_emotion

a20b968

move to classnames

b494e45

mbondyra force-pushed the controls_scss_emotion branch from 964a5c7 to b494e45 Compare June 3, 2025 13:03

kibanamachine added 2 commits June 3, 2025 13:13

[CI] Auto-commit changed files from 'node scripts/notice'

2beb299

[CI] Auto-commit changed files from 'make api-docs'

65b30cb

jbudz approved these changes Jun 3, 2025

View reviewed changes

ryankeairns approved these changes Jun 3, 2025

View reviewed changes

Heenawter approved these changes Jun 3, 2025

View reviewed changes

mbondyra and others added 3 commits June 3, 2025 23:03

Merge branch 'main' into controls_scss_emotion

6fd2769

Revert "[CI] Auto-commit changed files from 'make api-docs'"

0352ba8

This reverts commit 65b30cb.

mbondyra added the v8.19.0 label Jun 4, 2025

mbondyra force-pushed the controls_scss_emotion branch from d8f3dc4 to 0352ba8 Compare June 5, 2025 21:38

mbondyra and others added 4 commits June 5, 2025 23:47

Merge branch 'main' into controls_scss_emotion

66cb7f0

[CI] Auto-commit changed files from 'make api-docs'

cfb9868

add class used in tests

4bab3b7

mbondyra merged commit 410ff44 into elastic:main Jun 6, 2025
10 checks passed

kibanamachine mentioned this pull request Jun 6, 2025

OpenAI (Other) Connector PKI implementation #219984

Merged

7 tasks

This was referenced Jun 26, 2025

[Controls] Small visual fixes #225430

Merged

[A11y] Add labels to control inputs #221639

Merged

kibanamachine mentioned this pull request Jul 3, 2025

[Controls] Hide Select All checkbox from single select controls #226311

Merged

1 task

kibanamachine mentioned this pull request Aug 11, 2025

[Controls] [A11y] Fix Timeslider focus ring visibility in Firefox #231351

Merged

kibanamachine mentioned this pull request Oct 14, 2025

[Controls] Fix initialization race condition #237726

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

[Controls] migrate scss to emotion#216413

[Controls] migrate scss to emotion#216413
mbondyra merged 19 commits intoelastic:mainfrom
mbondyra:controls_scss_emotion

mbondyra commented Mar 30, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Jun 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jbudz left a comment

Uh oh!

Heenawter left a comment

Uh oh!

elasticmachine commented Jun 6, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Comments

Conversation

mbondyra commented Mar 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

elasticmachine commented Jun 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jbudz left a comment

Choose a reason for hiding this comment

Uh oh!

Heenawter left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jun 6, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mbondyra commented Mar 30, 2025 •

edited

Loading