layout: add stack component #96849
layout: add stack component #96849
Conversation
github-actions
bot
added
the
Scope: Frontend
|
|
||
| Stack provides a focused set of layout properties: `direction` (defaults to 'column'), `gap`, `justify`, and `align`. These properties influence the layout of its children while maintaining simplicity. | ||
|
|
||
| Like other layout components, `Stack` inherits all spacing props like `m`, `p`, `mt`, `mb`, `ml`, `mr`, `pt`, `pb`, `pl`, `pr` and implements responsive props so that the layout can be changed per breakpoint. |
There was a problem hiding this comment.
this seems to be older because we don’t really have those props anymore
| </Stack> | ||
| ``` | ||
|
|
||
| If a prop is not specified for a breakpoint, the value will **not** be inherited from the previous breakpoint. |
There was a problem hiding this comment.
I see we have this sentence in all layout components now, but is it really true? I thought if we do direction={{xs: 'column'', md: 'row'}}, the sm in between would be column, thus “inheriting” from xs ...
| /** | ||
| * Aligns flex items along the cross axis of the current line of flex items. | ||
| * Uses CSS align-items property. | ||
| */ | ||
| align?: Responsive<'start' | 'end' | 'center' | 'baseline' | 'stretch'>; | ||
| /** | ||
| * Sets the stack direction. | ||
| * @default 'column' | ||
| */ | ||
| direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>; | ||
| gap?: Responsive<SpacingSize | `${SpacingSize} ${SpacingSize}`>; | ||
| /** | ||
| * Aligns flex items along the block axis of the current line of flex items. | ||
| * Uses CSS justify-content property. | ||
| */ | ||
| justify?: Responsive< | ||
| 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'left' | 'right' | ||
| >; |
There was a problem hiding this comment.
should we Pick those from Flex to keep them in sync?
| border="primary" | ||
| radius="md" | ||
| padding="md" | ||
| justify="between" | ||
| background="primary" | ||
| width="80%" | ||
| gap="md" |
There was a problem hiding this comment.
those props don’t exist on Stack. We really need type-checking in mdx 😅
There was a problem hiding this comment.
AI went a bit too crazy, let me clean this up. I'm going to add the Divider implementation so we can compare this a bit more in depth
|
Closing in favor of #97052 |
I'm not entirely sure if this needs to exist, but Claude almost one shot the implementation, so I'm opening this for feedback.
The main benefit here is better semantics, and the possibility of adding a
<Stack.Divider/>, otherwise this is just a convenience over<Flex direction="column"/>With a
<Stack.Divider/>component, this would look something like this, and could be a good foundation for our tab and nav components to build on