Fix Grid.Item

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

packages/canon/report.api.md

@@ -200,7 +200,11 @@ export type Gap = Space | Partial<Record<Breakpoint, Space>>;
 // @public (undocumented)
 export const Grid: ForwardRefExoticComponent<
   GridProps & RefAttributes<HTMLDivElement>
->;
+> & {
+  Item: ForwardRefExoticComponent<
+    GridItemProps & RefAttributes<HTMLDivElement>
+  >;
+};
 
 // @public (undocumented)
 export interface GridItemProps {

packages/canon/src/components/Grid/Docs.mdx

@@ -22,11 +22,11 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component is made of two parts: the grid container and the grid item. Import all parts and piece them together.
 </Text>
 <Source
-  code={`import { Grid, GridItem } from "@backstage/canon/grid";
+  code={`import { Grid } from "@backstage/canon/grid";
 
 export default () => (
   <Grid>
-    <GridItem />
+    <Grid.Item />
   </Grid>
 );`}
   language="tsx"
@@ -137,12 +137,12 @@ export default () => (
 
 <Source
   code={`<Grid columns={3} gap="md">
-  <GridItem colSpan={1}>
+  <Grid.Item colSpan={1}>
     <Box>Hello World</Box>
-  </GridItem>
-  <GridItem colSpan={2}>
+  </Grid.Item>
+  <Grid.Item colSpan={2}>
     <Box>Hello World</Box>
-  </GridItem>
+  </Grid.Item>
 </Grid>
 `}
   language="tsx"
@@ -160,13 +160,13 @@ export default () => (
   code={`<Grid columns={3} gap="md">
   <Grid.Item colSpan={1} rowSpan={2}>
     <Box>Hello World</Box>
-  </GridItem>
-  <GridItem colSpan={2}>
+  </Grid.Item>
+  <Grid.Item colSpan={2}>
     <Box>Hello World</Box>
-  </GridItem>
-  <GridItem colSpan={2}>
+  </Grid.Item>
+  <Grid.Item colSpan={2}>
     <Box>Hello World</Box>
-  </GridItem>
+  </Grid.Item>
 </Grid>
 `}
   language="tsx"
@@ -199,9 +199,9 @@ export default () => (
 </Text>
 <Source
   code={`<Grid columns={3} gap="md">
-  <GridItem start={2} end={4}>
+  <Grid.Item start={2} end={4}>
     <Box>Hello World</Box>
-  </GridItem>
+  </Grid.Item>
 </Grid>
 `}
   language="tsx"

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

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Grid, GridItem } from './Grid';
+import { Grid } from './Grid';
 import type { GridItemProps } from './types';
 import { Box } from '../Box/Box';
 import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
@@ -83,12 +83,12 @@ export const ColumnSizes: Story = {
     <Stack gap="md">
       {Array.from({ length: 11 }, (_, i) => (
         <Grid {...args} key={i}>
-          <GridItem colSpan={(i + 1) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={(i + 1) as GridItemProps['colSpan']}>
             <FakeBox />
-          </GridItem>
-          <GridItem colSpan={(11 - i) as GridItemProps['colSpan']}>
+          </Grid.Item>
+          <Grid.Item colSpan={(11 - i) as GridItemProps['colSpan']}>
             <FakeBox />
-          </GridItem>
+          </Grid.Item>
         </Grid>
       ))}
     </Stack>
@@ -103,18 +103,18 @@ export const RowAndColumns: Story = {
   render: args => (
     <Stack gap="md">
       <Grid {...args} columns={3}>
-        <GridItem colSpan={1} rowSpan={2}>
+        <Grid.Item colSpan={1} rowSpan={2}>
           <Box
             borderRadius="small"
             style={{ background: '#1f47ff', color: 'white', height: '100%' }}
           />
-        </GridItem>
-        <GridItem colSpan={2}>
+        </Grid.Item>
+        <Grid.Item colSpan={2}>
           <FakeBox />
-        </GridItem>
-        <GridItem colSpan={2}>
+        </Grid.Item>
+        <Grid.Item colSpan={2}>
           <FakeBox />
-        </GridItem>
+        </Grid.Item>
       </Grid>
     </Stack>
   ),

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

@@ -18,8 +18,7 @@ import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
 import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
 
-/** @public */
-export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
+const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
     children,
     columns,
@@ -50,30 +49,30 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   );
 });
 
+const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
+  const { children, rowSpan, colSpan, start, end, className, style } = props;
+
+  const sprinklesClassName = gridItemSprinkles({
+    rowSpan,
+    colSpan,
+    start,
+    end,
+  });
+
+  const classNames = ['grid-item', sprinklesClassName, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return createElement(
+    'div',
+    {
+      ref,
+      className: classNames,
+      style,
+    },
+    children,
+  );
+});
+
 /** @public */
-export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
-  (props, ref) => {
-    const { children, rowSpan, colSpan, start, end, className, style } = props;
-
-    const sprinklesClassName = gridItemSprinkles({
-      rowSpan,
-      colSpan,
-      start,
-      end,
-    });
-
-    const classNames = ['grid-item', sprinklesClassName, className]
-      .filter(Boolean)
-      .join(' ');
-
-    return createElement(
-      'div',
-      {
-        ref,
-        className: classNames,
-        style,
-      },
-      children,
-    );
-  },
-);
+export const Grid = Object.assign(GridBase, { Item: GridItem });