[CSS-in-JS] [Breaking] Better Getting Started page #5299

cchaos · 2021-10-20T21:08:13Z

Updated the Getting Started page with clearer instructions based on theme and best practices

And cleaned up some MD files to remove duplicate/outdated content

🔔 Breaking: Fixed customizability of each theme

The way we were originally handling theme colors was with a base set of color tokens in global_styling that used the Sass !default mechanism. Then in our subsequent themes we were overriding these tokens by declaring a new set before their import which did not have the !default. This actually made it impossible for consumer to customize on top of that. So the only truly customizable theme was the legacy light theme.

This fixes that by moving all color tokens (whether duplicative or not) to their respective themes/name/_colors_light.scss and themes/name/_colors_dark.scss files. I also then deleted the one that exists in global_styling and updated any docs around that import.

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 and cypress 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~~

- Duplicates variables, but makes it actually capable of customization - New files for code & vis colors that weren’t theme specific

…js/breaking_getting-started

kibanamachine · 2021-10-20T21:50:16Z

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

thompsongl · 2021-10-21T20:08:49Z

Just fixed the failing snapshot tests. Merge/rebase the css-in-js/breaking branch to update.

…js/breaking_getting-started

kibanamachine · 2021-10-21T22:01:08Z

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

cchaos · 2021-10-26T18:40:35Z

Jenkins, test this

kibanamachine · 2021-10-26T19:14:39Z

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

…js/breaking_getting-started

kibanamachine · 2021-10-27T18:09:20Z

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

cchaos · 2021-10-27T18:35:07Z

This PR continues to fail on Cypress in CI and I don't know how to fix it.

README.md

thompsongl · 2021-10-27T19:05:44Z

wiki/consuming.md

-@import '@elastic/eui/src/theme_light.scss';
-```
-
-### Fonts


Just trying to make sure I understand the overall intention with .md files vs. docs site pages, and the distinction being made with removals like this.

Is it that everything now in Getting Started shouldn't exist in a markdown file anymore? Are we tying to push people more towards the site for documentation?

Seems like we have mixed bag of documentation and consumers have to visit both the repo and the docs site for a full picture (this was the case before this PR, too 😄). Wondering if you have a broader strategy in mind.

Yeah so my broader strategy is that for purely consumer style docs (using in your own projects), all those instructions need to live on our docs site, not buried in .md files. So I'm trying now to focus those .md files purely on contributors to EUI. Eventually we'll want to import our entire wiki folder to be displayed on our docs site too.

Unless that is, the .md file goes into very technical issues like icon failings and such. Those I haven't found a good place for yet in our docs site, so just pointing consumers in the general direction of .md if they get stuck and this PR just creates some high-level intro-style instructions.

I was also removing mostly what has been duplicated in both places since we're not good at keeping 2 places up to date.

Makes sense to me; thanks for clarifying.

Eventually we'll want to import our entire wiki folder to be displayed on our docs site too.

Yes, I think that would solve a lot of confusion about where docs should go.

thompsongl · 2021-10-27T19:07:49Z

This PR continues to fail on Cypress in CI and I don't know how to fix it.

I think there's a fix on master that just hasn't made its way into the feature branch yet

thompsongl

LGTM with the additional README change

Co-authored-by: Greg Thompson <[email protected]>

kibanamachine · 2021-10-27T21:47:16Z

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

* 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 <[email protected]> * [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 <[email protected]> * 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 <[email protected]> Co-authored-by: cchaos <[email protected]> Co-authored-by: Constance <[email protected]>

cchaos added 5 commits October 20, 2021 15:37

Moved all color Sass files to their respective theme folders

204a6d5

- 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

29303fd

WIP commit of new Getting Started page

8196dac

Finished up GS docs

22669a8

Cleanup (in MD files too)

08485a3

cchaos added the breaking change label Oct 20, 2021

cchaos requested a review from thompsongl October 20, 2021 21:08

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

4fca2b5

…js/breaking_getting-started

thompsongl mentioned this pull request Oct 21, 2021

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

Merged

21 tasks

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

f543d03

…js/breaking_getting-started

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

7e06c96

…js/breaking_getting-started

thompsongl reviewed Oct 27, 2021

View reviewed changes

thompsongl approved these changes Oct 27, 2021

View reviewed changes

Update README.md

9c5b7fb

Co-authored-by: Greg Thompson <[email protected]>

cchaos merged commit 59e3245 into elastic:css-in-js/breaking Oct 28, 2021

cchaos deleted the css-in-js/breaking_getting-started branch November 2, 2021 22:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CSS-in-JS] [Breaking] Better Getting Started page #5299

[CSS-in-JS] [Breaking] Better Getting Started page #5299

cchaos commented Oct 20, 2021

kibanamachine commented Oct 20, 2021

thompsongl commented Oct 21, 2021

kibanamachine commented Oct 21, 2021

cchaos commented Oct 26, 2021

kibanamachine commented Oct 26, 2021

kibanamachine commented Oct 27, 2021

cchaos commented Oct 27, 2021

thompsongl Oct 27, 2021

cchaos Oct 27, 2021

cchaos Oct 27, 2021 •

edited

Loading

cchaos Oct 27, 2021

thompsongl Oct 27, 2021

thompsongl commented Oct 27, 2021

thompsongl left a comment

kibanamachine commented Oct 27, 2021

[CSS-in-JS] [Breaking] Better Getting Started page #5299

[CSS-in-JS] [Breaking] Better Getting Started page #5299

Conversation

cchaos commented Oct 20, 2021

Updated the Getting Started page with clearer instructions based on theme and best practices

🔔 Breaking: Fixed customizability of each theme

Checklist

kibanamachine commented Oct 20, 2021

thompsongl commented Oct 21, 2021

kibanamachine commented Oct 21, 2021

cchaos commented Oct 26, 2021

kibanamachine commented Oct 26, 2021

kibanamachine commented Oct 27, 2021

cchaos commented Oct 27, 2021

thompsongl Oct 27, 2021

Choose a reason for hiding this comment

cchaos Oct 27, 2021

Choose a reason for hiding this comment

cchaos Oct 27, 2021 • edited Loading

Choose a reason for hiding this comment

cchaos Oct 27, 2021

Choose a reason for hiding this comment

thompsongl Oct 27, 2021

Choose a reason for hiding this comment

thompsongl commented Oct 27, 2021

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 27, 2021

cchaos Oct 27, 2021 •

edited

Loading