Update spacing in CircularOptionPicker #36014
Merged
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
ajlende
added
[Type] Code Quality
ajlende
commented
Oct 27, 2021
Comment on lines
23
to
24
| // @wordpress/components/src/circular-option-picker/style.scss | ||
| $swatch-size: 28px; |
There was a problem hiding this comment.
This could be removed if we're okay with the spacing not being justified as space-between. We can still keep the 6 columns, and I think it looks okay that way.
|
Size Change: -39 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
|
Very nice, lots of red, and gap is made for this use case.
Looks great. I do wonder if we could polish the duotone dropdown a bit more. It looks the same as before:
The padding in the box, the subheading, the margin above, the margin below the swatches is all a bit wide. It seems like there's some component stuff going on here with menu items and itemgroups doubling paddings. It shouldn't block this PR from landing, but worth looking into. But just adding space-between to the flex inside the duotone helps a lot: |
jasmussen
approved these changes
Oct 28, 2021
| margin-right: -$color-palette-circle-spacing; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: $color-palette-circle-spacing; |
There was a problem hiding this comment.
As noted, if you add justify-content: space-between; here, in my testing it appears to space things out more nicely.
There was a problem hiding this comment.
The problem with space-between is that when you have few swatches in your palette, the spacing for the swatches is too much.
I think it's best to leave it as-is here. And in #36018, since we know the number of columns, we can use display: grid and use space-between like is done for the gradient picker.
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.
Description
Tightens up the spacing beneath the swatches using modern CSS now that we don't have to support IE.
The gradient toolbar had special CSS written for it before to make it justified space-between. If that's not necessary anymore, I can remove even more CSS.
How has this been tested?
The CircularOptionPicker is used in the color, gradient, and duotone pickers. Make sure that wrapping looks good in the cases where there are more swatches than can fit in a line.
Screenshots
Before
After
Checklist:
*.native.jsfiles for terms that need renaming or removal).