[FEATURE] CSS-in-JS via `emotion`, initial release #4511

cchaos · 2021-02-10T19:52:19Z

This is the initial release of Emotion (docs only; devDependencies) and the new EuiThemeProvider.

Components

EuiThemeProvider: React context provider for theme values and color mode selection
useEuiTheme: theme consumer in React hook form
withEuiTheme: theme consumer in React HOC form (for class components)

The themes (#4643)

Docs

How to consume ([CSS-in-JS] Global theme #4643)
How to adjust ([CSS-in-JS] Global theme #4643)
How to hook up a theme switcher like we have in our docs (comment) (Tracking: [Docs] EuiThemeProvider global theme switching #5072)
Inline/Dev docs in Theme Utils (comment)
Theme README.md (comment)

Checklist

Check against all themes for compatibility in both light and dark modes

- [ ] Checked in mobile

Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation

~~- [ ] Checked Code Sandbox works for the any docs examples~~

Added or updated jest tests
Checked for breaking changes and labeled appropriately
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

kibanamachine · 2021-02-10T20:14:03Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-02-16T21:02:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-02-17T19:24:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

* poc * tidy * proxy set handler * default theme; docs setup * table colors via css-in-js * exports * withEuiTheme; useEuiTheme return shape; some types * export and proxy fixes * use without provider; some test setup * prevent unnecessary updates * refactor colorMode calc; move computation to provider * utils refactor * clean up * compute default theme for initial context value * snapshot update preview * axe ignore temporary docs page * theme: colorVis and borders, sizes update * coupled types * some utils tests * start to amsterdam; name in theme obj * Revert "table colors via css-in-js" This reverts commit 5614b0f. * eslintrc * readme Co-authored-by: cchaos <caroline.horn@elastic.co>

kibanamachine · 2021-02-17T19:51:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

* allow custom properties via overrides; type clean up * add some tests * update canopy * overrides -> modify * clean up * Update src/services/theme/README.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * update readme * Update src/components/common.ts Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

…to feature/css-in-js

kibanamachine · 2021-03-01T17:30:58Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-03-03T16:37:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-03-03T18:23:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

* convert useEuiTheme to return object; refactor withEuiTheme types * readme update * update docs * Quick update to the docs Co-authored-by: cchaos <caroline.horn@elastic.co>

kibanamachine · 2021-03-11T16:59:09Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

* convert numbers to strings with units * docs * fewer calc() * Updating consuming example to show `calc()` Co-authored-by: cchaos <caroline.horn@elastic.co>

kibanamachine · 2021-03-15T21:07:55Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

…to feature/css-in-js

kibanamachine · 2021-03-29T19:49:44Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-08-20T15:25:14Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-08-23T15:25:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-08-23T16:28:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

scripts/a11y-testing.js

kibanamachine · 2021-08-25T14:04:59Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

kibanamachine · 2021-08-25T16:10:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

chandlerprall

😲 this LGreatTM; cannot observe additional page load weight in Kibana, value updates take 2-4 frames (24-40ms) to compute an updated theme, trigger the React context updates, and re-paint in Emotion. Further perf testing would need to be done outside Kibana, but this is absolutely fine to go 🎉

thompsongl

I contributed a lot of the code here, so I'm signing off from the perspective that I plan on making no further changes and am very pleased with how the theme shape came together.

Thanks for all the work, @cchaos! Can't wait to keep moving with this approach 🥳

cee-chen · 2021-08-26T17:01:52Z

Sorry, I just realized I'm not sure if my approval is blocking merge - I'll be honest that 6k is a lot of lines to review and I mostly did a skim of the docs 🙈 From everything that I've heard from Greg's high-level walkthrough and the syncs, the underlying work sounds solid+super impressive to me! API and usage looks good as well - I'm sure we'll find either pain points or improvement areas as we start the process of converting our components over, and can continue to improve as we go.

TL;DR 🚀 🚀 🚀

kibanamachine · 2021-08-26T18:50:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4511/

cchaos changed the title ~~[FEATURE] Emotion ... aka CSS in JS~~ [FEATURE] Emotion ... aka CSS in JS initial release Feb 10, 2021

cchaos added the meta label Feb 10, 2021

Creating initial CL to get a draft PR started

8a1787e

thompsongl force-pushed the feature/css-in-js branch from d2cec03 to 8a1787e Compare February 16, 2021 20:40

Merge branch 'master' into feature/css-in-js

a0a8b42

thompsongl and others added 3 commits March 1, 2021 11:03

Merge branch 'master' into feature/css-in-js

51604d3

Merge branch 'feature/css-in-js' of https://github.com/elastic/eui in…

9074437

…to feature/css-in-js

[CSS-in-JS] Starting simple usage docs (#4558)

984cd48

Merge branch 'master' into feature/css-in-js

1b2f77b

thompsongl mentioned this pull request Mar 4, 2021

[Meta] CSS-in-JS + theming rollout plan #4529

Closed

10 tasks

thompsongl and others added 2 commits March 11, 2021 10:31

[CSS-in-JS] useEuiTheme & withEuiTheme refactor (#4594)

0e82dac

* convert useEuiTheme to return object; refactor withEuiTheme types * readme update * update docs * Quick update to the docs Co-authored-by: cchaos <caroline.horn@elastic.co>

Merge branch 'master' into feature/css-in-js

1a35553

[CSS-in-JS] Sizes with units (#4578)

64cfcd3

* convert numbers to strings with units * docs * fewer calc() * Updating consuming example to show `calc()` Co-authored-by: cchaos <caroline.horn@elastic.co>

thompsongl mentioned this pull request Mar 26, 2021

Add support for CSS-in-JS styling with emotion elastic/kibana#95557

Closed

thompsongl added 2 commits March 29, 2021 14:00

Merge branch 'master' into feature/css-in-js

113935e

Merge branch 'feature/css-in-js' of https://github.com/elastic/eui in…

af55700

…to feature/css-in-js

Merge branch 'master' into feature/css-in-js

15f4509

readme

6613900

cee-chen added 3 commits August 23, 2021 07:55

Merge branch 'master' into feature/css-in-js

f7905e7

Run yarn prettier with new rule

95dae99

Delete file missed in upstream merge

61ffefd

skip changelog page a11y check

fadbeb0

thompsongl mentioned this pull request Aug 24, 2021

[Docs] EuiThemeProvider global theme switching #5072

Closed

Merge branch 'master' into feature/css-in-js

bcf9135

cchaos commented Aug 25, 2021

View reviewed changes

scripts/a11y-testing.js Outdated Show resolved Hide resolved

cchaos added 2 commits August 25, 2021 11:45

[CL] Changed feature heading to h2 for now

e7ca7af

Remove CL from getting skipped by a11y tests

c07a7c8

cchaos requested review from thompsongl, chandlerprall and cee-chen August 25, 2021 16:15

chandlerprall approved these changes Aug 25, 2021

View reviewed changes

thompsongl approved these changes Aug 26, 2021

View reviewed changes

Merge branch 'master' into feature/css-in-js

35396de

cchaos enabled auto-merge (squash) August 26, 2021 18:22

cchaos merged commit 7a130d5 into master Aug 26, 2021

thompsongl mentioned this pull request Sep 2, 2021

Upgrade EUI to v37.6.0 elastic/kibana#110998

Merged

pgayvallet mentioned this pull request Nov 17, 2021

[meta] Adapt all existing applications to use the new KibanaThemeProvider elastic/kibana#118866

Closed

mikecote mentioned this pull request Nov 17, 2021

[Alerting] Adapt all existing applications to use the new KibanaThemeProvider elastic/kibana#118880

Closed

thompsongl deleted the feature/css-in-js branch December 1, 2021 22:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] CSS-in-JS via `emotion`, initial release #4511

[FEATURE] CSS-in-JS via `emotion`, initial release #4511

cchaos commented Feb 10, 2021 •

edited by thompsongl

Loading

kibanamachine commented Feb 10, 2021

kibanamachine commented Feb 16, 2021

kibanamachine commented Feb 17, 2021

kibanamachine commented Feb 17, 2021

kibanamachine commented Mar 1, 2021

kibanamachine commented Mar 3, 2021

kibanamachine commented Mar 3, 2021

kibanamachine commented Mar 11, 2021

kibanamachine commented Mar 15, 2021

kibanamachine commented Mar 29, 2021

kibanamachine commented Aug 20, 2021

kibanamachine commented Aug 23, 2021

kibanamachine commented Aug 23, 2021

kibanamachine commented Aug 25, 2021

kibanamachine commented Aug 25, 2021

chandlerprall left a comment

thompsongl left a comment

cee-chen commented Aug 26, 2021

kibanamachine commented Aug 26, 2021

[FEATURE] CSS-in-JS via emotion, initial release #4511

[FEATURE] CSS-in-JS via emotion, initial release #4511

Conversation

cchaos commented Feb 10, 2021 • edited by thompsongl Loading

Components

The themes (#4643)

Docs

Checklist

kibanamachine commented Feb 10, 2021

kibanamachine commented Feb 16, 2021

kibanamachine commented Feb 17, 2021

kibanamachine commented Feb 17, 2021

kibanamachine commented Mar 1, 2021

kibanamachine commented Mar 3, 2021

kibanamachine commented Mar 3, 2021

kibanamachine commented Mar 11, 2021

kibanamachine commented Mar 15, 2021

kibanamachine commented Mar 29, 2021

kibanamachine commented Aug 20, 2021

kibanamachine commented Aug 23, 2021

kibanamachine commented Aug 23, 2021

kibanamachine commented Aug 25, 2021

kibanamachine commented Aug 25, 2021

chandlerprall left a comment

Choose a reason for hiding this comment

thompsongl left a comment

Choose a reason for hiding this comment

cee-chen commented Aug 26, 2021

kibanamachine commented Aug 26, 2021

[FEATURE] CSS-in-JS via `emotion`, initial release #4511

[FEATURE] CSS-in-JS via `emotion`, initial release #4511

cchaos commented Feb 10, 2021 •

edited by thompsongl

Loading