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

[Meta][CSS-in-JS] Switching to emotion #3912

Open
1 task done
cchaos opened this issue Aug 13, 2020 · 8 comments
Open
1 task done

[Meta][CSS-in-JS] Switching to emotion #3912

cchaos opened this issue Aug 13, 2020 · 8 comments
Assignees
Labels

Comments

@cchaos
Copy link
Contributor

cchaos commented Aug 13, 2020

This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being transparent about our timeline.

(Tentative) Timeline & tasks

Spring 2021:

Get the contexts built out and (partially) used in the EUI components and docs, as well as thoroughly tested in downstream applications like Kibana and Cloud. Figure out all the dependencies, hooks and possible state management that go with it.

Summer 2021:

Fall 2021:

Start shifting component styles from SASS to JS. This part will probably take a full year and probably means phasing out the old 'legacy' theme, making Amsterdam default.

2022-2024

  1. 30 of 30
    emotion meta
    cee-chen

Beyond component conversions:

Needs discussion

  • Remove use of ghost and ink in favor of EuiThemeProvider + colorMode (see discussion)
    • I'm not sure if this still needs to be done or if this is something to instead be visited in the new theme/visual refresh work.
  • Deprecate using EUI's classnames
  • Remove class names (after a lengthy deprecation period)
    • For context, the deprecation of classNames was something Caroline and Greg were pushing for. I'm not convinced that it's even feasible considering Kibana however.
@cchaos cchaos mentioned this issue Dec 1, 2020
@thompsongl thompsongl changed the title [Meta] CSS in JS: Switching to Emotion [Meta] CSS-in-JS: Switching to emotion Jul 30, 2021
@cchaos
Copy link
Contributor Author

cchaos commented Aug 15, 2021

Upgrade process

Questions

  • Do we want to allow EUI styling apart from css prop (e.g. in Kibana)
  • EUI does not always apply className to the outermost element, does a css prop on an object prop apply as expected
  • What do we do with the handful of createElement usages, replace with emotion’s createElement equivalent?
  • When css is applied on a custom component which element gets the style? What if there's a fragment at the top level?

EUI

See #5685

Charts theme

Can we create a EuiThemeCharts similar to EuiThemeDefault that can be used primarily as a React hook to pass the theme down to an elastic-charts implementation? And it know the light/dark color mode automatically.

Consuming apps

  • TBD (babel, etc)
  • Vanilla JS support (Kibana plugins; basic, immutable theme variables)
  • SSR support (verify + link to emotion's docs)
  • Update Gatsby and Next starters

@lightwave
Copy link

Will EUI theme be compatible with the theme specification used in theme-ui and styled system?

@cchaos

This comment has been minimized.

@lightwave

This comment has been minimized.

@cchaos
Copy link
Contributor Author

cchaos commented Nov 3, 2021

@lightwave I've converted your questions to a discussion to keep this Meta issue centered around tasks. #5351

@jlalmes
Copy link

jlalmes commented Nov 23, 2021

Keen to help out with the implementation and rollout for this. Our use case:

  • We need to easily adjust the "primary", "primaryText" colors at runtime using the EuiThemeProvider
  • We would like to use individual components from this library for lightweight applications without needing to include the main @elastic/eui/dist/eui_theme_amsterdam_light.css css file in our bundle.

It seems that we're blocked by this PR #4575 which will outline the game plan for moving forward & converting all other components from sass to emotion. What is the current status of this - and how can we help move this PR closer to alpha/beta/production?

@cchaos
Copy link
Contributor Author

cchaos commented Nov 23, 2021

👋 Hey @jlalmes, that's exciting and we'd absolutely love the help during the conversion. You are correct about #4575 being the next step in the process. We like to put a lot of thinking up front in the endeavors so it's less likely that we look back and wish we had done it differently 😄 . We've tentatively given ourselves the typically slow month of December to figure that part out and have a final plan hopefully by the beginning of 2022. We totally understand your pain points and we hope this will solve most of them. Mostly we've been having to juggle prioritizing this work in tandem with other consumer priorities.

@thompsongl thompsongl mentioned this issue Dec 14, 2021
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants