Repository: marigold-ui/marigold
Pull request #1926 (2022-03-28 13:55:56)

feat(comp): Container with grid
#1860 

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

Latest commit: 34a4a39d84f590407f85e2f83b0482023eced9fe

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/grid-Container?filename=.changeset/ten-waves-approve.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Afeat(comp)%3A%20Container%20with%20grid%0A)



Patch:
diff --git a/.changeset/ten-waves-approve.md b/.changeset/ten-waves-approve.md
new file mode 100644
index 000000000..6952f71ab
--- /dev/null
+++ b/.changeset/ten-waves-approve.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+feat(comp): Container with grid
diff --git a/docs/content/components/container.mdx b/docs/content/components/container.mdx
index d3b8dbce9..c887f167d 100644
--- a/docs/content/components/container.mdx
+++ b/docs/content/components/container.mdx
@@ -10,27 +10,35 @@ import { Box, Container, Text } from '@marigold/components';
 
 Containers width is based on used font and is optimized for readability. You can use `header`or `content`as content type and set the `maxWidth` to `small`, `medium` or `large`.
 
-## Usage
-
-```tsx onlyCode
-import { Container } from '@marigold/components';
-```
-
 <Box
   as={Container}
-  __baseCSS={{ border: '1px dashed gray', borderBottom: 'none' }}
+  border="1px solid #ced4da"
+  bg="#e9ecef"
+  height="100px"
   p="xsmall"
   contentType="header"
 >
   <Text as="h5" variant="headline5">
-    Medium sized container header
+    Container header
   </Text>
 </Box>
-<Box as={Container} border="1px dashed gray" p="xsmall" height="180px">
-  <Text>Medium sized container content</Text>
+<br />
+<Box
+  as={Container}
+  border="1px solid #ced4da"
+  bg="#e9ecef"
+  height="100px"
+  p="xsmall"
+>
+  <Text>Container content</Text>
 </Box>
+<br />
 
-## Properties (API)
+```tsx onlyCode
+import { Container } from '@marigold/components';
+```
+
+## Props
 
 | Property      | Type                   | Default   |
 | :------------ | :--------------------- | :-------- |
@@ -38,9 +46,9 @@ import { Container } from '@marigold/components';
 | `size`        | `small, medium, large` | `medium`  |
 | `align`       | `left, center, right`  | `left`    |
 
-## Variants
+## Examples
 
-### Small header
+Container header small, medium & large
 
 ```tsx
 <Container contentType="header" size="small">
@@ -50,8 +58,6 @@ import { Container } from '@marigold/components';
 </Container>
 ```
 
-### Medium header
-
 ```tsx
 <Container contentType="header">
   <Text as="h2" variant="headline2">
@@ -60,8 +66,6 @@ import { Container } from '@marigold/components';
 </Container>
 ```
 
-### Large header
-
 ```tsx
 <Container contentType="header" size="large">
   <Text as="h2" variant="headline2">
@@ -70,7 +74,7 @@ import { Container } from '@marigold/components';
 </Container>
 ```
 
-### Small content
+Container content small, medium & large
 
 ```tsx
 <Container size="small">
@@ -82,8 +86,6 @@ import { Container } from '@marigold/components';
 </Container>
 ```
 
-### Medium content
-
 ```tsx
 <Container>
   <Text>
@@ -94,8 +96,6 @@ import { Container } from '@marigold/components';
 </Container>
 ```
 
-### Large content
-
 ```tsx
 <Container size="large">
   <Text>
@@ -105,7 +105,7 @@ import { Container } from '@marigold/components';
 </Container>
 ```
 
-## Align content center
+## Text Container
 
 In some cases, the width of the content can be smaller than the container's width. You can use the align prop to align the content left, center or right.
 
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
index 25e60b737..962841040 100755
--- a/packages/components/src/Container/Container.tsx
+++ b/packages/components/src/Container/Container.tsx
@@ -24,10 +24,11 @@ export const Container: React.FC<ContainerProps> = ({
   ...props
 }) => (
   <Box
-    display="flex"
-    flexDirection="column"
+    display="grid"
     maxWidth={tokenSize[contentType][size]}
-    alignItems={ALIGNMENT[align]}
+    css={{
+      placeItems: ALIGNMENT[align],
+    }}
     {...props}
   >
     {children}


Test patch:
diff --git a/packages/components/src/Container/Container.test.tsx b/packages/components/src/Container/Container.test.tsx
index 72e3a4889..bd2eb6b11 100644
--- a/packages/components/src/Container/Container.test.tsx
+++ b/packages/components/src/Container/Container.test.tsx
@@ -71,7 +71,7 @@ test('supports default align left', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`alignItems: flex-start`);
+  expect(container).toHaveStyle(`placeItems: flex-start`);
 });
 
 test('supports align center', () => {
@@ -81,7 +81,7 @@ test('supports align center', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`alignItems: center`);
+  expect(container).toHaveStyle(`placeItems: center`);
 });
 
 test('supports align right', () => {
@@ -91,7 +91,7 @@ test('supports align right', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`alignItems: flex-end`);
+  expect(container).toHaveStyle(`placeItems: flex-end`);
 });
 
 test('renders correct HTML element', () => {