Repository: marigold-ui/marigold
Pull request #2462 (2022-09-15 14:03:21)

fix: use 'initial' for default `Container` item alignment

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

Latest commit: d4793a45e750e0d71d6406a4b1a8ed25e780bcc5

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/fix-container?filename=.changeset/heavy-items-hang.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afix%3A%20use%20'initial'%20for%20default%20%60Container%60%20item%20alignment%0A)



Patch:
diff --git a/.changeset/heavy-items-hang.md b/.changeset/heavy-items-hang.md
new file mode 100644
index 000000000..689b50616
--- /dev/null
+++ b/.changeset/heavy-items-hang.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: use 'initial' for default `Container` item alignment
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
index 98bb39e30..f35822a33 100644
--- a/packages/components/src/Container/Container.stories.tsx
+++ b/packages/components/src/Container/Container.stories.tsx
@@ -61,29 +61,32 @@ export const Header: ComponentStory<typeof Container> = args => (
 );
 
 export const InnerContent: ComponentStory<typeof Container> = args => (
-  <Box as={Container} bg="blue10" p="small" {...args}>
-    <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
-    <Box pt="xsmall" width="100%">
-      <Text>
-        It is a dark time for the Rebellion. Although the Death Star has been
-        destroyed, Imperial troops have driven the Rebel forces from their
-        hidden base and pursued them across the galaxy. Evading the dreaded
-        Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
-        has established a new secret base on the remote ice world of Hoth. The
-        evil lord Darth Vader, obsessed with finding young Skywalker, has
-        dispatched thousands of remote probes into the far reaches of space....
-      </Text>
-    </Box>
-    <Box width="20ch">
-      <ul>
-        <li>Luke</li>
-        <li>Leia</li>
-        <li>Han Solo</li>
-        <li>Chewbacca</li>
-        <li>R2D2</li>
-        <li>C3PO</li>
-        <li>Darth Vader</li>
-      </ul>
-    </Box>
+  <Box bg="blue10" p="small">
+    <Container {...args}>
+      <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
+      <Box pt="xsmall" width="100%">
+        <Text>
+          It is a dark time for the Rebellion. Although the Death Star has been
+          destroyed, Imperial troops have driven the Rebel forces from their
+          hidden base and pursued them across the galaxy. Evading the dreaded
+          Imperial Starfleet, a group of freedom fighters led by Luke Skywalker
+          has established a new secret base on the remote ice world of Hoth. The
+          evil lord Darth Vader, obsessed with finding young Skywalker, has
+          dispatched thousands of remote probes into the far reaches of
+          space....
+        </Text>
+      </Box>
+      <Box width="20ch">
+        <ul>
+          <li>Luke</li>
+          <li>Leia</li>
+          <li>Han Solo</li>
+          <li>Chewbacca</li>
+          <li>R2D2</li>
+          <li>C3PO</li>
+          <li>Darth Vader</li>
+        </ul>
+      </Box>
+    </Container>
   </Box>
 );
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
index 66148b9e6..6421928a9 100755
--- a/packages/components/src/Container/Container.tsx
+++ b/packages/components/src/Container/Container.tsx
@@ -17,7 +17,7 @@ const ALIGN_ITEMS = {
   left: 'start',
   center: 'center',
   right: 'end',
-  none: 'undefined',
+  none: 'initial',
 };
 
 // for responsive reasons we needed to use the `minmax(0, 60ch)` value instead of `fit-content(60ch)`


Test patch:
diff --git a/packages/components/src/Container/Container.test.tsx b/packages/components/src/Container/Container.test.tsx
index d8479d31f..5dcd1ba4e 100644
--- a/packages/components/src/Container/Container.test.tsx
+++ b/packages/components/src/Container/Container.test.tsx
@@ -107,7 +107,7 @@ test('supports default align items none', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`placeItems: undefined`);
+  expect(container).toHaveStyle(`placeItems: initial`);
 });
 
 test('supports align items center', () => {