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.

Sign up for GitHub

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

Jump to bottom

[ObsUX] [APM] Migrate APM from styled-components to @emotion #202765

Closed
MiriamAparicio opened this issue Dec 3, 2024 · 1 comment · Fixed by #204222
Closed

[ObsUX] [APM] Migrate APM from styled-components to @emotion #202765

MiriamAparicio opened this issue Dec 3, 2024 · 1 comment · Fixed by #204222
Assignees
@MiriamAparicio
Labels
EUI Visual Refresh Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v9.0.0

Comments

@MiriamAparicio
Copy link
Contributor

MiriamAparicio commented Dec 3, 2024 •
edited
Loading

Part of #200580

Summary

While working on the visual refresh for the new EUI theme Borealis we figured that was a good time to do the recommended migration from styled-components to @emotion

Reference for the migration:

What needs to be done

  • Migrate apm plugin from styled-components to @emotion
  • Eui Visual Refresh for Borealis new theme
  • 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
  • All references to renamed tokens have been updated to use the new token name
  • Replace all usage of withTheme by withEuiTheme
  • Remove usage of deprecated useEuiBackgroundColor
  • All usages of "success" colors have been updated to accentSecondary and textAccentSecondary as needed

Running Kibana with the Borealis theme

In order to run Kibana with Borealis, you'll need to do the following:

  • Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true
  • Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start
  • This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis.

Reference for the changes related with the visual refresh

#199715
@MiriamAparicio MiriamAparicio added EUI Visual Refresh Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v9.0.0 labels Dec 3, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

@MiriamAparicio MiriamAparicio mentioned this issue Dec 3, 2024
Closed
@MiriamAparicio MiriamAparicio self-assigned this Dec 5, 2024
@MiriamAparicio MiriamAparicio mentioned this issue Dec 13, 2024
Merged
MiriamAparicio added a commit that referenced this issue Dec 18, 2024
@MiriamAparicio
[ObsUX] [APM] Migrate APM from styled-components to @emotion (#204222)
fb0cb57 
Closes #202765

### Summary
While working on the visual refresh for the new EUI theme Borealis we
figured that was a good time to do the recommended migration from
`styled-components` to `@emotion`

### What has been done

- Migrate apm plugin from `styled-components` to `@emotion`
- Eui Visual Refresh for Borealis new theme
- 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
- All references to renamed tokens have been updated to use the new
token name
- Remove usage of deprecated `useEuiBackgroundColor`
- All usages of "success" colors have been updated to `accentSecondary`
and `textAccentSecondary` as needed

### Not this time

There are some color values on the server side, and the values are
static they would not update properly as dynamic tokens do. Eui guidance
right now is to keep these as they are for now (meaning to keep using
the JSON tokens).

### How to test
#### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

- Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true
- Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start
- This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.
@MiriamAparicio MiriamAparicio mentioned this issue Dec 18, 2024
Closed
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this issue Dec 19, 2024
@MiriamAparicio @JoseLuisGJ
[ObsUX] [APM] Migrate APM from styled-components to @emotion (elastic…
84bf1e7 
…#204222)

Closes elastic#202765

### Summary
While working on the visual refresh for the new EUI theme Borealis we
figured that was a good time to do the recommended migration from
`styled-components` to `@emotion`

### What has been done

- Migrate apm plugin from `styled-components` to `@emotion`
- Eui Visual Refresh for Borealis new theme
- 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
- All references to renamed tokens have been updated to use the new
token name
- Remove usage of deprecated `useEuiBackgroundColor`
- All usages of "success" colors have been updated to `accentSecondary`
and `textAccentSecondary` as needed

### Not this time

There are some color values on the server side, and the values are
static they would not update properly as dynamic tokens do. Eui guidance
right now is to keep these as they are for now (meaning to keep using
the JSON tokens).

### How to test
#### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

- Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true
- Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start
- This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MiriamAparicio MiriamAparicio

Labels
EUI Visual Refresh Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v9.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[ObsUX] [APM] Migrate APM from styled-components to @emotion MiriamAparicio/kibana
2 participants
@elasticmachine @MiriamAparicio