From c2a1f1bf3fe660266740035a32edc408fe08a1c6 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 20 May 2025 22:18:40 +0100
Subject: [PATCH 1/2] Fix spacing props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../Container/Container.stories.tsx           | 54 ++++++++++--
 .../src/components/Container/Container.tsx    | 14 +++
 .../canon/src/components/Container/styles.css |  8 +-
 .../src/components/Flex/Flex.stories.tsx      | 16 ++--
 packages/canon/src/components/Flex/Flex.tsx   |  2 +
 .../src/components/Grid/Grid.stories.tsx      | 86 ++++++++-----------
 packages/canon/src/components/Grid/Grid.tsx   |  9 +-
 7 files changed, 113 insertions(+), 76 deletions(-)

diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index 5e434b7eb0..ca1165f44c 100644
--- a/packages/canon/src/components/Container/Container.stories.tsx
+++ b/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',
+  },
+};
diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index 46a5356d56..e670a61a21 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/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),
diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css
index 1ebf63987f..ae2bad2c29 100644
--- a/packages/canon/src/components/Container/styles.css
+++ b/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);
   }
 }
diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx
index bbb5e84692..91b8dc8fb6 100644
--- a/packages/canon/src/components/Flex/Flex.stories.tsx
+++ b/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 />
-      </>
-    ),
   },
 };
 
diff --git a/packages/canon/src/components/Flex/Flex.tsx b/packages/canon/src/components/Flex/Flex.tsx
index 7c84ed08f8..a53e0d28f4 100644
--- a/packages/canon/src/components/Flex/Flex.tsx
+++ b/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);
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 233d66bae7..2482afbaca 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/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>
   ),
 };
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index aedce886ed..7bb5486a2d 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/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,
+};

From 24b45efbfb88e5645447d642089edc3d125d1aaa Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 20 May 2025 22:22:50 +0100
Subject: [PATCH 2/2] Add changeset + api report

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/warm-taxes-show.md     | 5 +++++
 packages/canon/css/components.css | 8 ++++----
 packages/canon/css/container.css  | 8 ++++----
 packages/canon/css/styles.css     | 8 ++++----
 packages/canon/report.api.md      | 5 ++---
 5 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/warm-taxes-show.md

diff --git a/.changeset/warm-taxes-show.md b/.changeset/warm-taxes-show.md
new file mode 100644
index 0000000000..edebd0048e
--- /dev/null
+++ b/.changeset/warm-taxes-show.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using <Grid.Root /> instead of just <Grid />.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index f49148da7a..bce8e71a6c 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -195,20 +195,20 @@
 
 .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 .2s ease-in-out;
 }
 
 @media (width >= 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (width >= 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }
 
diff --git a/packages/canon/css/container.css b/packages/canon/css/container.css
index 4ba6b65dee..47744cce1e 100644
--- a/packages/canon/css/container.css
+++ b/packages/canon/css/container.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 .2s ease-in-out;
 }
 
 @media (width >= 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (width >= 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 2f24ff043a..3107c83908 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9419,20 +9419,20 @@
 
 .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 .2s ease-in-out;
 }
 
 @media (width >= 640px) {
   .canon-Container {
-    padding: 0 var(--canon-space-8);
+    padding-inline: var(--canon-space-8);
   }
 }
 
 @media (width >= 1024px) {
   .canon-Container {
-    padding: 0 var(--canon-space-12);
+    padding-inline: var(--canon-space-12);
   }
 }
 
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index f5f4042776..bc0ad71e90 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -453,9 +453,8 @@ export type GetPropDefTypes<P> = {
 };
 
 // @public (undocumented)
-export const Grid: ForwardRefExoticComponent<
-  GridProps & RefAttributes<HTMLDivElement>
-> & {
+export const Grid: {
+  Root: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
   Item: ForwardRefExoticComponent<
     GridItemProps & RefAttributes<HTMLDivElement>
   >;