Repository: marigold-ui/marigold
Pull request #2415 (2022-09-09 09:08:08)

refa: Improve `<Container>` API and make it reponsive

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

Latest commit: 55de76cb878252cfab24cc7b7bf702e11f5b36d0

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/container-update?filename=.changeset/witty-lobsters-hug.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Arefa%3A%20Improve%20%60%3CContainer%3E%60%20API%20and%20make%20it%20reponsive%0A)



Patch:
diff --git a/.changeset/witty-lobsters-hug.md b/.changeset/witty-lobsters-hug.md
new file mode 100644
index 000000000..a51992fb8
--- /dev/null
+++ b/.changeset/witty-lobsters-hug.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+refa: Improve `<Container>` API and make it reponsive
diff --git a/docs/src/demos/components/Breakout/basic-breakout.demo.tsx b/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
index ae3242697..7b14e16a9 100644
--- a/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
@@ -1,7 +1,7 @@
 import { Container, Breakout, Box } from '@marigold/components';
 
 export const BasicBreakout = () => (
-  <Container alignContainer="center">
+  <Container alignItems="center">
     <Box border="1px solid #ced4da" bg="#e9ecef" height="80px" width="100%" />
     <Breakout>
       <Box
diff --git a/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx b/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx
index ded10f66c..ed227758c 100644
--- a/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/iframe-breakout.demo.tsx
@@ -1,7 +1,7 @@
 import { Aspect, Box, Breakout, Container, Text } from '@marigold/components';
 
 export const iframeBreakout = () => (
-  <Container alignContainer="center">
+  <Container alignItems="center">
     <Box as={Text} pb="medium">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry's standard dummy text ever since the
diff --git a/docs/src/demos/components/Breakout/text-breakout.demo.tsx b/docs/src/demos/components/Breakout/text-breakout.demo.tsx
index 67d8d1aa5..e149ecfe4 100644
--- a/docs/src/demos/components/Breakout/text-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/text-breakout.demo.tsx
@@ -1,7 +1,7 @@
 import { Container, Breakout, Box, Text } from '@marigold/components';
 
 export const TextBreakout = () => (
-  <Container alignContainer="center">
+  <Container alignItems="center">
     <Box as={Text} pb="medium">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry's standard dummy text ever since the
diff --git a/docs/src/demos/components/Container/basic-container.demo.tsx b/docs/src/demos/components/Container/basic-container.demo.tsx
index fe11023b6..3737d17a4 100644
--- a/docs/src/demos/components/Container/basic-container.demo.tsx
+++ b/docs/src/demos/components/Container/basic-container.demo.tsx
@@ -2,15 +2,10 @@ import { Box, Container, Headline, Text } from '@marigold/components';
 
 export const BasicContainer = () => (
   <Box border="1px solid #ced4da" bg="#e9ecef" p="xsmall">
-    <Box
-      as={Container}
-      contentType="header"
-      align="center"
-      alignContainer="center"
-    >
+    <Box as={Container} contentType="header" align="center" alignItems="center">
       <Headline level="2">Container header</Headline>
     </Box>
-    <Box as={Container} align="center" alignContainer="center">
+    <Box as={Container} align="center" alignItems="center">
       <Text>
         The container content is for example a long text to present information.
         In this case it is an unnecessary text that is only used to fill the
diff --git a/docs/src/demos/components/Container/full-container.demo.tsx b/docs/src/demos/components/Container/full-container.demo.tsx
index 7b0278d2f..517ae1974 100644
--- a/docs/src/demos/components/Container/full-container.demo.tsx
+++ b/docs/src/demos/components/Container/full-container.demo.tsx
@@ -1,13 +1,7 @@
 import { Box, Container, Headline, Text } from '@marigold/components';
 
 export const TextBlockContainer = () => (
-  <Box
-    as={Container}
-    bg="blue10"
-    align="center"
-    alignContainer="center"
-    p="small"
-  >
+  <Box as={Container} bg="blue10" align="center" alignItems="center" p="small">
     <Headline level="2">Star Wars - The Empire Strikes Back</Headline>
     <Box pt="xsmall" width="100%">
       <Text>
diff --git a/docs/src/demos/components/Container/large-content-container.demo.tsx b/docs/src/demos/components/Container/large-content-container.demo.tsx
index 8819d69dc..b3fbde0e5 100644
--- a/docs/src/demos/components/Container/large-content-container.demo.tsx
+++ b/docs/src/demos/components/Container/large-content-container.demo.tsx
@@ -1,7 +1,7 @@
 import { Container, Text } from '@marigold/components';
 
 export const LargeContentContainer = () => (
-  <Container size="medium" alignContainer="center">
+  <Container size="medium" align="center">
     <Text>
       The evil lord Darth Vader, obsessed with finding young Skywalker, has
       dispatched thousands of remote probes into the far reaches of space....
diff --git a/docs/src/demos/components/Container/small-content-container.demo.tsx b/docs/src/demos/components/Container/small-content-container.demo.tsx
index ea9796ddd..f320f1d21 100644
--- a/docs/src/demos/components/Container/small-content-container.demo.tsx
+++ b/docs/src/demos/components/Container/small-content-container.demo.tsx
@@ -1,7 +1,7 @@
 import { Container, Text } from '@marigold/components';
 
 export const SmallContentContainer = () => (
-  <Container size="small" alignContainer="center">
+  <Container size="small" align="center">
     <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
diff --git a/docs/src/pages/components/container.mdx b/docs/src/pages/components/container.mdx
index a4ca745b7..9847765b6 100644
--- a/docs/src/pages/components/container.mdx
+++ b/docs/src/pages/components/container.mdx
@@ -27,13 +27,13 @@ Containers width is based on used font and is optimized for readability. You can
     },
     {
       property: 'align',
-      description: '',
+      description: 'set alignment the content inside the container',
       type: '"left", "center", "right"',
       default: '"left"',
     },
     {
-      property: 'alignContainer',
-      description: '',
+      property: 'alignItems',
+      description: 'set alignment of the items inside the container',
       type: '"left", "center", "right"',
       default: '"left"',
     },
diff --git a/packages/components/src/Breakout/Breakout.stories.tsx b/packages/components/src/Breakout/Breakout.stories.tsx
index fbcfce17c..47d8253f4 100644
--- a/packages/components/src/Breakout/Breakout.stories.tsx
+++ b/packages/components/src/Breakout/Breakout.stories.tsx
@@ -40,7 +40,7 @@ export default {
 } as Meta;
 
 export const Basic: ComponentStory<typeof Breakout> = args => (
-  <Container size="large" alignContainer="center">
+  <Container size="large" align="center">
     <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" width="100%" />
     <Box
       as={Breakout}
@@ -56,7 +56,7 @@ export const Basic: ComponentStory<typeof Breakout> = args => (
 );
 
 export const ExampleText: ComponentStory<typeof Breakout> = args => (
-  <Container size="large" alignContainer="center">
+  <Container size="large" align="center">
     <Box as={Text} p="small">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry's standard dummy text ever since the
@@ -92,7 +92,7 @@ export const ExampleText: ComponentStory<typeof Breakout> = args => (
 );
 
 export const ExampleFrame: ComponentStory<typeof Breakout> = args => (
-  <Container alignContainer="center">
+  <Container align="center">
     <Box as={Text} pb="medium">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry's standard dummy text ever since the
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
index f48315dd9..060c536b5 100644
--- a/packages/components/src/Container/Container.stories.tsx
+++ b/packages/components/src/Container/Container.stories.tsx
@@ -15,11 +15,6 @@ export default {
       },
       options: ['content', 'header'],
       description: 'choose between content and header',
-      table: {
-        defaultValue: {
-          summary: 'content',
-        },
-      },
     },
     size: {
       control: {
@@ -27,35 +22,20 @@ export default {
       },
       options: ['small', 'medium', 'large'],
       description: 'choose between small, medium and large size',
-      table: {
-        defaultValue: {
-          summary: 'medium',
-        },
-      },
     },
     align: {
       control: {
         type: 'select',
       },
       options: ['left', 'center', 'right'],
-      description: 'choose between left, center and right items alignment',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
+      description: 'set alignment the content inside the container',
     },
-    alignContainer: {
+    alignItems: {
       control: {
         type: 'select',
       },
       options: ['left', 'center', 'right'],
-      description: 'choose between left, center and right container alignment',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
+      description: 'set alignment of the items inside the container',
     },
   },
 } as Meta;
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
index ac5fbb9c3..4087b6fb1 100755
--- a/packages/components/src/Container/Container.tsx
+++ b/packages/components/src/Container/Container.tsx
@@ -9,44 +9,48 @@ export interface ContainerProps extends ComponentProps<'div'> {
   contentType?: 'content' | 'header';
   size?: keyof typeof tokenSize.content | keyof typeof tokenSize.header;
   align?: 'left' | 'right' | 'center';
-  alignContainer?: 'left' | 'right' | 'center';
+  alignItems?: 'left' | 'right' | 'center';
 }
 
-const ALIGNMENT = {
-  left: 'flex-start',
+const ALIGN_ITEMS = {
+  left: 'start',
   center: 'center',
-  right: 'flex-end',
+  right: 'end',
+};
+
+const ALIGN = {
+  left: (maxWidth: string) => ({
+    gridTemplateColumns: `fit-content(${maxWidth}) 1fr 1fr`,
+    gridColumn: 1,
+  }),
+  center: (maxWidth: string) => ({
+    gridTemplateColumns: `1fr fit-content(${maxWidth}) 1fr`,
+    gridColumn: 2,
+  }),
+  right: (maxWidth: string) => ({
+    gridTemplateColumns: `1fr 1fr fit-content(${maxWidth})`,
+    gridColumn: 3,
+  }),
 };
 
 export const Container = ({
   contentType = 'content',
   size = 'medium',
   align = 'left',
-  alignContainer = 'left',
+  alignItems = 'left',
   children,
   ...props
 }: ContainerProps) => {
   const maxWidth = tokenSize[contentType][size];
 
-  let gridTemplateColumns = `${maxWidth} 1fr 1fr`;
-  let gridColumn = 1;
-  if (alignContainer === 'center') {
-    gridTemplateColumns = `1fr ${maxWidth} 1fr`;
-    gridColumn = 2;
-  }
-  if (alignContainer === 'right') {
-    gridTemplateColumns = `1fr 1fr ${maxWidth}`;
-    gridColumn = 3;
-  }
-
   return (
     <Box
       display="grid"
       css={{
-        gridTemplateColumns: gridTemplateColumns,
-        placeItems: ALIGNMENT[align],
+        gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
+        placeItems: ALIGN_ITEMS[alignItems],
         '> *': {
-          gridColumn: gridColumn,
+          gridColumn: ALIGN[align](maxWidth).gridColumn,
         },
       }}
       {...props}


Test patch:
diff --git a/packages/components/src/Container/Container.test.tsx b/packages/components/src/Container/Container.test.tsx
index a7541f465..df580ccfb 100644
--- a/packages/components/src/Container/Container.test.tsx
+++ b/packages/components/src/Container/Container.test.tsx
@@ -11,7 +11,9 @@ test('supports default contentType content', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 45ch 1fr 1fr`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(45ch) 1fr 1fr`
+  );
 });
 
 test('supports contentType header', () => {
@@ -21,7 +23,9 @@ test('supports contentType header', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 25ch 1fr 1fr`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(25ch) 1fr 1fr`
+  );
 });
 
 test('supports default size', () => {
@@ -31,7 +35,9 @@ test('supports default size', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 45ch 1fr 1fr`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(45ch) 1fr 1fr`
+  );
 });
 
 test('supports size small', () => {
@@ -41,7 +47,9 @@ test('supports size small', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 20ch 1fr 1fr`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(20ch) 1fr 1fr`
+  );
 });
 
 test('supports size large', () => {
@@ -51,7 +59,9 @@ test('supports size large', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 60ch 1fr 1fr`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(60ch) 1fr 1fr`
+  );
 });
 
 test('supports size and contentType', () => {
@@ -61,81 +71,79 @@ test('supports size and contentType', () => {
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 35ch 1fr 1fr`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(35ch) 1fr 1fr`
+  );
 });
 
-test('supports default align left', () => {
+test('supports default align container left', () => {
   render(
     <Container data-testid="container">
       <Text>sdf</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`placeItems: flex-start`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: fit-content(45ch) 1fr 1fr`
+  );
+  // eslint-disable-next-line testing-library/no-node-access
+  expect(container.firstChild).toHaveStyle(`gridColumn: 1`);
 });
 
-test('supports align center', () => {
+test('supports align container center', () => {
   render(
     <Container align="center" data-testid="container">
       <Text>sdf</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`placeItems: center`);
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: 1fr fit-content(45ch) 1fr`
+  );
+  // eslint-disable-next-line testing-library/no-node-access
+  expect(container.firstChild).toHaveStyle(`gridColumn: 2`);
 });
 
-test('supports align right', () => {
+test('supports align container right', () => {
   render(
     <Container align="right" data-testid="container">
       <Text>sdf</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`placeItems: flex-end`);
-});
-
-test('supports default alignContainer left', () => {
-  render(
-    <Container data-testid="container">
-      <Text>sdf</Text>
-    </Container>
+  expect(container).toHaveStyle(
+    `gridTemplateColumns: 1fr 1fr fit-content(45ch)`
   );
-  const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 45ch 1fr 1fr`);
   // eslint-disable-next-line testing-library/no-node-access
-  expect(container.firstChild).toHaveStyle(`gridColumn: 1`);
+  expect(container.firstChild).toHaveStyle(`gridColumn: 3`);
 });
 
-test('supports alignContainer center', () => {
+test('supports default align items left', () => {
   render(
-    <Container alignContainer="center" data-testid="container">
+    <Container data-testid="container">
       <Text>sdf</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 1fr 45ch 1fr`);
-  // eslint-disable-next-line testing-library/no-node-access
-  expect(container.firstChild).toHaveStyle(`gridColumn: 2`);
+  expect(container).toHaveStyle(`placeItems: start`);
 });
 
-test('supports alignContainer right', () => {
+test('supports align items center', () => {
   render(
-    <Container alignContainer="right" data-testid="container">
+    <Container alignItems="center" data-testid="container">
       <Text>sdf</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveStyle(`gridTemplateColumns: 1fr 1fr 45ch`);
-  // eslint-disable-next-line testing-library/no-node-access
-  expect(container.firstChild).toHaveStyle(`gridColumn: 3`);
+  expect(container).toHaveStyle(`placeItems: center`);
 });
 
-test('renders correct HTML element', () => {
+test('supports align items right', () => {
   render(
-    <Container data-testid="container">
+    <Container alignItems="right" data-testid="container">
       <Text>sdf</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
-  expect(container instanceof HTMLDivElement).toBeTruthy();
+  expect(container).toHaveStyle(`placeItems: end`);
 });