fix: fix cell widths overridden by readjusted smaller breakpoints in XY Grid #10468 #11117
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.
Context
With margin gutters, a cell width is defined with its gutter. This is why we have to readjust all sizes and not only
.cell
when applying the new gutter in a bigger breakpoint. This must include all sizes for smaller breakpoints too. Before this commit there was an optimization that prevent gutters for smaller breakpoints without a new gutter defined to be regenerated. This can seems logical since no gutter was generated for this breakpoint so there is nothing to readjust.Bug
Because the gutter is defined with the width/height, the width/height of readjusted gutters (with a custom gutter) overrides the width/height of non-readjusted gutters (without a custom gutter) even if they are from a bigger breakpoint.
Changes:
There is no impact on the bundle
foundation.css
size because there is no breakpoint (outside of the last one) defined without a custom gutter. There can be a minimal impact on a user CSS size if ze uses a lot of custom breakpoints.Note: there a reason why grid system always used paddings for grid system: it does not impact the width. All troubles (and a lot of code duplication and specificity issues) we have with the XY Grid comes from that. And apart from redicing by 1 the number of nested HTML tags in a complex grid layout, I don't see a single advantage of margin gutters. @brettsmason @kball Do you have an opinion on this ?
Closes #10468