Skip to content

[Graph/SCSS] Refactor styles to use Emotion#212916

Merged
mariairiartef merged 40 commits intoelastic:mainfrom
mariairiartef:lens/scss-js/graph
Mar 19, 2025
Merged

[Graph/SCSS] Refactor styles to use Emotion#212916
mariairiartef merged 40 commits intoelastic:mainfrom
mariairiartef:lens/scss-js/graph

Conversation

@mariairiartef
Copy link
Copy Markdown
Contributor

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

Summary

Part of #208908

Replaces scss to css-in-js.

Note

The rest of the .scss will be migrated in different pull requests

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 3, 2025
@mariairiartef
Delete import
48e168f
@mariairiartef
Migrate grapgh container styles
7bf419d
@mariairiartef
Remove unused margin from graph menus in _graph.scss
ec99e04
@mariairiartef
Remove unused flex group styles from _graph.scss
961de88
@mariairiartef
Remove unused _graph.scss file and update imports in _index.scss
d70d05a
@mariairiartef
Remove unused import in workspace_layout.tsx
bb044da
@mariairiartef
Remove unused inspect.scss file and update imports in _index.scss
f9826d2
@mariairiartef
Migrate grapgh search bar data source button styles
8683423
@mariairiartef
Remove unused _field_editor.scss and update imports in `_index.scss…
7428a92 
…`; refactor `FieldEditor` to use Emotion for styling
@mariairiartef
Remove unused _field_picker.scss and _index.scss; refactor `Field…
393c855 
…Picker` to use Emotion for styling
@mariairiartef
Remove unused _mixins.scss and update imports in _index.scss and …
ba0f637 
…`index.scss`
@mariairiartef
Refactor sidebar styles to use Emotion for styling and remove unused CSS
86a93de
@mariairiartef
Refactor sidebar components to use Emotion for styling and remove unu…
a461ff3 
…sed CSS
@mariairiartef
Refactor ControlPanel and SelectedNodeItem to use Emotion for styling…
c266268 
…; remove unused CSS from sidebar
@mariairiartef
Refactor components to remove sidebar styles and implement Emotion fo…
bab25c0 
…r styling in DrillDownIconLinks and MergeCandidates
@mariairiartef
Fix imports
8e0ca4a
@mariairiartef
Refactor styles to remove SCSS files and implement Emotion for stylin…
af032ac 
…g in various components
@mariairiartef
Refactor FieldEditor and FieldPicker to use Emotion for styling; rena…
727b3cf 
…me gphFieldBadgeSize to gphFieldBadgeSizeStyles
@mariairiartef mariairiartef mentioned this pull request Mar 10, 2025
Closed
74 tasks
@mariairiartef mariairiartef added Feature:Graph Graph application feature technical debt Improvement of the software architecture and operational architecture labels Mar 10, 2025
andreadelrio
andreadelrio approved these changes Mar 14, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@andreadelrio andreadelrio left a comment

Choose a reason for hiding this comment

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

LGTM. Code review only.

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Mar 19, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
graph 273 274 +1

Async chunks

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

id before after diff
graph 394.0KB 390.0KB -4.0KB

History

cc @mariairiartef

@mariairiartef mariairiartef merged commit ecd3521 into elastic:main Mar 19, 2025
9 checks passed
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Mar 19, 2025

Starting backport for target branches: 8.x

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

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 19, 2025
@mariairiartef
[Graph/SCSS] Refactor styles to use Emotion (elastic#212916)
f84eacc 
## Summary

Part of elastic#208908

Replaces scss to css-in-js.

> [!NOTE]
> The rest of the `.scss` will be migrated in different pull requests

<!--

- [ ] `x-pack/platform/plugins/private/graph/`public/_mixins.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_app.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_graph.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_inspect.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_field_picker.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_index.scss

-->

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

(cherry picked from commit ecd3521)
@kibanamachine kibanamachine mentioned this pull request Mar 19, 2025
Merged
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Mar 19, 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 Mar 20, 2025
Merged
1 task
clintandrewhall pushed a commit to clintandrewhall/kibana that referenced this pull request Mar 20, 2025
@mariairiartef @clintandrewhall
[Graph/SCSS] Refactor styles to use Emotion (elastic#212916)
644761b 
## Summary

Part of elastic#208908

Replaces scss to css-in-js.

> [!NOTE]
> The rest of the `.scss` will be migrated in different pull requests

<!--

- [ ] `x-pack/platform/plugins/private/graph/`public/_mixins.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_app.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_graph.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_inspect.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_field_picker.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_index.scss

-->

### 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)
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Mar 21, 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.

@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 21, 2025
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Mar 24, 2025
@mariairiartef @JoseLuisGJ
[Graph/SCSS] Refactor styles to use Emotion (elastic#212916)
94c0d11 
## Summary

Part of elastic#208908

Replaces scss to css-in-js.

> [!NOTE]
> The rest of the `.scss` will be migrated in different pull requests

<!--

- [ ] `x-pack/platform/plugins/private/graph/`public/_mixins.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_app.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_graph.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_inspect.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_field_picker.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_index.scss

-->

### 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)
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Mar 24, 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.

1 similar comment
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Mar 25, 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.

kibanamachine added a commit that referenced this pull request Mar 26, 2025
@kibanamachine @mariairiartef @nickofthyme
[8.x] [Graph/SCSS] Refactor styles to use Emotion (#212916) (#215195)
e706927 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Graph/SCSS] Refactor styles to use Emotion
(#212916)](#212916)

<!--- 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-03-19T15:14:01Z","message":"[Graph/SCSS]
Refactor styles to use Emotion (#212916)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n> [!NOTE]\n> The rest of the `.scss` will be migrated in
different pull requests\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)","sha":"ecd3521acd6befddd1f866cb3561e3dc8d1a2334","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Graph","technical
debt","Team:Visualizations","release_note:skip","backport:version","v9.1.0","v8.19.0"],"title":"[Graph/SCSS]
Refactor styles to use
Emotion","number":212916,"url":"https://github.com/elastic/kibana/pull/212916","mergeCommit":{"message":"[Graph/SCSS]
Refactor styles to use Emotion (#212916)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n> [!NOTE]\n> The rest of the `.scss` will be migrated in
different pull requests\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)","sha":"ecd3521acd6befddd1f866cb3561e3dc8d1a2334"}},"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/212916","number":212916,"mergeCommit":{"message":"[Graph/SCSS]
Refactor styles to use Emotion (#212916)\n\n## Summary\n\nPart of
https://github.com/elastic/kibana/issues/208908\n\nReplaces scss to
css-in-js.\n\n> [!NOTE]\n> The rest of the `.scss` will be migrated in
different pull requests\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)","sha":"ecd3521acd6befddd1f866cb3561e3dc8d1a2334"}},{"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>
Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co>
@kibanamachine kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 26, 2025
cqliu1 pushed a commit to cqliu1/kibana that referenced this pull request Mar 31, 2025
@mariairiartef @cqliu1
[Graph/SCSS] Refactor styles to use Emotion (elastic#212916)
47ea657 
## Summary

Part of elastic#208908

Replaces scss to css-in-js.

> [!NOTE]
> The rest of the `.scss` will be migrated in different pull requests

<!--

- [ ] `x-pack/platform/plugins/private/graph/`public/_mixins.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_app.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_graph.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_inspect.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss

- [ ]
`x-pack/platform/plugins/private/graph/`public/components/_search_bar.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_field_picker.scss
- [ ]
`x-pack/platform/plugins/private/graph/`public/components/field_manager/_index.scss

-->

### 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andreadelrio andreadelrio andreadelrio approved these changes

@nickofthyme nickofthyme nickofthyme approved these changes

Assignees

@mariairiartef mariairiartef

Labels

backport:version Backport to applied version labels Feature:Graph Graph application feature 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 @andreadelrio @nickofthyme @tsullivan