Fix spacing props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Container/Container.stories.tsx

@@ -21,6 +21,9 @@ import { Container } from './Container';
 const meta = {
   title: 'Layout/Container',
   component: Container,
+  parameters: {
+    layout: 'fullscreen',
+  },
   argTypes: {
     children: {
       control: false,
@@ -48,14 +51,9 @@ const DecorativeBox = () => (
 );
 
 export const Default: Story = {
-  parameters: {
-    layout: 'fullscreen',
+  args: {
+    children: <DecorativeBox />,
   },
-  render: args => (
-    <Container {...args}>
-      <DecorativeBox />
-    </Container>
-  ),
 };
 
 export const Preview: Story = {
@@ -65,3 +63,45 @@ export const Preview: Story = {
     </div>
   ),
 };
+
+export const WithPaddingY: Story = {
+  args: {
+    ...Default.args,
+    py: '4',
+  },
+};
+
+export const WithPaddingTop: Story = {
+  args: {
+    ...Default.args,
+    pt: '4',
+  },
+};
+
+export const WithPaddingBottom: Story = {
+  args: {
+    ...Default.args,
+    pb: '4',
+  },
+};
+
+export const WithMarginY: Story = {
+  args: {
+    ...Default.args,
+    my: '4',
+  },
+};
+
+export const WithMarginTop: Story = {
+  args: {
+    ...Default.args,
+    mt: '4',
+  },
+};
+
+export const WithMarginBottom: Story = {
+  args: {
+    ...Default.args,
+    mb: '4',
+  },
+};

packages/canon/src/components/Container/Container.tsx

@@ -19,17 +19,31 @@ import { ContainerProps } from './types';
 import clsx from 'clsx';
 import { displayPropDefs } from '../../props/display.props';
 import { extractProps } from '../../utils/extractProps';
+import { spacingPropDefs } from '../../props/spacing.props';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
     const { children } = props;
 
+    // Create a subset of spacing props that match the interface
+    const containerSpacingProps = {
+      my: spacingPropDefs.my,
+      mt: spacingPropDefs.mt,
+      mb: spacingPropDefs.mb,
+      py: spacingPropDefs.py,
+      pt: spacingPropDefs.pt,
+      pb: spacingPropDefs.pb,
+    };
+
     const propDefs = {
       ...displayPropDefs,
+      ...containerSpacingProps,
     };
     const { className, style } = extractProps(props, propDefs);
 
+    console.log(className, style);
+
     return createElement('div', {
       ref,
       className: clsx('canon-Container', className),

packages/canon/src/components/Container/styles.css

@@ -1,18 +1,18 @@
 .canon-Container {
   max-width: 120rem;
-  padding: 0 var(--canon-space-4);
-  margin: 0 auto;
+  padding-inline: var(--canon-space-4);
+  margin-inline: auto;
   transition: padding 0.2s ease-in-out;
 }
 
 @media (min-width: 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (min-width: 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }

packages/canon/src/components/Flex/Flex.stories.tsx

@@ -62,7 +62,9 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+        <DecorativeBox />
+        <DecorativeBox />
+        <DecorativeBox />
       </>
     ),
   },
@@ -70,23 +72,15 @@ export const Default: Story = {
 
 export const ColumnDirection: Story = {
   args: {
+    ...Default.args,
     direction: 'column',
-    children: (
-      <>
-        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
-      </>
-    ),
   },
 };
 
 export const RowDirection: Story = {
   args: {
+    ...Default.args,
     direction: 'row',
-    children: (
-      <>
-        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
-      </>
-    ),
   },
 };
 

packages/canon/src/components/Flex/Flex.tsx

@@ -20,12 +20,14 @@ import clsx from 'clsx';
 import { flexPropDefs } from './Flex.props';
 import { extractProps } from '../../utils/extractProps';
 import { gapPropDefs } from '../../props/gap-props';
+import { spacingPropDefs } from '../../props/spacing.props';
 
 /** @public */
 export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   const propDefs = {
     ...gapPropDefs,
     ...flexPropDefs,
+    ...spacingPropDefs,
   };
 
   const { className, style } = extractProps(props, propDefs);

packages/canon/src/components/Grid/Grid.stories.tsx

@@ -22,18 +22,7 @@ import { Flex } from '../Flex';
 
 const meta = {
   title: 'Layout/Grid',
-  component: Grid,
-  argTypes: {
-    children: {
-      control: false,
-    },
-    className: {
-      control: 'text',
-    },
-  },
-  args: {
-    gap: '4',
-  },
+  component: Grid.Root,
 } satisfies Meta<typeof Grid>;
 
 export default meta;
@@ -53,27 +42,22 @@ const FakeBox = () => (
 );
 
 export const Default: Story = {
-  args: {},
-  render: args => (
-    <Grid {...args}>
-      <FakeBox />
-      <FakeBox />
-      <FakeBox />
-    </Grid>
-  ),
+  args: {
+    children: (
+      <>
+        <FakeBox />
+        <FakeBox />
+        <FakeBox />
+      </>
+    ),
+  },
 };
 
 export const LargeGap: Story = {
   args: {
+    ...Default.args,
     gap: '64px',
   },
-  render: args => (
-    <Grid {...args}>
-      <FakeBox />
-      <FakeBox />
-      <FakeBox />
-    </Grid>
-  ),
 };
 
 export const ColumnSizes: Story = {
@@ -81,16 +65,16 @@ export const ColumnSizes: Story = {
     columns: '12',
   },
   render: args => (
-    <Flex gap="4">
+    <Flex gap="4" direction="column">
       {Array.from({ length: 11 }, (_, i) => (
-        <Grid {...args} key={i}>
+        <Grid.Root {...args} key={i}>
           <Grid.Item colSpan={String(i + 1) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
           <Grid.Item colSpan={String(11 - i) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
-        </Grid>
+        </Grid.Root>
       ))}
     </Flex>
   ),
@@ -101,27 +85,25 @@ export const RowAndColumns: Story = {
     columns: '12',
   },
   render: args => (
-    <Flex gap="4">
-      <Grid {...args} columns="3">
-        <Grid.Item colSpan="1" rowSpan="2">
-          <Box
-            style={{
-              height: '100%',
-              background: '#eaf2fd',
-              borderRadius: '4px',
-              boxShadow: '0 0 0 1px #2563eb',
-              backgroundImage:
-                'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-            }}
-          />
-        </Grid.Item>
-        <Grid.Item colSpan="2">
-          <FakeBox />
-        </Grid.Item>
-        <Grid.Item colSpan="2">
-          <FakeBox />
-        </Grid.Item>
-      </Grid>
-    </Flex>
+    <Grid.Root {...args} columns="3">
+      <Grid.Item colSpan="1" rowSpan="2">
+        <Box
+          style={{
+            height: '100%',
+            background: '#eaf2fd',
+            borderRadius: '4px',
+            boxShadow: '0 0 0 1px #2563eb',
+            backgroundImage:
+              'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
+          }}
+        />
+      </Grid.Item>
+      <Grid.Item colSpan="2">
+        <FakeBox />
+      </Grid.Item>
+      <Grid.Item colSpan="2">
+        <FakeBox />
+      </Grid.Item>
+    </Grid.Root>
   ),
 };

packages/canon/src/components/Grid/Grid.tsx

@@ -20,11 +20,13 @@ import { extractProps } from '../../utils/extractProps';
 import { gridItemPropDefs, gridPropDefs } from './Grid.props';
 import clsx from 'clsx';
 import type { GridItemProps, GridProps } from './types';
+import { spacingPropDefs } from '../../props/spacing.props';
 
-const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const propDefs = {
     ...gapPropDefs,
     ...gridPropDefs,
+    ...spacingPropDefs,
   };
 
   const { className, style } = extractProps(props, propDefs);
@@ -53,4 +55,7 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
 });
 
 /** @public */
-export const Grid = Object.assign(GridBase, { Item: GridItem });
+export const Grid = {
+  Root: GridRoot,
+  Item: GridItem,
+};