UI: Update Stack component to support only gap tokens #73852
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. |
| </Stack> | ||
| <DemoBox variant="lg" /> | ||
| <Stack gap={ 0 } direction="column"> | ||
| <Stack gap="2xs" direction="column"> |
There was a problem hiding this comment.
I wondered if we'd need some sort of "none" token, or explicitly allow a 0 value, but then I recalled that the default would be to have no gap when undefined, which is what we want (i.e. gap={ 0 } is the same as leaving out gap altogether). This is good affirmation of choosing zero spacing as the default gap behavior.
There was a problem hiding this comment.
Do you think we should include a story to at least demonstrate that zero gap is possible?
There was a problem hiding this comment.
I'll restore this to effectively on gap as an example (updated in 7628832).
I could maybe see a case that our "Default" story should actually reflect defaults and not specify the gap, but I feel like it's more practically useful to demonstrate the component with some gap. Open to revisiting.
aduth
added
[Type] Task
|
Flaky tests detected in c0cbc18. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20074683269
|
tyxla
left a comment
tyxla
left a comment
There was a problem hiding this comment.
That's a nice simplification 👍
Tests as promised ✅
#73852 (comment) Include a Storybook example that has no gap, and ensure that the component can be used without passing gap
* UI: Update Stack component to support only gap tokens * Remove gap from nested Stack story example WordPress/gutenberg#73852 (comment) Include a Storybook example that has no gap, and ensure that the component can be used without passing gap Co-authored-by: aduth <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jameskoster <[email protected]> Source: WordPress/gutenberg@15f6271
What?
Follow-up #73308 (comment)
Updates the
Stackcomponent in@wordpress/uito require givengaptokens to use one of the available design tokens, removing support for passing numeric multipliers of the base spacing unit, or any other valid flexboxgapvalue.Why?
Since this component is a foundational component of the design system, it should aim to build on design tokens that form the basis of expressing spacing in a systems-based manner.
This also proves to be a vast simplification of the component, which previously had to do some complex internal logic to juggle different forms of
gapvalues.Testing Instructions
Repeat Testing Instructions from #73308