-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ML] Replace legacy SCSS overwrites with css-in-js #140695
Comments
Pinging @elastic/ml-ui (:ml) |
jgowdyelastic
added a commit
that referenced
this issue
Mar 2, 2023
Removes the scss files which were being used to override various eui styles or add styles to custom components. Affect the anomaly detection jobs list and wizards. This is not an in-depth refactor of our styles, and so some overrides are still necessary in order to retain an identical UI, in these cases the style overrides have been moved to inline emotion `css`. Part of #140695
bmorelli25
pushed a commit
to bmorelli25/kibana
that referenced
this issue
Mar 10, 2023
…#152240) Removes the scss files which were being used to override various eui styles or add styles to custom components. Affect the anomaly detection jobs list and wizards. This is not an in-depth refactor of our styles, and so some overrides are still necessary in order to retain an identical UI, in these cases the style overrides have been moved to inline emotion `css`. Part of elastic#140695
1 task
This was referenced Nov 6, 2024
walterra
added a commit
that referenced
this issue
Nov 7, 2024
## Summary Part of #140695 Migrates SCSS to emotion for ColorRangeLegend. <img src="https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293" /> <img src="https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996" width="75%" /> ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 7, 2024
## Summary Part of elastic#140695 Migrates SCSS to emotion for ColorRangeLegend. <img src="https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293" /> <img src="https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996" width="75%" /> ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) (cherry picked from commit 12dc8c1)
3 tasks
mbondyra
pushed a commit
to mbondyra/kibana
that referenced
this issue
Nov 8, 2024
## Summary Part of elastic#140695 Migrates SCSS to emotion for ColorRangeLegend. <img src="https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293" /> <img src="https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996" width="75%" /> ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
9 tasks
walterra
added a commit
that referenced
this issue
Nov 11, 2024
…199417) ## Summary Part of #140695 Migrates SCSS to emotion for the Anomaly Detection chart tooltip. ![CleanShot 2024-11-08 at 08 01 22@2x](https://github.com/user-attachments/assets/a7cd94c2-15b7-42bc-b98a-3596eaeeafe1) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
walterra
added a commit
that referenced
this issue
Nov 11, 2024
…otion (#199180) ## Summary Part of #140695 Migrates SCSS to emotion for the DFA scatterplot matrix. ![CleanShot 2024-11-06 at 17 27 35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 11, 2024
…lastic#199417) ## Summary Part of elastic#140695 Migrates SCSS to emotion for the Anomaly Detection chart tooltip. ![CleanShot 2024-11-08 at 08 01 22@2x](https://github.com/user-attachments/assets/a7cd94c2-15b7-42bc-b98a-3596eaeeafe1) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) (cherry picked from commit 10db645)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 11, 2024
…otion (elastic#199180) ## Summary Part of elastic#140695 Migrates SCSS to emotion for the DFA scatterplot matrix. ![CleanShot 2024-11-06 at 17 27 35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) (cherry picked from commit aeef51f)
tkajtoch
pushed a commit
to tkajtoch/kibana
that referenced
this issue
Nov 12, 2024
…lastic#199417) ## Summary Part of elastic#140695 Migrates SCSS to emotion for the Anomaly Detection chart tooltip. ![CleanShot 2024-11-08 at 08 01 22@2x](https://github.com/user-attachments/assets/a7cd94c2-15b7-42bc-b98a-3596eaeeafe1) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
tkajtoch
pushed a commit
to tkajtoch/kibana
that referenced
this issue
Nov 12, 2024
…otion (elastic#199180) ## Summary Part of elastic#140695 Migrates SCSS to emotion for the DFA scatterplot matrix. ![CleanShot 2024-11-06 at 17 27 35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Nov 18, 2024
…lastic#199417) ## Summary Part of elastic#140695 Migrates SCSS to emotion for the Anomaly Detection chart tooltip. ![CleanShot 2024-11-08 at 08 01 22@2x](https://github.com/user-attachments/assets/a7cd94c2-15b7-42bc-b98a-3596eaeeafe1) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Nov 18, 2024
…otion (elastic#199180) ## Summary Part of elastic#140695 Migrates SCSS to emotion for the DFA scatterplot matrix. ![CleanShot 2024-11-06 at 17 27 35@2x](https://github.com/user-attachments/assets/a022b4b8-a659-495d-ae82-10b65cf42579) ### Checklist - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
alvarezmelissa87
added a commit
that referenced
this issue
Nov 18, 2024
## Summary Related meta issue: #140695 DFA map legend changes: <img width="1160" alt="image" src="https://github.com/user-attachments/assets/9858e83f-8cf5-4b1c-97d3-2726808eaedc"> Job messages changes: <img width="1033" alt="image" src="https://github.com/user-attachments/assets/fff3cdb0-efad-4cfd-bc18-bf60deffad26"> job messages in AD: <img width="1231" alt="image" src="https://github.com/user-attachments/assets/4f880be2-1be6-4315-a086-45920c3cb35e"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 18, 2024
## Summary Related meta issue: elastic#140695 DFA map legend changes: <img width="1160" alt="image" src="https://github.com/user-attachments/assets/9858e83f-8cf5-4b1c-97d3-2726808eaedc"> Job messages changes: <img width="1033" alt="image" src="https://github.com/user-attachments/assets/fff3cdb0-efad-4cfd-bc18-bf60deffad26"> job messages in AD: <img width="1231" alt="image" src="https://github.com/user-attachments/assets/4f880be2-1be6-4315-a086-45920c3cb35e"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 2c0825f)
rbrtj
added a commit
that referenced
this issue
Nov 19, 2024
## Summary Part of: [#140695](#140695) Migrates SCSS to emotion for Influencers list. | Before | After | | ------------- | ------------- | | ![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d) | ![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef) | | ![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6) | ![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430) |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 19, 2024
## Summary Part of: [elastic#140695](elastic#140695) Migrates SCSS to emotion for Influencers list. | Before | After | | ------------- | ------------- | | ![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d) | ![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef) | | ![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6) | ![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430) | (cherry picked from commit 9162fde)
kibanamachine
added a commit
that referenced
this issue
Nov 20, 2024
…200824) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Migrate influencers list from SCSS to Emotion (#200019)](#200019) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Robert Jaszczurek","email":"92210485+rbrtj@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-19T22:23:41Z","message":"[ML] Migrate influencers list from SCSS to Emotion (#200019)\n\n## Summary\r\n\r\nPart of: [#140695](https://github.com/elastic/kibana/issues/140695)\r\nMigrates SCSS to emotion for Influencers list.\r\n\r\n| Before | After |\r\n| ------------- | ------------- |\r\n|\r\n![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d)\r\n|\r\n![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6)\r\n|\r\n![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430)\r\n|","sha":"9162fdea146adadec05fa50f2cf4461bf19b7892","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","v9.0.0","Team:ML","backport:version","v8.17.0"],"title":"[ML] Migrate influencers list from SCSS to Emotion","number":200019,"url":"https://github.com/elastic/kibana/pull/200019","mergeCommit":{"message":"[ML] Migrate influencers list from SCSS to Emotion (#200019)\n\n## Summary\r\n\r\nPart of: [#140695](https://github.com/elastic/kibana/issues/140695)\r\nMigrates SCSS to emotion for Influencers list.\r\n\r\n| Before | After |\r\n| ------------- | ------------- |\r\n|\r\n![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d)\r\n|\r\n![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6)\r\n|\r\n![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430)\r\n|","sha":"9162fdea146adadec05fa50f2cf4461bf19b7892"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200019","number":200019,"mergeCommit":{"message":"[ML] Migrate influencers list from SCSS to Emotion (#200019)\n\n## Summary\r\n\r\nPart of: [#140695](https://github.com/elastic/kibana/issues/140695)\r\nMigrates SCSS to emotion for Influencers list.\r\n\r\n| Before | After |\r\n| ------------- | ------------- |\r\n|\r\n![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d)\r\n|\r\n![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6)\r\n|\r\n![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430)\r\n|","sha":"9162fdea146adadec05fa50f2cf4461bf19b7892"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
paulinashakirova
pushed a commit
to paulinashakirova/kibana
that referenced
this issue
Nov 26, 2024
## Summary Part of: [elastic#140695](elastic#140695) Migrates SCSS to emotion for Influencers list. | Before | After | | ------------- | ------------- | | ![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d) | ![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef) | | ![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6) | ![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430) |
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Dec 12, 2024
## Summary Related meta issue: elastic#140695 DFA map legend changes: <img width="1160" alt="image" src="https://github.com/user-attachments/assets/9858e83f-8cf5-4b1c-97d3-2726808eaedc"> Job messages changes: <img width="1033" alt="image" src="https://github.com/user-attachments/assets/fff3cdb0-efad-4cfd-bc18-bf60deffad26"> job messages in AD: <img width="1231" alt="image" src="https://github.com/user-attachments/assets/4f880be2-1be6-4315-a086-45920c3cb35e"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Dec 12, 2024
## Summary Part of: [elastic#140695](elastic#140695) Migrates SCSS to emotion for Influencers list. | Before | After | | ------------- | ------------- | | ![image](https://github.com/user-attachments/assets/1f85b2d1-5526-49b2-819d-525989b9c48d) | ![image](https://github.com/user-attachments/assets/e1e5745e-d00a-4a51-ab93-b29ff71d8aef) | | ![image](https://github.com/user-attachments/assets/f1e8d594-8a9d-4f08-98bb-156e21abd1c6) | ![image](https://github.com/user-attachments/assets/d55a2848-2c28-4b4b-88b2-ed1b98b16430) |
walterra
added a commit
that referenced
this issue
Dec 18, 2024
## Summary Part of #199715 (EUI Visual Refresh). Recommend to review with white-space diff disabled: https://github.com/elastic/kibana/pull/203518/files?w=1 - All references to renamed tokens have been updated to use the new token name. - All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa. - Migrated some data visualizer related SCSS to emotion, part of #140695. - It makes use of EUI's own `useEuiTheme()` instead of our own hook variants. So this gets rid of `useCurrentEuiThemeVars()`, `useFieldStatsFlyoutThemeVars()`, `useCurrentEuiTheme()`, `useCurrentThemeVars()`. - Renamed components used to edit Anomaly Detection jobs from `JobDetails`, `Detectors`, `Datafeed` to `EditJobDetailsTab`, `EditDetectorsTab`, `EditDatafeedTab` to make them less ambiguous. - Added unit tests for `ner_output.tsx`. - Adds checks to pick `euiColorVis*` colors suitable for the theme. ---- Some of our code used colors like `euiColorVis5_behindText`. In Borealis `*_behindText` is no longer available since the original colors like `euiColorVis5` have been updated to be suitable to be used behind text. For that reason and for simplicity's sake I removed the border from the custom badges we use to render NER items: NER labels Amsterdam: ![CleanShot 2024-12-18 at 11 37 45@2x](https://github.com/user-attachments/assets/d82bca3a-2ad1-411a-94cd-748de6b4b0e9) NER labels Borealis: ![CleanShot 2024-12-18 at 11 38 45@2x](https://github.com/user-attachments/assets/36987779-fab2-4ad7-8e31-6853d48079a1) ### Checklist - [ ] [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)
1 task
JoseLuisGJ
pushed a commit
to JoseLuisGJ/kibana
that referenced
this issue
Dec 19, 2024
## Summary Part of elastic#199715 (EUI Visual Refresh). Recommend to review with white-space diff disabled: https://github.com/elastic/kibana/pull/203518/files?w=1 - All references to renamed tokens have been updated to use the new token name. - All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa. - Migrated some data visualizer related SCSS to emotion, part of elastic#140695. - It makes use of EUI's own `useEuiTheme()` instead of our own hook variants. So this gets rid of `useCurrentEuiThemeVars()`, `useFieldStatsFlyoutThemeVars()`, `useCurrentEuiTheme()`, `useCurrentThemeVars()`. - Renamed components used to edit Anomaly Detection jobs from `JobDetails`, `Detectors`, `Datafeed` to `EditJobDetailsTab`, `EditDetectorsTab`, `EditDatafeedTab` to make them less ambiguous. - Added unit tests for `ner_output.tsx`. - Adds checks to pick `euiColorVis*` colors suitable for the theme. ---- Some of our code used colors like `euiColorVis5_behindText`. In Borealis `*_behindText` is no longer available since the original colors like `euiColorVis5` have been updated to be suitable to be used behind text. For that reason and for simplicity's sake I removed the border from the custom badges we use to render NER items: NER labels Amsterdam: ![CleanShot 2024-12-18 at 11 37 45@2x](https://github.com/user-attachments/assets/d82bca3a-2ad1-411a-94cd-748de6b4b0e9) NER labels Borealis: ![CleanShot 2024-12-18 at 11 38 45@2x](https://github.com/user-attachments/assets/36987779-fab2-4ad7-8e31-6853d48079a1) ### Checklist - [ ] [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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
We have 91
scss
files, some of them contain potentially dangerous EUI overwrites. As EUI delivers the css-in-js support with emotion, we should migrate these custom styles for both EUI components and regular HTML elements (usingcss
helper from@emotion/react
), utilizing appropriate theme variables fromuseEuiTheme
hook.Besides that, alongside the updated classes, all inline styles should be replaced with
css
.Would be better to split this task by page, potentially we can break it down even further, especially the components folder.
[ML] Anomaly Detection: Consolidate severity colors #204803
[ML] Removing scss override files for anomaly detection jobs #152240
[ML] Migrate ColorRangeLegend from SCSS to emotion. #199156
[ML] Migrate ColorRangeLegend from SCSS to emotion. #199156
[ML] Data Frame Analytics: Migrate scatterplot matrix from SCSS to emotion #199180
[ML] Anomaly Detection: Migrate chart tooltip from SCSS to emotion #199417
[ML] Anomaly Detection: Migrate chart tooltip from SCSS to emotion #199417
[ML] Anomaly Detection: Consolidate severity colors #204803
- [ML] Remove data frame analytics scss files #199572
- [ML] Data Frame Analytics: removing scss overrides for exploration pages #197724
- [ML] Data Frame Analytics: removing scss overrides for exploration pages #197724
- [ML] Data Frame Analytics: removing scss overrides for exploration pages #197724
- [ML] Data Frame Analytics: removing scss overrides for exploration pages #197724
- [ML] Remove data frame analytics scss files #199572
- [ML] Data Frame Analytics: removing scss overrides for exploration pages #197724
- [ML] Remove data frame analytics scss files #199572
- [ML] Remove data frame analytics scss files #199572
- [ML] Data Frame Analytics: removing scss overrides for exploration pages #197724
- [ML] Remove data frame analytics scss files #199572
- [ML] Remove data frame analytics scss files #199572
- [ML] Remove data frame analytics scss files #199572
The text was updated successfully, but these errors were encountered: