-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make color variations fit in a bit better visually #61617
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: -723 B (-0.04%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's try this.
Serendipitously I was working on a mockup that explores this exact same treatment, so +1 from me! We could even get away with 24px height in cases where there are many palettes, but 32 seems fine for now. |
I appreciate this issue, and it was something I was planning on addressing. Given that Powder has 22 style variations. And this is only half of them being shown: |
Looks solid enough to me. I appreciate the quick iteration. I can replicate the same bug Riad mentioned as well. |
I fixed the scrollbars in a5344f1. |
Flaky tests detected in 06b7951. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9190137336
|
Looks solid to me. The only UX note is that I found it confusing that the color presets were a layer deeper than the typography presets. I could see someone not knowing that they need to click the palette to find the presets: testing.variations.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
* Use smaller placement * remove border radius * fix scrollbars * add the border-radius to the previews --------- Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: bgardner <bgardner@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
* Use smaller placement * remove border radius * fix scrollbars * add the border-radius to the previews --------- Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: bgardner <bgardner@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
What?
Reduces the height to 32px and uses the ui border radius. Closes #61759.
How?
Testing Instructions
Screenshots or screencast