[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy #5222

cchaos · 2021-09-28T23:49:37Z

Promotes Amsterdam theme as “default”

Most of the changes in this doc were from renaming the Sass files under src/themes to remove the eui prefix and rename the default to legacy.

src/themes/eui --> src/themes/legacy
src/themes/eui-amsterdam --> src/themes/amsterdam

It also adjusts the Sass pipeline from compiling the legacy theme as the default CSS to the amsterdam theme.
This is a breaking change as it changes what theme is now rendered when importing the CSS.

src/themes/legacy/legacy_[colorMode].scss --> eui_legacy_[colorMode].css
src/themes/amsterdam/theme_[colorMode].scss --> eui_theme_[colorMode].css

For a high level view of this pipeline change, see this Whimsical: https://whimsical.com/how-to-consume-eui-a-history-YSw3zLABW6rKZzWxMBeJyE@2Ux7TurymQ2CEaW5dZV4

I also moved any exported constants or utilities that are theme-specific like the theme keys to their respective src/themes/[theme] folder.

Docs

This changes the theme selector from saying "Amsterdam" to changing the old theme to say "Legacy" and adds an EuiTour (with dismissed state in local storage) to point this out to users.

TODO:

~~[ ] Update the Getting Started docs~~: I have this mostly done already but will apply it in another follow-up PR

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 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~~ Feature branch

Promotes Amsterdam theme as “default”

kibanamachine · 2021-09-29T00:12:34Z

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

cchaos

I've outlined the high level changes in the PR summary but I'll breakdown my changes in the following comments.

cchaos · 2021-09-29T18:28:10Z

src-docs/src/components/with_theme/theme_context.tsx

-          theme={
-            theme.includes('amsterdam') ? EuiThemeAmsterdam : EuiThemeDefault
-          }
+          theme={EUI_THEMES.find((t) => t.value === theme)?.provider}


I added a provider key to the EUI_THEME type that will be the actual themes like EuiThemeAmsterdam to be more scalable than a simple ternary.

cchaos · 2021-09-29T18:29:56Z

src-docs/src/views/guidelines/_get_sass_vars.js

    case 'dark':
-      palette = darkColors;
+      palette = { ...lightColors, ...darkColors, ...darkAmsterdamColors };


This also fixes the crashing of the Colors Guidelines page in master in dark mode.

cchaos · 2021-09-29T18:30:58Z

src/components/index.scss

+// Packages
+@import '../../packages/index';


Moved this from the basic manifest to this component list because it technically is one.

src/components/tour/_tour.scss

src/components/tour/tour_step.tsx

cchaos · 2021-09-29T18:33:28Z

src/services/index.ts

@@ -150,7 +150,6 @@ export {
  getOn,
  mergeDeep,
  setOn,
-  isDefaultTheme,


Moved this utility to src/themes/legacy because it is specific to that theme.

cchaos · 2021-09-29T18:33:54Z

src/services/theme/index.ts

-  DEFAULT_NAME_KEY,
-  AMSTERDAM_NAME_KEY,


Same with the naming keys.

kibanamachine · 2021-09-29T19:04:57Z

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

thompsongl · 2021-09-30T15:47:07Z

Looks like some duplicate changes in #5225. Do you want to remove them from this branch?

cchaos · 2021-09-30T16:11:05Z

I will when that merges. Right now, they cause TS errors.

…js/breaking-legacy # Conflicts: # src/components/tour/_tour.scss # src/components/tour/tour_step.tsx

kibanamachine · 2021-09-30T21:00:09Z

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

thompsongl

LGTM!
Let's get this in before the reset/global PR; I think any conflicts will be easier to resolve in that branch.

* emotion as peerDep; babel and typescript * jest config * isDefaultTheme util * CL TODO * update snapshots * [CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy (#5222) * [CSS-in-JS] Global style reset with `emotion` (#5122) * global reset with emotion * amsterdam overrides * text-size-adjust * ams reset * invert ::selection * Renamed `isDefaultTheme` utility to `isLegacyTheme` Default will mean something different when Amsterdam becomes default so I want to head this off now by checking for “Legacy” * Quick cleanup * Fixed up scrollbar function * Removed `useEuiFont` in favor of a single reset on the elements that need it * Added `body` key to global `font` for setting base body font settings at the global level * Some more fixes based on new diff * global reset with emotion * amsterdam overrides * text-size-adjust * ams reset * invert ::selection * Renamed `isDefaultTheme` utility to `isLegacyTheme` Default will mean something different when Amsterdam becomes default so I want to head this off now by checking for “Legacy” * Quick cleanup * Fixed up scrollbar function * Removed `useEuiFont` in favor of a single reset on the elements that need it * Added `body` key to global `font` for setting base body font settings at the global level * Some more fixes based on new diff * Pulling our reset from global styles * SVG `hacks` directly in reset file * Fixed reset import * euiprovider; reset styles * use euiprovider with emotion/cache in docs * Decision clean up * Fixing a few things for legacy dark mode based on not having a provider * Revert "Fixing a few things for legacy dark mode based on not having a provider" This reverts commit 127f12e. * Actually keeping `colorMode` even if `theme = null` * Fixing merge * Moved reset sass folder to `legacy` * fix wiki * euiprovider docs * fix provider docs * remove commented import Co-authored-by: cchaos <caroline.horn@elastic.co> * [CSS-in-JS] Add provider to generated codesandbox examples (#5253) * add provider to generated codesandbox examples * indentation * euithemeprovider -> euiprovider * legacy theme * fix snapshot tests * [CSS-in-JS] Provider for fullscreen examples; Context refactor (#5309) * refactor to extract context component * refactor for fewer updates on route changes * refactor AppView to function component * [CSS-in-JS] [Breaking] Better Getting Started page (#5299) * Moved all color Sass files to their respective theme folders - Duplicates variables, but makes it actually capable of customization - New files for code & vis colors that weren’t theme specific * Remove outdated theming wiki page * Cleanup (in MD files too) * fix heading level * update changelog page regex to fully remove the master section * manual merge * update release script changelog regex * Cleanup some docs * Hide LanguageSelector tour on Getting Started page * Some GS page cleanup * PR feedback * cl * Apply suggestions from code review Co-authored-by: Constance <constancecchen@users.noreply.github.com> * lint fix * make amsterdam default * provider updates * fix cypress styles * PR feedback: - Removed blank mixins file - Added `yarn add` block for dependencies - Added props table to bottom of Provider docs page * move keydown inside useeffect * Reusing correct Sass customization snippet under Customizing * fix cypress path * update export Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Constance <constancecchen@users.noreply.github.com>

Deprecating EUI theme to Legacy

8d4b372

Promotes Amsterdam theme as “default”

cchaos added 2 commits September 29, 2021 14:23

Fixing mixin links

0b8ce3f

Fixing types and adding test

c45ebcd

cchaos commented Sep 29, 2021

View reviewed changes

cchaos added the breaking change label Sep 29, 2021

cchaos marked this pull request as ready for review September 29, 2021 18:40

cchaos requested a review from thompsongl September 29, 2021 18:40

Merge remote-tracking branch 'origin/css-in-js/breaking' into css-in-…

78438f1

…js/breaking-legacy # Conflicts: # src/components/tour/_tour.scss # src/components/tour/tour_step.tsx

This was referenced Sep 30, 2021

[CSS-in-JS] @emotion/react in src/ #5121

Merged

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

Open

thompsongl approved these changes Oct 1, 2021

View reviewed changes

cchaos merged commit f00cacc into elastic:css-in-js/breaking Oct 1, 2021

cchaos deleted the css-in-js/breaking-legacy branch October 1, 2021 19:32

chandlerprall mentioned this pull request Apr 25, 2022

[EuiIcon] Early setState yields a console error #4783

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy #5222

[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy #5222

cchaos commented Sep 28, 2021 •

edited

Loading

kibanamachine commented Sep 29, 2021

cchaos left a comment

cchaos Sep 29, 2021

cchaos Sep 29, 2021

cchaos Sep 29, 2021

cchaos Sep 29, 2021

cchaos Sep 29, 2021

kibanamachine commented Sep 29, 2021

thompsongl commented Sep 30, 2021

cchaos commented Sep 30, 2021

kibanamachine commented Sep 30, 2021

thompsongl left a comment

[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy #5222

[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy #5222

Conversation

cchaos commented Sep 28, 2021 • edited Loading

Promotes Amsterdam theme as “default”

Docs

TODO:

Checklist

kibanamachine commented Sep 29, 2021

cchaos left a comment

Choose a reason for hiding this comment

cchaos Sep 29, 2021

Choose a reason for hiding this comment

cchaos Sep 29, 2021

Choose a reason for hiding this comment

cchaos Sep 29, 2021

Choose a reason for hiding this comment

cchaos Sep 29, 2021

Choose a reason for hiding this comment

cchaos Sep 29, 2021

Choose a reason for hiding this comment

kibanamachine commented Sep 29, 2021

thompsongl commented Sep 30, 2021

cchaos commented Sep 30, 2021

kibanamachine commented Sep 30, 2021

thompsongl left a comment

Choose a reason for hiding this comment

cchaos commented Sep 28, 2021 •

edited

Loading