[EuiThemeProvider] Allow nested modify.breakpoint overrides#7862
Merged
cee-chen merged 5 commits intoelastic:mainfrom Jul 1, 2024
Merged
[EuiThemeProvider] Allow nested modify.breakpoint overrides#7862cee-chen merged 5 commits intoelastic:mainfrom
modify.breakpoint overrides#7862cee-chen merged 5 commits intoelastic:mainfrom
Conversation
- instead of `EuiProvider.modify.breakpoint`
…Provider` if `modify.breakpoint` has been passed
dbaeb48 to
71cc628
Compare
mgadewoll
approved these changes
Jun 28, 2024
Contributor
mgadewoll
left a comment
There was a problem hiding this comment.
🚢 🐈⬛ The changes work as expected! LGTM 👍
…ThemeProvider`
- in the previous logic, 2 resize listeners would instantiate for a top-level `<EuiProvider modify={{ breakpoint }} />` - this logic is simpler
+ rewrite tests for this PR to be their own describe block
|
Preview staging links for this PR:
|
Collaborator
💚 Build Succeeded
History
|
tkajtoch
added a commit
to elastic/kibana
that referenced
this pull request
Jul 13, 2024
`v95.2.0`⏩`v95.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.3.0`](https://github.com/elastic/eui/releases/v95.3.0) - Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level) ([#7862](elastic/eui#7862)) **Bug fixes** - Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties ([#7855](elastic/eui#7855)) **CSS-in-JS conversions** - Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth` ([#7845](elastic/eui#7845)) - Converted `EuiColorPickerSwatch` to Emotion ([#7853](elastic/eui#7853)) - Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion ([#7854](elastic/eui#7854)) - Removed `$euiColorPaletteDisplaySizes` - Removed `@mixin euiColorPaletteInnerBorder` - Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`, `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize` ([#7859](elastic/eui#7859)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFilePicker` remove file button ([#7860](elastic/eui#7860)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
cee-chen
pushed a commit
to cee-chen/kibana
that referenced
this pull request
Sep 12, 2024
`v95.2.0`⏩`v95.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- - Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level) ([elastic#7862](elastic/eui#7862)) **Bug fixes** - Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties ([elastic#7855](elastic/eui#7855)) **CSS-in-JS conversions** - Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth` ([elastic#7845](elastic/eui#7845)) - Converted `EuiColorPickerSwatch` to Emotion ([elastic#7853](elastic/eui#7853)) - Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion ([elastic#7854](elastic/eui#7854)) - Removed `$euiColorPaletteDisplaySizes` - Removed `@mixin euiColorPaletteInnerBorder` - Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`, `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize` ([elastic#7859](elastic/eui#7859)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFilePicker` remove file button ([elastic#7860](elastic/eui#7860)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
closes #7829
I originally started this work hoping it would be a quick fix/workaround solution to the broken docs example, but I quickly realized that
EuiThemeProviderneeded to be updated to handlemodify={{ breakpoint }}overrides because it was currently not doing anything with that configuration.We've also recently seen some dialogue in Slack with Fleet about needing to set custom breakpoints for certain screens/views/flyouts as opposed to entire plugins, so this work would strongly facilitate the ability to do that (currently difficult or not possible).
Note
Not addressed in this PR:
"I would still consider adding guidelines to flyout in our design system. it's important so when designers use 1200 version, they know what design principles to follow"
"[...] We document how to customize our breakpoints but not when to or when not to"
QA
xxlbreakpoint is shown in both the example and in the table:General checklist
- [ ] Checked in both light and dark modes- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Props have proper autodocs (using@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examplesand cypress tests- [ ] Updated visual regression tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)