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: +485 B (+0.02%) Total Size: 3 MB
ℹ️ View Unchanged
|
Can you elaborate on "conventions" being followed here? It stood out to me how we now go up to 3xl (pretty big, lopsided) to achieve this, so we have The more I think about it though, the more I think it's fine actually 😄 I think it's a better fit for labels to values. |
I think it's generally fine. IMO the important thing is that we create a scale that we can modify in the future without creating too much inconvenience for consumers:
As far as we're generally confident about this (especially for the gap scale, which jumps from 16 to 24 to 40), I think we're ok |
|
I recognise I might be slightly too deep in the weeds on this, but my thinking is that there’s some UX value in having larger scales start at the same point. If, in the majority of cases, folks can safely assume “the smallest value is xs”, that reduces a bit of cognitive overhead and makes the system feel more predictable and learnable.
It's difficult to be 100% confident without a proper vision for the admin redesign 😭 For spacing to feel intentional I think it's important to have meaningful gaps in the steps toward the larger end of the gap scale, but it might be safer to include 32 as an option. |
|
Flaky tests detected in faa61fc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/21511538575
|
faa61fc to
7cc36bb
Compare
There was a problem hiding this comment.
Moved the changelog entries to the correct released and fixed spacing
* Consolidate dimension tokens * changelog * Update instances of old tokens * Begin scale at xs * Gap tokens * update stack instances, badge, box story * Remap gap tokens, fix Box * Introduce 32px gap * Use spaces for CHANGELOG indentation --------- Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
* Consolidate dimension tokens * changelog * Update instances of old tokens * Begin scale at xs * Gap tokens * update stack instances, badge, box story * Remap gap tokens, fix Box * Introduce 32px gap * Use spaces for CHANGELOG indentation --------- Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: aduth <aduth@git.wordpress.org>
Refactor padding and gap token scales
What
This PR refactors the dimension tokens in
@wordpress/theme:Removes the
surfacesegment from padding tokens — Token names no longer includesurface(e.g.,--wpds-dimension-padding-surface-sm→--wpds-dimension-padding-lg).Updates padding scale — Changed from
2xs–lgtoxs–3xl, with new intermediate values for a smoother progression. This will enable the use of padding tokens in components likeButtonwhich utilise12pxinline padding in@wordpress/components.Updates gap scale — Changed from
2xs–lgtoxs–3xl, with new intermediate values for a smoother progression.surface-2xsxssurface-xssmmdsurface-smlgxlsurface-md2xlsurface-lg3xl2xs–xltoxs–2xlfor consistency2xsxsxssmsmmdmdlglgxl2xlxl3xlWhy
surfacesegment from padding tokens reduces nesting, makes the token names more concise, and aligns padding with border tokens (see Consolidate border tokens #74617).xsinstead of2xsfollows common conventions and provides a clear and consistent "smallest" anchor.How
The token source definitions were updated in
dimension.json, with corresponding changes to the TypeScript types generator interrazzo.config.ts. Documentation was updated in the theme package's README, changelog, and the auto-generated tokens reference.CSS token usages were updated across the
@wordpress/uipackage, including the tooltip, badge, and form fieldset components, as well as shared CSS utilities.The
@wordpress/dataviewspackage required extensive updates, as many components use theStackcomponent withgapprops. All gap values were migrated to preserve their original pixel valuesStorybook fixtures and decorators were also updated to use the new token names.
Breaking Changes
This is a breaking change for consumers using the old token names. See the changelog for migration guidance.
Testing
npm run storybook@wordpress/ui.