[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
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.  ### 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.  ### 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.  ### 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.  ### 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.  ### 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 <[email protected]>
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 <[email protected]> (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 | | ------------- | ------------- | |  |  | |  |  |
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 | | ------------- | ------------- | |  |  | |  |  | (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":"[email protected]"},"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\r\n|\r\n\r\n|\r\n|\r\n\r\n|\r\n\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\r\n|\r\n\r\n|\r\n|\r\n\r\n|\r\n\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\r\n|\r\n\r\n|\r\n|\r\n\r\n|\r\n\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 <[email protected]>
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 | | ------------- | ------------- | |  |  | |  |  |
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 <[email protected]>
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 | | ------------- | ------------- | |  |  | |  |  |
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:  NER labels Borealis:  ### 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:  NER labels Borealis:  ### 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)
benakansara
pushed a commit
to benakansara/kibana
that referenced
this issue
Jan 2, 2025
## 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:  NER labels Borealis:  ### 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)
walterra
added a commit
that referenced
this issue
Jan 2, 2025
## Summary Part of #140695. We defined the hex codes for anomaly detection severity colors in several places. This PR consolidates this and makes sure the hex codes are defined in just one place. Note this PR doesn't change any of the colors or styling related to anomaly detection, it is pure refactoring to make future updates to these colors more easy. - Renames `BLANK` to `UNKNOWN` to be in line with severity labels. - Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes won't need updating every assertion. - Migrates all SCSS that made use of severity colors to emotion so it can reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors get removed in this PR. ### 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)
cqliu1
pushed a commit
to cqliu1/kibana
that referenced
this issue
Jan 2, 2025
## Summary Part of elastic#140695. We defined the hex codes for anomaly detection severity colors in several places. This PR consolidates this and makes sure the hex codes are defined in just one place. Note this PR doesn't change any of the colors or styling related to anomaly detection, it is pure refactoring to make future updates to these colors more easy. - Renames `BLANK` to `UNKNOWN` to be in line with severity labels. - Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes won't need updating every assertion. - Migrates all SCSS that made use of severity colors to emotion so it can reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors get removed in this PR. ### 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)
walterra
added a commit
that referenced
this issue
Jan 3, 2025
…205407) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Anomaly Detection: Consolidate severity colors (#204803)](#204803) <!--- Backport version: 8.9.8 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Walter Rafelsberger","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-02T15:18:34Z","message":"[ML] Anomaly Detection: Consolidate severity colors (#204803)\n\n## Summary\r\n\r\nPart of #140695.\r\n\r\nWe defined the hex codes for anomaly detection severity colors in\r\nseveral places. This PR consolidates this and makes sure the hex codes\r\nare defined in just one place. Note this PR doesn't change any of the\r\ncolors or styling related to anomaly detection, it is pure refactoring\r\nto make future updates to these colors more easy.\r\n\r\n- Renames `BLANK` to `UNKNOWN` to be in line with severity labels.\r\n- Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes\r\nwon't need updating every assertion.\r\n- Migrates all SCSS that made use of severity colors to emotion so it\r\ncan reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors\r\nget removed in this PR.\r\n\r\n### Checklist\r\n\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"da8f0127e1a3fc305c4ae02e4d6584014e622ae5","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","Feature:Anomaly Detection","release_note:skip","v9.0.0","backport:version","v8.18.0"],"number":204803,"url":"https://github.com/elastic/kibana/pull/204803","mergeCommit":{"message":"[ML] Anomaly Detection: Consolidate severity colors (#204803)\n\n## Summary\r\n\r\nPart of #140695.\r\n\r\nWe defined the hex codes for anomaly detection severity colors in\r\nseveral places. This PR consolidates this and makes sure the hex codes\r\nare defined in just one place. Note this PR doesn't change any of the\r\ncolors or styling related to anomaly detection, it is pure refactoring\r\nto make future updates to these colors more easy.\r\n\r\n- Renames `BLANK` to `UNKNOWN` to be in line with severity labels.\r\n- Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes\r\nwon't need updating every assertion.\r\n- Migrates all SCSS that made use of severity colors to emotion so it\r\ncan reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors\r\nget removed in this PR.\r\n\r\n### Checklist\r\n\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"da8f0127e1a3fc305c4ae02e4d6584014e622ae5"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204803","number":204803,"mergeCommit":{"message":"[ML] Anomaly Detection: Consolidate severity colors (#204803)\n\n## Summary\r\n\r\nPart of #140695.\r\n\r\nWe defined the hex codes for anomaly detection severity colors in\r\nseveral places. This PR consolidates this and makes sure the hex codes\r\nare defined in just one place. Note this PR doesn't change any of the\r\ncolors or styling related to anomaly detection, it is pure refactoring\r\nto make future updates to these colors more easy.\r\n\r\n- Renames `BLANK` to `UNKNOWN` to be in line with severity labels.\r\n- Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes\r\nwon't need updating every assertion.\r\n- Migrates all SCSS that made use of severity colors to emotion so it\r\ncan reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors\r\nget removed in this PR.\r\n\r\n### Checklist\r\n\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"da8f0127e1a3fc305c4ae02e4d6584014e622ae5"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Jan 13, 2025
## 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:  NER labels Borealis:  ### 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)
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Jan 13, 2025
## Summary Part of elastic#140695. We defined the hex codes for anomaly detection severity colors in several places. This PR consolidates this and makes sure the hex codes are defined in just one place. Note this PR doesn't change any of the colors or styling related to anomaly detection, it is pure refactoring to make future updates to these colors more easy. - Renames `BLANK` to `UNKNOWN` to be in line with severity labels. - Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes won't need updating every assertion. - Migrates all SCSS that made use of severity colors to emotion so it can reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors get removed in this PR. ### 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)
viduni94
pushed a commit
to viduni94/kibana
that referenced
this issue
Jan 23, 2025
## 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:  NER labels Borealis:  ### 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)
viduni94
pushed a commit
to viduni94/kibana
that referenced
this issue
Jan 23, 2025
## Summary Part of elastic#140695. We defined the hex codes for anomaly detection severity colors in several places. This PR consolidates this and makes sure the hex codes are defined in just one place. Note this PR doesn't change any of the colors or styling related to anomaly detection, it is pure refactoring to make future updates to these colors more easy. - Renames `BLANK` to `UNKNOWN` to be in line with severity labels. - Uses `ML_SEVERITY_COLORS.*` in test assertions so future color changes won't need updating every assertion. - Migrates all SCSS that made use of severity colors to emotion so it can reuse `ML_SEVERITY_COLORS`. Therefor the SCSS based severity colors get removed in this PR. ### 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
We have 91
scssfiles, 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 (usingcsshelper from@emotion/react), utilizing appropriate theme variables fromuseEuiThemehook.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: