Skip to content
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.

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

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

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

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/

@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
* 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>
@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/

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
- Removed blank mixins file
- Added `yarn add` block for dependencies
- Added props table to bottom of Provider docs page
@kibanamachine
Copy link

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

Copy link
Member

@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
# 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
# Conflicts:
#	CHANGELOG.md
#	src-docs/src/views/guidelines/_get_sass_vars.js
#	src-docs/src/views/guidelines/sass.js
@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

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 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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants