Repository: marigold-ui/marigold
Pull request #1867 (2022-03-14 11:13:01)

feat(comp): improve Stack component with gap
#1860 

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 5e73e4deeeef78051fe64022f0b83510e1b3ccba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/improve-Stack?filename=.changeset/good-ladybugs-destroy.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afeat(comp)%3A%20improve%20Stack%20component%20with%20gap%0A)


sebald: @ti10le no API change, no changeset :P

Patch:
diff --git a/packages/components/src/Stack/Stack.stories.tsx b/packages/components/src/Stack/Stack.stories.tsx
index e62a02364..92bf1b27a 100644
--- a/packages/components/src/Stack/Stack.stories.tsx
+++ b/packages/components/src/Stack/Stack.stories.tsx
@@ -48,10 +48,55 @@ export const Basic: ComponentStory<typeof Stack> = args => (
       Heading
     </Text>
     <Text>
-      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.
+      Part 1: 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.
     </Text>
+    <Text>
+      Part 2: 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.
+    </Text>
+  </Stack>
+);
+
+export const Nested: ComponentStory<typeof Stack> = args => (
+  <Stack {...args}>
+    <Stack space="xsmall">
+      <Text as="h2" variant="headline2">
+        Heading
+      </Text>
+      <Text>
+        Part 1: 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.
+      </Text>
+      <Text>
+        Part 2: 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.
+      </Text>
+    </Stack>
+    <Stack space="xsmall">
+      <Text as="h2" variant="headline2">
+        Heading
+      </Text>
+      <Text>
+        Part 1: 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.
+      </Text>
+      <Text>
+        Part 2: 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.
+      </Text>
+    </Stack>
   </Stack>
 );
diff --git a/packages/components/src/Stack/Stack.tsx b/packages/components/src/Stack/Stack.tsx
index fcbd51771..18f53cc3b 100755
--- a/packages/components/src/Stack/Stack.tsx
+++ b/packages/components/src/Stack/Stack.tsx
@@ -1,7 +1,6 @@
-import React, { Children } from 'react';
+import React from 'react';
 import { ResponsiveStyleValue } from '@marigold/system';
 
-import { flattenChildren } from '../utils';
 import { Box } from '../Box';
 
 export interface StackProps {
@@ -23,16 +22,11 @@ export const Stack: React.FC<StackProps> = ({
 }) => (
   <Box
     {...props}
+    __baseCSS={{ gap: space }}
     display="flex"
     flexDirection="column"
     alignItems={ALIGNMENT[align]}
-    css={{ '> * + *': { pt: space } }}
   >
-    {Children.map(
-      flattenChildren(children) as unknown as React.ReactElement,
-      (child: React.ReactElement) => (
-        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
-      )
-    )}
+    {children}
   </Box>
 );
diff --git a/themes/create-theme/CHANGELOG.md b/themes/create-theme/CHANGELOG.md
new file mode 100644
index 000000000..c09092187
--- /dev/null
+++ b/themes/create-theme/CHANGELOG.md
@@ -0,0 +1,11 @@
+# @marigold/create-theme
+
+## 1.0.0
+
+### Patch Changes
+
+- [#1809](https://github.com/marigold-ui/marigold/pull/1809) [`539d4198`](https://github.com/marigold-ui/marigold/commit/539d41987118db125ee37a4a83231335ea15830a) Thanks [@sebald](https://github.com/sebald)! - feat(create-theme): Introduce helper package to create themes with sensible defaults
+
+- Updated dependencies [[`4cc0ad3b`](https://github.com/marigold-ui/marigold/commit/4cc0ad3b85b993e01b4d85b6f30b1a81cdee2351), [`d162a6a8`](https://github.com/marigold-ui/marigold/commit/d162a6a8d1f9d99bfc08d59f6dae294a6fa95310), [`539d4198`](https://github.com/marigold-ui/marigold/commit/539d41987118db125ee37a4a83231335ea15830a), [`e053b7b9`](https://github.com/marigold-ui/marigold/commit/e053b7b903f02c56cf10e6b9aecbedd29399895d), [`527ba94f`](https://github.com/marigold-ui/marigold/commit/527ba94fa1a3255dc6f846fcc9def978ec906bf3), [`b55e10bc`](https://github.com/marigold-ui/marigold/commit/b55e10bc7119554373d43f9d8872346c1e6d6c39), [`9a95a6f5`](https://github.com/marigold-ui/marigold/commit/9a95a6f541dec34e27eac8557186f929e811c07c), [`f62033b6`](https://github.com/marigold-ui/marigold/commit/f62033b642a623a75f311af701febc4b54f77120), [`21f72b34`](https://github.com/marigold-ui/marigold/commit/21f72b3499c7ed2f88a0b96315f0374140e98e85), [`25c8675e`](https://github.com/marigold-ui/marigold/commit/25c8675ed470cc71f8f968a83b9781b66412c493)]:
+  - @marigold/system@0.6.0
+  - @marigold/components@0.6.0


Test patch:
diff --git a/packages/components/src/ActionGroup/ActionGroup.test.tsx b/packages/components/src/ActionGroup/ActionGroup.test.tsx
index 9e93e09d7..575b71f44 100644
--- a/packages/components/src/ActionGroup/ActionGroup.test.tsx
+++ b/packages/components/src/ActionGroup/ActionGroup.test.tsx
@@ -11,9 +11,6 @@ const theme = {
   },
 };
 
-const getTopPadding = (element: HTMLElement) =>
-  getComputedStyle(element).getPropertyValue('padding-top');
-
 test('default space is "none"', () => {
   render(
     <ThemeProvider theme={theme}>
@@ -62,10 +59,6 @@ test('supports verticalAlignment prop', () => {
       </ActionGroup>
     </ThemeProvider>
   );
-
   const button1 = screen.getByText(/Button1/);
-  const button2 = screen.getByText(/Button2/);
-
-  expect(getTopPadding(button1.parentElement!)).toEqual('');
-  expect(button2.parentElement).toHaveStyle(`padding-top: 2px`);
+  expect(button1.parentElement).toHaveStyle(`gap: 2px`);
 });
diff --git a/packages/components/src/Stack/Stack.test.tsx b/packages/components/src/Stack/Stack.test.tsx
index db1c47ba4..31e1d8d21 100644
--- a/packages/components/src/Stack/Stack.test.tsx
+++ b/packages/components/src/Stack/Stack.test.tsx
@@ -16,26 +16,17 @@ const theme = {
   },
 };
 
-const getTopPadding = (element: HTMLElement) =>
-  getComputedStyle(element).getPropertyValue('padding-top');
-
 test('default space is "none"', () => {
   render(
     <ThemeProvider theme={theme}>
       <Stack>
         <Text>first</Text>
         <Text>second</Text>
-        <Text>third</Text>
       </Stack>
     </ThemeProvider>
   );
-  const first = screen.getByText(/first/).parentElement!;
-  const second = screen.getByText(/second/).parentElement!;
-  const third = screen.getByText(/third/).parentElement!;
-
-  expect(getTopPadding(first)).toEqual('');
-  expect(second).toHaveStyle(`padding-top: 0px`);
-  expect(third).toHaveStyle(`padding-top: 0px`);
+  const first = screen.getByText(/first/).parentElement;
+  expect(first).toHaveStyle(`gap: 0`);
 });
 
 test('accepts and uses spacing from theme', () => {
@@ -44,17 +35,11 @@ test('accepts and uses spacing from theme', () => {
       <Stack space="small">
         <Text>first</Text>
         <Text>second</Text>
-        <Text>third</Text>
       </Stack>
     </ThemeProvider>
   );
-  const first = screen.getByText(/first/);
-  const second = screen.getByText(/second/);
-  const third = screen.getByText(/third/);
-
-  expect(getTopPadding(first)).toEqual('');
-  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
-  expect(third.parentElement).toHaveStyle(`padding-top: 2px`);
+  const first = screen.getByText(/first/).parentElement;
+  expect(first).toHaveStyle(`gap: 2px`);
 });
 
 test('aligns children left by default', () => {
@@ -64,7 +49,6 @@ test('aligns children left by default', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-
   expect(stack).toHaveStyle(`align-items: flex-start`);
 });
 
@@ -75,7 +59,6 @@ test('allows to aligns children to the center', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-
   expect(stack).toHaveStyle(`align-items: center`);
 });
 
@@ -86,7 +69,6 @@ test('allows to aligns children to the right', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-
   expect(stack).toHaveStyle(`align-items: flex-end`);
 });
 
@@ -105,22 +87,15 @@ test('supports nesting', () => {
       </Stack>
     </ThemeProvider>
   );
-  const first = screen.getByText(/first/);
-  const second = screen.getByText(/second/);
-  const upperStack = screen.getByTestId('upperStack');
-
-  const third = screen.getByText(/third/);
-  const fourth = screen.getByText(/fourth/);
-  const lowerStack = screen.getByTestId('lowerStack');
-
-  expect(getTopPadding(upperStack.parentElement!)).toEqual('');
-  expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
-
-  expect(getTopPadding(first.parentElement!)).toEqual('');
-  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
-
-  expect(getTopPadding(third.parentElement!)).toEqual('');
-  expect(fourth.parentElement).toHaveStyle(`padding-top: 2px`);
+  const first = screen.getByText(/first/).parentElement;
+  const upperStack = screen.getByTestId('upperStack').parentElement;
+  expect(first).toHaveStyle(`gap: 2px`);
+  expect(upperStack).toHaveStyle(`gap: 8px`);
+
+  const third = screen.getByText(/third/).parentElement;
+  const lowerStack = screen.getByTestId('lowerStack').parentElement;
+  expect(third).toHaveStyle(`gap: 2px`);
+  expect(lowerStack).toHaveStyle(`gap: 8px`);
 });
 
 test('renders as div per default', () => {