Stylebook: render overview colors in 4 columns #67597
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. |
matiasbenedetto
added
[Type] Enhancement
| if ( ! colors ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }> | ||
| <Grid columns={ columns } rowGap={ 8 } columnGap={ 16 }> | ||
| { colors.map( ( color: Color | Gradient ) => { |
There was a problem hiding this comment.
Do we always want it to show 4 cols, regardless of width? This is how it looks on small screens:
If we wanted to make it responsive, we could instead of columns use templateColumns with something like repeat(auto-fill, minmax(150px, 1fr))
It's not too bad as it is though so I don't feel strongly about it.
There was a problem hiding this comment.
It would be nice to fall back to 2 columns on mobile, 👍 👍
There was a problem hiding this comment.
👍 ok, thanks for the suggestion. I added that in the latest commits. It adds some complexity that I'm not sure it worth but it looks good.
There was a problem hiding this comment.
@tellthemachines left a good code suggestion for how this could wrap on mobile.
Separately, I've a question around why the column widths here are different:
But since that's probably largely irrelevant with #67546 landed, this one is good. Thank you!
| if ( ! colors ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }> | ||
| <Grid columns={ columns } rowGap={ 8 } columnGap={ 16 }> | ||
| { colors.map( ( color: Color | Gradient ) => { |
There was a problem hiding this comment.
It would be nice to fall back to 2 columns on mobile, 👍 👍
|
Flaky tests detected in 8c711c1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12206982841
|
* render overview colors in 4 columns * use templateColums instead of colums to enable responsive columns * use templateColumns instead of columns * tweak CSS Co-authored-by: matiasbenedetto <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: jasmussen <[email protected]>
What?
Stylebook: render overview colors in 4 columns
Why?
Closes: #67592
How?
Add a columns prop to ColorExamples component. Add specific styles for color grids with 4 colors per row.
Testing Instructions
Screenshots or screencast