Skip to content
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

Open
40 of 65 tasks
darnautov opened this issue Sep 14, 2022 · 1 comment
Open
40 of 65 tasks

[ML] Replace legacy SCSS overwrites with css-in-js #140695

darnautov opened this issue Sep 14, 2022 · 1 comment
Assignees
Labels
Meta :ml Team:ML Team label for ML (also use :ml) v8.18.0

Comments

@darnautov
Copy link
Contributor

darnautov commented Sep 14, 2022

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 (using css helper from @emotion/react), utilizing appropriate theme variables from useEuiTheme 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.

@darnautov darnautov added Meta :ml Team:ML Team label for ML (also use :ml) labels Sep 14, 2022
@elasticmachine
Copy link
Contributor

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
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)
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)
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)
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>
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>
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)
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
Labels
Meta :ml Team:ML Team label for ML (also use :ml) v8.18.0
Projects
None yet
Development

No branches or pull requests

6 participants