Skip to content

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

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
Merged
merged 59 commits into from
Nov 30, 2021
Merged

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

merged 59 commits into from
Nov 30, 2021

Conversation

thompsongl
Copy link
Contributor

@thompsongl thompsongl commented Sep 1, 2021 •
edited
Loading

Summary

Base feature branch for enabling CSS-in-JS work in the src/ directory.

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
Copy link

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

1 similar comment
@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@thompsongl thompsongl added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Sep 1, 2021
@thompsongl thompsongl mentioned this pull request Sep 1, 2021
Open
24 tasks
@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

thompsongl and others added 3 commits October 6, 2021 16:38
@thompsongl
[CSS-in-JS] Global style reset with emotion (#5122)
3b60df7 
* 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]>
@thompsongl
Merge branch 'master' into css-in-js/breaking
8c1ec07
@thompsongl
Merge branch 'css-in-js/breaking' of https://github.com/elastic/eui i…
ae19633 
…nto css-in-js/breaking
@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@thompsongl
Copy link
Contributor Author

jenkins test this

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

breehall
breehall approved these changes Nov 22, 2021
View reviewed changes
Copy link
Contributor

@breehall breehall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good! Awesome work!

cchaos and others added 3 commits November 22, 2021 10:07
PR feedback:
0963b81 
- Removed blank mixins file
- Added `yarn add` block for dependencies
- Added props table to bottom of Provider docs page
@cchaos
Merge branch 'main' into css-in-js/breaking
f35c0e4
@thompsongl
move keydown inside useeffect
5439053
@kibanamachine
Copy link

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

cee-chen
cee-chen approved these changes Nov 22, 2021
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look great - seriously awesome work y'all!

@kibanamachine
Copy link

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

cchaos added 3 commits November 23, 2021 18:02
Merge remote-tracking branch 'origin/main' into css-in-js/breaking
a89a023 
# Conflicts:
#	cypress/support/index.js
#	scripts/cypress.js
#	src-docs/src/routes.js
#	src/themes/amsterdam/overrides/_code.scss
#	src/themes/amsterdam/overrides/_code_block.scss
#	src/themes/eui-amsterdam/overrides/_code_block.scss
Merge remote-tracking branch 'origin/main' into css-in-js/breaking
134d6d3 
# Conflicts:
#	CHANGELOG.md
#	src-docs/src/views/guidelines/_get_sass_vars.js
#	src-docs/src/views/guidelines/sass.js
Reusing correct Sass customization snippet under Customizing
895c86a
@cchaos
Copy link
Contributor

cchaos commented Nov 23, 2021

@thompsongl I've fixed merge conflicts from my Colors docs PR, wasn't actually too bad.

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@thompsongl
Copy link
Contributor Author

thompsongl commented Nov 24, 2021 •
edited
Loading

Good news! It looks like the way elastic/kibana#117368 was implemented we don't need a static CSS reset stylesheet as a fallback. For plugins that have not yet made use of KibanaThemeProvider, the global styles (from EuiProvider) are still available even though the plugin is "disconnected" from the global theme. Similarly, if a "disconnected" plugin attempts to use useEuiTheme, it will just return default values (even if different from the global theme) and not error.

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@thompsongl thompsongl merged commit c88dd35 into main Nov 30, 2021
@thompsongl thompsongl mentioned this pull request Dec 9, 2021
Merged
1 task
@thompsongl thompsongl deleted the css-in-js/breaking branch February 17, 2022 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
6 more reviewers

@chandlerprall chandlerprall chandlerprall left review comments

@cchaos cchaos cchaos approved these changes

@cee-chen cee-chen cee-chen approved these changes

@1Copenut 1Copenut 1Copenut approved these changes

@elizabetdev elizabetdev elizabetdev approved these changes

@breehall breehall breehall approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
breaking change PRs with breaking changes. (Don't delete - used for automation)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
8 participants
@thompsongl @kibanamachine @1Copenut @cee-chen @cchaos @chandlerprall @elizabetdev @breehall