Skip to content

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

Merged
thompsongl merged 59 commits intomainfrom
css-in-js/breaking
Nov 30, 2021
Merged

[CSS-in-JS] @emotion/react in src/#5121
thompsongl merged 59 commits intomainfrom
css-in-js/breaking

Conversation

@thompsongl
Copy link
Copy Markdown
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
Copy Markdown

kibanamachine commented Sep 1, 2021

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

1 similar comment
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 1, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 1, 2021

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

kibanamachine commented Sep 9, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 16, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 23, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 28, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 30, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 30, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Oct 1, 2021

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 <caroline.horn@elastic.co>
@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
Copy Markdown

kibanamachine commented Oct 6, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Nov 18, 2021

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

@thompsongl
Copy link
Copy Markdown
Contributor Author

thompsongl commented Nov 18, 2021

jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Nov 18, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Nov 18, 2021

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

kibanamachine commented Nov 22, 2021

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

kibanamachine commented Nov 23, 2021

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

kibanamachine commented Nov 23, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Nov 24, 2021

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

@thompsongl
Copy link
Copy Markdown
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
Copy Markdown

kibanamachine commented Nov 24, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Nov 30, 2021

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Nov 30, 2021

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