Skip to content

[useEuiTheme] Update colorMode return types#5639

Merged
thompsongl merged 5 commits intoelastic:mainfrom
thompsongl:css-in-js/colormode-type
Feb 15, 2022
Merged

[useEuiTheme] Update colorMode return types#5639
thompsongl merged 5 commits intoelastic:mainfrom
thompsongl:css-in-js/colormode-type

Conversation

@thompsongl
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl commented Feb 15, 2022

Summary

The accepted input and expected output values are (intentionally) different for colorMode values. inverse is an acceptable input value, but the output value accessible via useEuiTheme is the processed version of light or dark for consumer understanding.
The two types were incorrectly conflated and overly permissive. Now the consumer values will always be either light or dark, which will simplify creating component styles that take advantage of color mode switching.

Also note the change in EuiThemeColorMode that removes string as an option, instead adding the convenience lowercase versions of LIGHT, DARK, and INVERSE. We had left the door open for custom color modes, which flat out will not work with the light/dark concept foundational to EUI components. This is kind of a breaking change, but is more of bugfix in that attempting to use something like <EuiThemeProvider colorMode="custom" /> would break global styles.

All of this becomes more clear if reviewed alongside upcoming changes in #4575.

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link
Copy Markdown

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

@thompsongl thompsongl marked this pull request as ready for review February 15, 2022 19:16
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

Changes LGTM

This is kind of a breaking change, but is more of bugfix in that attempting to use something like <EuiThemeProvider colorMode="custom" /> would break global styles.

👍

@kibanamachine
Copy link
Copy Markdown

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

1 similar comment
@kibanamachine
Copy link
Copy Markdown

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

@thompsongl thompsongl enabled auto-merge (squash) February 15, 2022 21:17
@thompsongl thompsongl merged commit ff4d306 into elastic:main Feb 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants