diff --git a/.changeset/nervous-toys-kick.md b/.changeset/nervous-toys-kick.md new file mode 100644 index 0000000000..e5e0fda67e --- /dev/null +++ b/.changeset/nervous-toys-kick.md @@ -0,0 +1,5 @@ +--- +"@marigold/docs": patch +--- + +docs[DST-509]:Revise `` page diff --git a/docs/content/components/layout/stack/stack-horizontal.demo.tsx b/docs/content/components/layout/stack/stack-horizontal.demo.tsx index 59349a5639..2c2297a6c9 100644 --- a/docs/content/components/layout/stack/stack-horizontal.demo.tsx +++ b/docs/content/components/layout/stack/stack-horizontal.demo.tsx @@ -1,15 +1,30 @@ -import { Stack, Text } from '@marigold/components'; +import { Divider, Stack } from '@marigold/components'; +import { Rectangle } from '@/ui/Rectangle'; export default () => ( - <> - - Left + + + +
Left
+ + + + - Center + +
Center
+ + + + - Right + +
Right
+ + + - + ); diff --git a/docs/content/components/layout/stack/stack-nested.demo.tsx b/docs/content/components/layout/stack/stack-nested.demo.tsx index b5f882b87c..837e5ef183 100644 --- a/docs/content/components/layout/stack/stack-nested.demo.tsx +++ b/docs/content/components/layout/stack/stack-nested.demo.tsx @@ -1,20 +1,29 @@ -import { Headline, Stack, Text } from '@marigold/components'; +import { Inline, Split, Stack } from '@marigold/components'; +import { Rectangle } from '@/ui/Rectangle'; export default () => ( - - - Stack Content #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. - - - - Stack Content #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. - - + +
+ + + + + + + + + + + + + + + + + + +
+ + ); diff --git a/docs/content/components/layout/stack/stack-spacing.demo.tsx b/docs/content/components/layout/stack/stack-spacing.demo.tsx index e6f1951671..e08d3e91c2 100644 --- a/docs/content/components/layout/stack/stack-spacing.demo.tsx +++ b/docs/content/components/layout/stack/stack-spacing.demo.tsx @@ -1,19 +1,10 @@ -import { Headline, Stack, Text } from '@marigold/components'; +import { Stack } from '@marigold/components'; +import { Rectangle } from '@/ui/Rectangle'; export default () => ( - Header - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada, - massa nec ultricies efficitur, lectus ante consequat magna, a porttitor - massa ex ut quam. - - - Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. - Vestibulum malesuada ante eu velit malesuada, nec ultricies sapien - finibus. Aenean rutrum in sem a ullamcorper. Integer ut euismod urna. - Interdum et malesuada fames ac ante ipsum primis in faucibus. - + + + ); diff --git a/docs/content/components/layout/stack/stack-vertical.demo.tsx b/docs/content/components/layout/stack/stack-vertical.demo.tsx index 4e7dcc7a96..9d69eaf7af 100644 --- a/docs/content/components/layout/stack/stack-vertical.demo.tsx +++ b/docs/content/components/layout/stack/stack-vertical.demo.tsx @@ -1,11 +1,36 @@ -import { Stack, Text } from '@marigold/components'; +import { Divider, Stack } from '@marigold/components'; +import { Rectangle } from '@/ui/Rectangle'; export default () => ( -
- - Lirum - Larum - Löffelstiel! - -
+ <> +
+ + +
Top
+ + + + +
+ +
+ + +
Center
+ + + + +
+ +
+ + +
Bottom
+ + + + +
+ ); diff --git a/docs/content/components/layout/stack/stack.mdx b/docs/content/components/layout/stack/stack.mdx index 7e78bccf86..ea1fd17618 100644 --- a/docs/content/components/layout/stack/stack.mdx +++ b/docs/content/components/layout/stack/stack.mdx @@ -1,46 +1,103 @@ --- title: Stack -caption: Component to stack elements. +caption: Display children vertically with giving space between. +badge: updated --- -The `` component is a layout component that is there to stack its children. It has a flexbox context similar like the [``](/components/inline/). +The `` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). The stack is basically a flexbox column that acts as a container that aligns its children vertically in new lines. The component should be used wherever you need to arrange elements stacked on top of each other. -The component should be used anywhere were elements are stacked one atop another. It is also possible to nest if needed. +Use the stack component in combination with other layout components to easily [create customized layouts](../../concepts/layouts). -`` uses the spaces from the given theme, but you can use [``](/components/split/) to add bigger spacing. You can also align the elements horizontal and vertical. +## Usage -## Import +The use of `` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../introduction/design-tokens#spacing). -```tsx -import { Stack } from '@marigold/components'; -``` +In this example you can see, the space prop ensures that each child is separated by the same space which maintains visual consistency. -## Props + - +### Different alignment -## Examples +Of course you can align the elements inside of the stack vertically and horizontally. This is useful if you need to place certain items at a certain position. For vertical alignment you need to set the `alignY` property and the `stretch` property to true. The `stretch` property stretches the stack to fill the space of the parent element. -### Spacing +With the vertical align you can align the children on `top`, `center` or `bottom`. -This example shows how to use the `space` property. You can see the large space between the elements. + - +For horizontal alignment of the children, the children need to have a defined width given so it can align inside the stack container. -### Nested +To align the children horizontal you have to use the `alignX` property. Options are `right`, `center` and `left`. -The `` component can also be nested in another ``. So you can build complex structures and constructs but without breaking layout. + - +### Nested stacks -### Horizontal Alignment +Sometimes you may need complexer layouts to arrange your elements, with the stack component you can also nest stacks within stacks. So you can build complex structures and constructs but without breaking the layout. -The example shows the `alignX` prop, which is used to align the children horizontal. Options are `right`, `center` and `left`. Default is set to `none`. +The following example shows how stacks can be nested within each other. You see how a stack will behave with a [inline](../layout/inline) and [split](../layout/split) component. - + + +## Props -### Vertical Alignment + -You can use the vertical alignment just with the `stretch` prop when its set to true. The `stretch` property stretches to fill the space of the element. With the vertical align you can align the children on `top`, `center` or `bottom`. Default is set to `none`. + - +## Alternative components + +
    +
  • + [Inline](../layout/inline): If you need to have the elements displayed in a + row you should use our inline component. +
    • +
+ +## Related + + + + + ), + }, + { + title: 'Split', + href: '../layout/split', + caption: 'Adds space between two elments in a flex layout.', + icon: ( + + + + ), + }, + ]} +/> diff --git a/packages/components/src/Breakout/Breakout.test.tsx b/packages/components/src/Breakout/Breakout.test.tsx index c05d3cc8a5..81fa77e2dc 100644 --- a/packages/components/src/Breakout/Breakout.test.tsx +++ b/packages/components/src/Breakout/Breakout.test.tsx @@ -54,13 +54,9 @@ test('supports height prop', () => { }); test('no align set', () => { - render( - - breakout - - ); + render(breakout); const breakout = screen.getByText(/breakout/); expect(breakout.className).toMatchInlineSnapshot( - `"col-start-[1_!important] col-end-[-1_!important] w-full flex h-[--height]"` + `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"` ); }); diff --git a/packages/components/src/Stack/Stack.tsx b/packages/components/src/Stack/Stack.tsx index a22365fb66..e93909802e 100755 --- a/packages/components/src/Stack/Stack.tsx +++ b/packages/components/src/Stack/Stack.tsx @@ -18,13 +18,11 @@ export interface StackProps extends GapSpaceProp { /** * Horizontal alignment for the children. - * @default none */ alignX?: keyof typeof alignment.vertical.alignmentX; /** * Vertical alignment for the children. - * @default none */ alignY?: keyof typeof alignment.vertical.alignmentY; } diff --git a/packages/system/src/style-props.tsx b/packages/system/src/style-props.tsx index b9ca2cf15c..3dd8a0c419 100644 --- a/packages/system/src/style-props.tsx +++ b/packages/system/src/style-props.tsx @@ -472,13 +472,11 @@ export const paddingBottom = { export const alignment = { vertical: { alignmentX: { - none: undefined, left: 'items-start', center: 'items-center', right: 'items-end', }, alignmentY: { - none: undefined, top: 'justify-start', center: 'justify-center', bottom: 'justify-end', @@ -486,13 +484,11 @@ export const alignment = { }, horizontal: { alignmentY: { - none: undefined, top: 'items-start', center: 'items-center', bottom: 'items-end', }, alignmentX: { - none: undefined, left: 'justify-start', center: 'justify-center', right: 'justify-end',