[CSS-in-JS] Fix EUI media queries to more flexibly account for custom breakpoints #6431
Conversation
This file contains 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
- for better future-proofing for consumers who add custom (e.g.) `xxl`/`xxs` breakpoints
- set screen size to 2400 px to see bug
+ query organization - move smaller/mobile styles before larger desktop styles
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6431/ |
1Copenut
approved these changes
Nov 23, 2022
There was a problem hiding this comment.
👍 LGTM. One copy-edit change, but that doesn't need another look.
I started the local server and looked at changed components in widescreen, mobile preview (Chrome) and points in between. It's not a perfect proxy for visual regression testing, but seemed like the best way to evaluate the changeset.
miukimiu
approved these changes
Nov 23, 2022
There was a problem hiding this comment.
Thanks, @constancecchen for fixing this issue.
Tested locally following the QA indications in Chrome, Safari, Edge, and Firefox.
LGTM! 🎉
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6431/ |
- base padding is already set on the base CSS, so using min-width means we don't have 2 unnecessary overrides - use nesting instead of repeating :not:empty selectors - not even sure what is going on with that euiToastWidth math
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6431/ |
This was referenced Nov 23, 2022
cee-chen
pushed a commit
to elastic/kibana
that referenced
this pull request
Nov 23, 2022
## Summary `eui@67.1.9` ⏩ `eui@67.1.10` This backport fixes EuiFlyout bugs affecting Observability. It is meant to go directly into 8.6. ## [`67.1.10`](https://github.com/elastic/eui/tree/v67.1.10) - Added the `euiMaxBreakpoint` and `euiMinBreakpoint` CSS-in-JS utilities for creating min/max-width media queries ([#6431](elastic/eui#6431)) **Bug fixes** - Fixed missing slide-in animation on `EuiCollapsibleNav`s and left-side `EuiFlyout`s ([#6422](elastic/eui#6422)) - Fixed multiple component media queries for consumers with custom theme breakpoints ([#6431](elastic/eui#6431))
1Copenut
added a commit
to elastic/kibana
that referenced
this pull request
Dec 2, 2022
`eui@70.2.4` ⏩ `eui@70.4.0` - "Fixed EuiButtonGroup firing onChange twice" required changing some tests from `click` to `change` ___ ## [`70.4.0`](https://github.com/elastic/eui/tree/v70.4.0) - Updated `EuiTourStep.footerAction` type to accept `ReactNode[]` ([#6384](elastic/eui#6384)) - Vertically aligned all footer content so that `euiTourStepIndicator` is always centered ([#6384](elastic/eui#6384)) - Added `filterInCircle` glyph to `EuiIcon` ([#6385](elastic/eui#6385)) - Added `color` prop to `EuiBeacon` ([#6420](elastic/eui#6420)) - Added the `euiMaxBreakpoint` and `euiMinBreakpoint` CSS-in-JS utilities for creating min/max-width media queries ([#6431](elastic/eui#6431)) **Bug fixes** - Restores the previous match operator behaviour when the query value is split into multiple terms after analysis. ([#6409](elastic/eui#6409)) - Fixed missing slide-in animation on `EuiCollapsibleNav`s and left-side `EuiFlyout`s ([#6422](elastic/eui#6422)) - Fix bug in `EuiCard` where footer were not aligned to the bottom of the card ([#6424](elastic/eui#6424)) - Fixed multiple component media queries for consumers with custom theme breakpoints ([#6431](elastic/eui#6431)) ## [`70.3.0`](https://github.com/elastic/eui/tree/v70.3.0) - `EuiSearchBar` now automatically wraps special characters not used by query syntax in quotes ([#6356](elastic/eui#6356)) - Added `alignment` prop to `EuiBetaBadge` ([#6361](elastic/eui#6361)) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - Fixed `EuiPageTemplate` not correctly passing the `component` prop to the inner main content wrapper. ([#6352](elastic/eui#6352)) - `EuiSkipLink` now correctly calls `onClick` even when `fallbackDestination` is invalid ([#6355](elastic/eui#6355)) - Permanently fixed `EuiModal` to not cause scroll-jumping issues on modal open ([#6360](elastic/eui#6360)) - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) - Fixed bug in `EuiCard` where the inner content in vertical cards was not growing 100% in width ([#6377](elastic/eui#6377)) - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) **CSS-in-JS conversions** - Converted `EuiModal` to Emotion ([#6321](elastic/eui#6321)) **Fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) Co-authored-by: Constance Chen <constance.chen@elastic.co>
edmarmoretti
pushed a commit
to edmarmoretti/eui
that referenced
this pull request
May 3, 2023
… breakpoints (elastic#6431) * Create `euiMinBreakpoint` and `euiMaxBreakpoint` utilities - for better future-proofing for consumers who add custom (e.g.) `xxl`/`xxs` breakpoints * [Docs] Add docs example * Update simple components to use new min/max breakpoint util * [REVERT ME] Test observability app use case w/ flyouts - set screen size to 2400 px to see bug * [EuiFlyout] Fix responsive media queries to work with custom breakpoints + query organization - move smaller/mobile styles before larger desktop styles * changelog * wording is hard * Revert "[REVERT ME] Test observability app use case w/ flyouts" This reverts commit aff41f9. * Fix incorrect mobile margins on `responsiveColumn` `EuiDescriptionList`s * [EuiToastList] Clean up unnecessarily convoluted CSS - base padding is already set on the base CSS, so using min-width means we don't have 2 unnecessary overrides - use nesting instead of repeating :not:empty selectors - not even sure what is going on with that euiToastWidth math
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Consumers who have custom breakpoints above and below our
xsandxlbreakpoints currently will have buggy responsive behavior due to the way our breakpoint mixins are written. When we wroteeuiBreakpoint(['m', 'xl'])in our previous CSS, we actually wantedm and aboveand not justscreens m, l, and xl(which breaks when screen onxxl).To future-proof our current CSS against custom consumer breakpoints, I've added new
euiMinBreakpoint()andeuiMaxBreakpoint()utils to help us actually capture the "x and below" or "x and above" logic we usually want. These two new utilities treat breakpoint sizes as one-dimensional points rather than two-dimensional screen ranges, which should hopefully be easier to reason about.This fix must be backported to 8.6 in order for Observability Kibana to not have broken flyouts/media queries in 8.6.
I strongly recommend following along by commit.
Before
After
QA
To reproduce the broken behavior locally:
gh pr checkout 6431git checkout aff41f9d00017c8ece9a444a4c30fb78c7677457gh pr checkout 6431again to get back the fixComponent responsive smoke test checklist:
General checklist
- [ ] Checked in both light and dark modes- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Props have proper autodocs and playground toggles- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Updated the Figma library counterpart