Skip to content

[Lens/SCSS] Replace scss to css-in-js for Lens codebase#209768

Merged
markov00 merged 48 commits intoelastic:mainfrom
mbondyra:lens/scss-to-css-in-js
Mar 19, 2025
Merged

[Lens/SCSS] Replace scss to css-in-js for Lens codebase#209768
markov00 merged 48 commits intoelastic:mainfrom
mbondyra:lens/scss-to-css-in-js

Conversation

@mbondyra
Copy link
Contributor

@mbondyra mbondyra commented Feb 5, 2025 •
edited by kibanamachine
Loading

Summary

Rewrites scss to css-in-js for Lens codebase.

  • lens/public/visualizations/legacy_metric/dimension_editor.scss

  • lens/public/visualizations/gauge/dimension_editor.scss

  • lens/public/visualizations/datatable/components/dimension_editor.scss

  • lens/public/visualizations/heatmap/dimension_editor.scss

  • lens/public/datasources/common/field_item.scss

  • lens/public/visualizations/partition/toolbar.scss

  • lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.scss

  • lens/public/datasources/form_based/help_popover.scss

  • lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss

  • lens/public/editor_frame_service/editor_frame/data_panel_wrapper.scss

  • lens/public/visualizations/gauge/toolbar_component/gauge_config_panel.scss

  • lens/public/datasources/form_based/dimension_panel/field_select.scss

  • lens/public/datasources/form_based/operations/definitions/filters/filter_popover.scss

  • lens/public/datasources/form_based/operations/definitions/filters/filters.scss

  • lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.scss

  • lens/public/datasources/form_based/operations/definitions/shared_components/form_row.scss

  • lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss

  • lens/public/shared_components/toolbar_popover.scss

  • lens/public/app_plugin/app.scss

  • lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.scss

  • lens/public/shared_components/setting_with_sibling_flyout.scss

  • lens/public/visualizations/datatable/components/table_basic.scss

  • lens/public/_mixins.scss

  • lens/public/_variables.scss

  • lens/public/datasources/form_based/datapanel.scss

  • lens/public/datasources/form_based/dimension_panel/dimension_editor.scss

  • lens/public/datasources/form_based/operations/definitions/formula/editor/formula.scss

  • lens/public/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch.scss

  • lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss

  • lens/public/editor_frame_service/editor_frame/frame_layout.scss

  • lens/public/editor_frame_service/editor_frame/suggestion_panel.scss

  • lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss

  • lens/public/react_embeddable/user_messages/info_badges.scss

  • lens/public/shared_components/dataview_picker/toolbar_button.scss

  • lens/public/shared_components/flyout_container.scss

  • lens/public/trigger_actions/open_lens_config/helpers.scss

  • lens/public/visualization_container.scss

@mbondyra mbondyra added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// release_note:skip Skip the PR/issue when compiling release notes Feature:Lens v9.0.0 backport:version Backport to applied version labels v8.18.0 v9.1.0 v8.19.0 labels Feb 5, 2025
@mbondyra mbondyra force-pushed the lens/scss-to-css-in-js branch 8 times, most recently from ff2d743 to 9231fc4 Compare February 21, 2025 21:33
@mbondyra mbondyra marked this pull request as ready for review February 24, 2025 14:53
@mbondyra mbondyra requested review from a team as code owners February 24, 2025 14:53
@elasticmachine
Copy link
Contributor

elasticmachine commented Feb 24, 2025

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

@mbondyra mbondyra marked this pull request as draft February 24, 2025 14:53
akowalska622
akowalska622 reviewed Feb 26, 2025
View reviewed changes
@mbondyra mbondyra force-pushed the lens/scss-to-css-in-js branch from db99549 to b4fe4b7 Compare March 3, 2025 12:56
@mbondyra mbondyra marked this pull request as ready for review March 3, 2025 13:03
@markov00 markov00 self-requested a review March 19, 2025 10:13
markov00
markov00 approved these changes Mar 19, 2025
View reviewed changes
...lugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.tsx
width: 256px;
`,
item: ({ euiTheme }: UseEuiTheme) => `
& + & {
Copy link
Contributor

@markov00 markov00 Mar 19, 2025

Choose a reason for hiding this comment

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

personally I pefer CSS over JS, but. we are migrating to a CSS-in-JS so I believe we can take advantage of that to make the style less difficult to read and maintain

@elasticmachine
Copy link
Contributor

elasticmachine commented Mar 19, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
lens 1527 1356 -171

Async chunks

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

id before after diff
eventAnnotationListing 207.7KB 207.8KB +89.0B
lens 1.5MB 1.4MB -85.4KB
total -85.3KB

Page load bundle

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

id before after diff
lens 58.7KB 58.6KB -161.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
lens 22 23 +1

Total ESLint disabled count

id before after diff
lens 22 23 +1

History

cc @markov00

@markov00 markov00 merged commit de52f41 into elastic:main Mar 19, 2025
10 checks passed
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 19, 2025

Starting backport for target branches: 8.x

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

@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 19, 2025

💔 All backports failed

Status Branch Result
❌ 8.x Backport failed because of merge conflicts

You might need to backport the following PRs to 8.x:
- [Lens][Datatable] Fix color by value for Last value array mode (#213917)

Manual backport

To create the backport manually run:

node scripts/backport --pr 209768

Questions ?

Please refer to the Backport tool documentation

@mariairiartef mariairiartef mentioned this pull request Mar 20, 2025
Closed
74 tasks
@kibanamachine kibanamachine mentioned this pull request Mar 20, 2025
Merged
clintandrewhall pushed a commit to clintandrewhall/kibana that referenced this pull request Mar 20, 2025
@mbondyra @clintandrewhall
[Lens/SCSS] Replace scss to css-in-js for Lens codebase (elastic#209768)
7aeb0ae 
Replace SCSS in css-in-js for Lens codebase
@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 21, 2025
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 21, 2025

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 209768 locally

JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Mar 24, 2025
@mbondyra @JoseLuisGJ
[Lens/SCSS] Replace scss to css-in-js for Lens codebase (elastic#209768)
6e88cf2 
Replace SCSS in css-in-js for Lens codebase
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 24, 2025

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 209768 locally

@kibanamachine kibanamachine mentioned this pull request Mar 25, 2025
Merged
1 task
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 25, 2025

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 209768 locally

This was referenced Mar 25, 2025
Merged
Merged
@nickofthyme
Copy link
Contributor

nickofthyme commented Mar 26, 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

@nickofthyme nickofthyme mentioned this pull request Mar 26, 2025
Closed
nickofthyme pushed a commit to nickofthyme/kibana that referenced this pull request Mar 26, 2025
@mbondyra
[Lens/SCSS] Replace scss to css-in-js for Lens codebase (elastic#209768)
7c44444 
Replace SCSS in css-in-js for Lens codebase

(cherry picked from commit de52f41)

# Conflicts:
#	x-pack/platform/plugins/shared/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
#	x-pack/platform/plugins/shared/lens/public/visualization_container.scss
#	x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 27, 2025

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

@markov00 markov00 removed the v9.0.0 label Mar 27, 2025
@kibanamachine
Copy link
Contributor

kibanamachine commented Mar 28, 2025

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

nickofthyme added a commit that referenced this pull request Mar 31, 2025
@nickofthyme @mbondyra
@kibanamachine @mariairiartef
[8.x] [Lens/SCSS] Replace scss to css-in-js for Lens codebase (#209768)…
ba172d1 
… (#215974)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens/SCSS] Replace scss to css-in-js for Lens codebase
(#209768)](#209768)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"4283304+mbondyra@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-03-19T17:33:23Z","message":"[Lens/SCSS]
Replace scss to css-in-js for Lens codebase (#209768)\n\nReplace SCSS in
css-in-js for Lens
codebase","sha":"de52f41a5c1d5ea81ace9c49196dd07e45990edf","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
missing","ci:build-webpack-bundle-analyzer","backport:version","v9.1.0","v8.19.0"],"title":"[Lens/SCSS]
Replace scss to css-in-js for Lens
codebase","number":209768,"url":"https://github.com/elastic/kibana/pull/209768","mergeCommit":{"message":"[Lens/SCSS]
Replace scss to css-in-js for Lens codebase (#209768)\n\nReplace SCSS in
css-in-js for Lens
codebase","sha":"de52f41a5c1d5ea81ace9c49196dd07e45990edf"}},"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/209768","number":209768,"mergeCommit":{"message":"[Lens/SCSS]
Replace scss to css-in-js for Lens codebase (#209768)\n\nReplace SCSS in
css-in-js for Lens
codebase","sha":"de52f41a5c1d5ea81ace9c49196dd07e45990edf"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
@kibanamachine kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 31, 2025
cqliu1 pushed a commit to cqliu1/kibana that referenced this pull request Mar 31, 2025
@mbondyra @cqliu1
[Lens/SCSS] Replace scss to css-in-js for Lens codebase (elastic#209768)
db559cc 
Replace SCSS in css-in-js for Lens codebase
@nickofthyme nickofthyme mentioned this pull request Nov 12, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mariairiartef mariairiartef mariairiartef left review comments

@markov00 markov00 markov00 approved these changes

@MichaelMarcialis MichaelMarcialis MichaelMarcialis approved these changes

@akowalska622 akowalska622 akowalska622 approved these changes

Assignees

@markov00 markov00

Labels

backport:version Backport to applied version labels ci:build-webpack-bundle-analyzer 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.

10 participants

@mbondyra @elasticmachine @kibanamachine @nickofthyme @markov00 @MichaelMarcialis @akowalska622 @mariairiartef @tsullivan @dej611