[EuiFlexGroup] Responsive mode doesn't respect gutterSize #4140
Labels
Comments
cchaos
changed the title
snide
added
assign:designer
design decision
and removed
good first issue
assign:anyone
labels
|
Relabeled this one. It's trickier then it looks. The removal of gutter sizing is a design decision that forces some uniformity in the app when it goes down to mobile. It also generally requires the least amount of knowledge as a consumer (assuming they're building primarily towards their desktop views). I'll bring it up in one of our design meetings. |
|
Yeah this one has been on my radar for a while. The easiest fix is to continue to respect the gutterSize at all window sizes. The complicated but better fix is to allow a complete configuration of the responsive breakpoint and the changes to reflect when it is in responsive mode. That's why I initially re-labelled as a bug fix for anyone to address the easy fix. |
15 tasks
cee-chen
added a commit
to cee-chen/eui
that referenced
this issue
Sep 28, 2022
cee-chen
pushed a commit
that referenced
this issue
Sep 30, 2022
* Convert EuiFlexGroup to Emotion + convert gutter CSS to `gap` + remove className maps + clean up unnecessary `...rest` cast + convert nested EuiFlexItem to flattened styles within flex item styles - realistically, who's going to be using EuiFlexItem outside of EuiFlexGroup? * Convert EuiFlexItem responsive CSS and remove responsive styling for column directions - Due to switch to `gap`, no need for margin overrides anymore - the gap will be calculated automatically - Due to flatter Emotion classes, no need for !important anymore (which is probably extremely annoying to override) - see #5529 for column directions decision * Convert EuiFlexItem to Emotion + support grow={0} - separate out `grow` logic via JS to reduce CSS overrides - explicitly print grow-1 class if grow is a generic `true` + improve props table + remove `@ts-ignore` by switching type to ElementType + add missing `component` prop unit test * Update all downstream snapshots * Changelog * [EuiFlexGrid] Remove `columns={0}` as an option + improve props docs * [Docs] convert remaining .js examples to .tsx * [PR feedback][docs] Remove negative margin callout * changelog for #4140 bugfix * [PR feedback] Add responsive flex grid example + move responsive flex group example up above grid examples * [Docs] Misc code cleanup - combine src/components imports - remove unnecessary div wrappers * [Docs] Remove _flex.scss in favor of an Emotion wrapper * [Docs] move responsive flex grid example to better match flow of page * Fix playgrounds to accept custom Emotion CSS / fix flex playgrounds - I probably should not have tried to tackle removing doc example Sass in this PR, sorry Elizabet 🙈
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When configuring gutter size on EuiFlexGroup in responsive mode it is ignored for bottom margin.
The text was updated successfully, but these errors were encountered: