fix(condensed-grid): moved vertical spacing to col #4577
Conversation
ghost
requested review from
|
Deploy preview for the-carbon-components ready! Built with commit 8a0c0a1 https://deploy-preview-4577--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 8a0c0a1 |
|
Deploy preview for carbon-components-react ready! Built with commit 8a0c0a1 https://deploy-preview-4577--carbon-components-react.netlify.com |
| margin-top: $condensed-gutter; | ||
| .#{$prefix}--grid--condensed [class*='#{$prefix}--col-'] { | ||
| padding-top: $condensed-gutter / 2; | ||
| padding-bottom: $condensed-gutter / 2; |
There was a problem hiding this comment.
If the row doesn't wrap, won't the padding bottom be half the size now?
Also will the first row effectively have a padding-top now that the first set of columns has a padding top?
There was a problem hiding this comment.
I think this is what I ended up running into as well when trying to implement earlier 😞
There was a problem hiding this comment.
If the row doesn't wrap, won't the padding bottom be half the size now?
@vpicone half the size of what? Going this route the top row will have 1px on top, and the last row (whether it wraps or not) will have 1px on the bottom. It evenly distributes it minimizing/equalizing any lopsidedness. Part of my thinking around this is that the left and right of the grid is offset 1px already due to the same method being used on horizontal spacing, so this would put an even 1px transparent border around the whole grid whether it wraps, or not, or whether it has one column or hundreds.
- Another way to look at it is do padding/margin bottom
2px, and top0. This looks more inlined with what y'all were doing with the rows, although it looks like y'all were trying to remove the spacing on the last row (for good reason). This method would have2pxon the bottom whether it wraps or not.
.#{$prefix}--grid--condensed [class*='#{$prefix}--col-'] {
padding-bottom: $condensed-gutter;
}- A third option could to add margin top
2px, and margin bottom2px. The margins should collapse and distribute the spacing evenly throughout the board, but now you have2pxon top and bottom of the row/grid whether it wraps or not.
.#{$prefix}--grid--condensed [class*='#{$prefix}--col-'] {
margin-top: $condensed-gutter;
margin-bottom: $condensed-gutter;
}I thought maybe we could do some cool stuff with the nth-child, but that might get a little whacky when users start mixing column sizes in a grid layout.
I'm open to other possible solutions. @joshblack I figured you were dealing with some of the same questions when ya'll first implement it. Just trying to open up the discussion here, and see if we can find some sort of solution that works everyone. 😄
There was a problem hiding this comment.
We're going from 0px top to 1px and from 2px bottom to 1px right? Just making sure that was the intent Would like to see some more examples with wraps/no-wraps before and after
There was a problem hiding this comment.
Maybe the codesandbox I built in #4555 might help you see more examples, or maybe you're asking for more examples on top of that?
https://codesandbox.io/s/unruffled-raman-6rl7u?fontsize=14
Right now, the columns have no vertical spacing at all. The vertical spacing is put on bx--row. So wrapping they won't have any vertical spacing. bx--row will also remove the spacing if it's the last/only row in the condensed grid.
|
The code is fine to me, waiting for visual review to ensure that the UI is good with the new code. |
|
Hey @photodow! 👋 Going through slate PRs and closing them. Feel free to comment and we can 100% re-open it if you have a sec to respond to some of the comments above! |
Closes #4555
Changelog
Changed