Update spacing props display with collapsible groups

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

docs-ui/src/app/components/box/page.mdx

@@ -9,7 +9,6 @@ import {
   boxResponsiveSnippet,
 } from './snippets';
 import { Default, Surface, Responsive } from './components';
-import { spacingPropDefs } from '@/utils/propDefs';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { BoxDefinition } from '../../../utils/definitions';
@@ -31,12 +30,6 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PropsTable data={boxPropDefs} />
 
-Padding and margin are used to create space around your component using our
-predefined spacing tokens. We would recommend to use padding over margin to
-avoid collapsing margins but both are available.
-
-<PropsTable data={spacingPropDefs} />
-
 ## Examples
 
 ### Surface

docs-ui/src/app/components/box/props-definition.tsx

@@ -4,6 +4,7 @@ import {
   positionPropDefs,
   stylePropDefs,
   widthPropDefs,
+  spacingGroupAll,
   type PropDef,
 } from '@/utils/propDefs';
 import { Chip } from '@/components/Chip';
@@ -43,4 +44,5 @@ export const boxPropDefs: Record<string, PropDef> = {
   },
   ...classNamePropDefs,
   ...stylePropDefs,
+  spacing: spacingGroupAll,
 };

docs-ui/src/app/components/container/props-definition.ts

@@ -1,7 +1,7 @@
 import {
   classNamePropDefs,
   stylePropDefs,
-  spacingValues,
+  createSpacingGroup,
   type PropDef,
 } from '@/utils/propDefs';
 
@@ -11,42 +11,10 @@ export const containerPropDefs: Record<string, PropDef> = {
     values: ['ReactNode'],
     description: 'Content to render inside the container.',
   },
-  my: {
-    type: 'enum | string',
-    values: spacingValues,
-    responsive: true,
-    description: 'Vertical margin (top and bottom).',
-  },
-  mt: {
-    type: 'enum | string',
-    values: spacingValues,
-    responsive: true,
-    description: 'Top margin.',
-  },
-  mb: {
-    type: 'enum | string',
-    values: spacingValues,
-    responsive: true,
-    description: 'Bottom margin.',
-  },
-  py: {
-    type: 'enum | string',
-    values: spacingValues,
-    responsive: true,
-    description: 'Vertical padding (top and bottom).',
-  },
-  pt: {
-    type: 'enum | string',
-    values: spacingValues,
-    responsive: true,
-    description: 'Top padding.',
-  },
-  pb: {
-    type: 'enum | string',
-    values: spacingValues,
-    responsive: true,
-    description: 'Bottom padding.',
-  },
   ...classNamePropDefs,
   ...stylePropDefs,
+  spacing: createSpacingGroup(
+    ['my', 'mt', 'mb', 'py', 'pt', 'pb'],
+    'Vertical spacing properties for controlling margin and padding.',
+  ),
 };

docs-ui/src/app/components/flex/page.mdx

@@ -15,7 +15,6 @@ import {
   AlignExample,
   DirectionExample,
 } from './components';
-import { spacingPropDefs } from '@/utils/propDefs';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { FlexDefinition } from '../../../utils/definitions';
@@ -37,10 +36,6 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PropsTable data={flexPropDefs} />
 
-The Flex component also accepts all the spacing props from the Box component.
-
-<PropsTable data={spacingPropDefs} />
-
 ## Examples
 
 ### Direction

docs-ui/src/app/components/flex/props-definition.tsx

@@ -2,6 +2,7 @@ import {
   classNamePropDefs,
   stylePropDefs,
   gapPropDefs,
+  spacingGroupAll,
   type PropDef,
 } from '@/utils/propDefs';
 import { Chip } from '@/components/Chip';
@@ -61,4 +62,5 @@ export const flexPropDefs: Record<string, PropDef> = {
   },
   ...classNamePropDefs,
   ...stylePropDefs,
+  spacing: spacingGroupAll,
 };

docs-ui/src/app/components/grid/page.mdx

@@ -9,7 +9,6 @@ import {
   gridItemSnippet,
 } from './snippets';
 import { Default, ResponsiveExample, GridItemExample } from './components';
-import { spacingPropDefs } from '@/utils/propDefs';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { GridDefinition } from '../../../utils/definitions';
@@ -35,10 +34,6 @@ The grid container. Defines column count and gap between items.
 
 <PropsTable data={gridPropDefs} />
 
-Grid.Root also accepts all spacing props from the Box component.
-
-<PropsTable data={spacingPropDefs} />
-
 ### Grid.Item
 
 A grid child with column and row spanning control.

docs-ui/src/app/components/grid/props-definition.tsx

@@ -3,6 +3,7 @@ import {
   classNamePropDefs,
   gapPropDefs,
   stylePropDefs,
+  spacingGroupAll,
   type PropDef,
 } from '@/utils/propDefs';
 import { Chip } from '@/components/Chip';
@@ -67,6 +68,7 @@ export const gridPropDefs: Record<string, PropDef> = {
   ...childrenPropDefs,
   ...classNamePropDefs,
   ...stylePropDefs,
+  spacing: spacingGroupAll,
 };
 
 export const gridItemPropDefs: Record<string, PropDef> = {

docs-ui/src/app/layout.tsx

@@ -8,8 +8,6 @@ import { MobileBottomNav } from '@/components/MobileBottomNav';
 import styles from './layout.module.css';
 
 import '../css/globals.css';
-import '/public/theme-backstage.css';
-import '/public/theme-spotify.css';
 
 export const metadata: Metadata = {
   title: 'Backstage UI',
@@ -49,6 +47,10 @@ export default async function RootLayout({
       data-theme-name="backstage"
       suppressHydrationWarning
     >
+      <head>
+        <link rel="stylesheet" href="/theme-backstage.css" />
+        <link rel="stylesheet" href="/theme-spotify.css" />
+      </head>
       <body>
         <Providers>
           <Sidebar />