From 0a2a3e51e8b545e107516d535d13671cda5034a1 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 12:53:28 +0000 Subject: [PATCH 1/2] Update spacing props display with collapsible groups Signed-off-by: Charles de Dreuille --- docs-ui/.eslintrc.json | 2 +- docs-ui/src/app/components/box/page.mdx | 7 - .../app/components/box/props-definition.tsx | 2 + .../components/container/props-definition.ts | 42 +----- docs-ui/src/app/components/flex/page.mdx | 5 - .../app/components/flex/props-definition.tsx | 2 + docs-ui/src/app/components/grid/page.mdx | 5 - .../app/components/grid/props-definition.tsx | 2 + docs-ui/src/app/layout.tsx | 6 +- .../src/components/PropsTable/PropsTable.tsx | 55 ++++--- .../PropsTable/SpacingGroupRow.module.css | 96 +++++++++++++ .../components/PropsTable/SpacingGroupRow.tsx | 135 ++++++++++++++++++ .../PropsTable/SpacingPopup.module.css | 77 ++++++++++ .../components/PropsTable/SpacingPopup.tsx | 47 ++++++ docs-ui/src/components/Table/Table.tsx | 4 +- docs-ui/src/utils/propDefs.ts | 114 +++++++++++++-- 16 files changed, 511 insertions(+), 90 deletions(-) create mode 100644 docs-ui/src/components/PropsTable/SpacingGroupRow.module.css create mode 100644 docs-ui/src/components/PropsTable/SpacingGroupRow.tsx create mode 100644 docs-ui/src/components/PropsTable/SpacingPopup.module.css create mode 100644 docs-ui/src/components/PropsTable/SpacingPopup.tsx diff --git a/docs-ui/.eslintrc.json b/docs-ui/.eslintrc.json index be99640f75..5c40e04dde 100644 --- a/docs-ui/.eslintrc.json +++ b/docs-ui/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["next/core-web-vitals", "next/typescript"], + "extends": "next/core-web-vitals", "rules": { "notice/notice": "off", "react/forbid-elements": "off", diff --git a/docs-ui/src/app/components/box/page.mdx b/docs-ui/src/app/components/box/page.mdx index f825ddfdbf..4c9fa17fe9 100644 --- a/docs-ui/src/app/components/box/page.mdx +++ b/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'; -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. - - - ## Examples ### Surface diff --git a/docs-ui/src/app/components/box/props-definition.tsx b/docs-ui/src/app/components/box/props-definition.tsx index 168db2f445..3809bb9993 100644 --- a/docs-ui/src/app/components/box/props-definition.tsx +++ b/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 = { }, ...classNamePropDefs, ...stylePropDefs, + spacing: spacingGroupAll, }; diff --git a/docs-ui/src/app/components/container/props-definition.ts b/docs-ui/src/app/components/container/props-definition.ts index 797aec9e92..89a51eac5c 100644 --- a/docs-ui/src/app/components/container/props-definition.ts +++ b/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 = { 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.', + ), }; diff --git a/docs-ui/src/app/components/flex/page.mdx b/docs-ui/src/app/components/flex/page.mdx index e58b6000d4..f321b54583 100644 --- a/docs-ui/src/app/components/flex/page.mdx +++ b/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'; -The Flex component also accepts all the spacing props from the Box component. - - - ## Examples ### Direction diff --git a/docs-ui/src/app/components/flex/props-definition.tsx b/docs-ui/src/app/components/flex/props-definition.tsx index f0e36f370a..2136dd0498 100644 --- a/docs-ui/src/app/components/flex/props-definition.tsx +++ b/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 = { }, ...classNamePropDefs, ...stylePropDefs, + spacing: spacingGroupAll, }; diff --git a/docs-ui/src/app/components/grid/page.mdx b/docs-ui/src/app/components/grid/page.mdx index 8070516b21..8862586830 100644 --- a/docs-ui/src/app/components/grid/page.mdx +++ b/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. -Grid.Root also accepts all spacing props from the Box component. - - - ### Grid.Item A grid child with column and row spanning control. diff --git a/docs-ui/src/app/components/grid/props-definition.tsx b/docs-ui/src/app/components/grid/props-definition.tsx index c04c544f1a..4622f8f614 100644 --- a/docs-ui/src/app/components/grid/props-definition.tsx +++ b/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 = { ...childrenPropDefs, ...classNamePropDefs, ...stylePropDefs, + spacing: spacingGroupAll, }; export const gridItemPropDefs: Record = { diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx index ad056626d8..3647c572f5 100644 --- a/docs-ui/src/app/layout.tsx +++ b/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 > + + + + diff --git a/docs-ui/src/components/PropsTable/PropsTable.tsx b/docs-ui/src/components/PropsTable/PropsTable.tsx index 25311a2ec3..39ffb9f6b0 100644 --- a/docs-ui/src/components/PropsTable/PropsTable.tsx +++ b/docs-ui/src/components/PropsTable/PropsTable.tsx @@ -3,6 +3,8 @@ import * as Table from '../Table'; import { Chip } from '../Chip'; import { TypePopup } from './TypePopup'; +import { SpacingPopup } from './SpacingPopup'; +import { SpacingGroupRow } from './SpacingGroupRow'; import { PropDef } from '@/utils/propDefs'; @@ -37,8 +39,10 @@ export const PropsTable = >({ data: T; columns?: ColumnConfig[]; }) => { + if (!data) return null; + const renderCell = ( propName: string, propData: PropData, @@ -59,12 +63,10 @@ export const PropsTable = >({ {propData.type === 'number' && number} {propData.type === 'boolean' && boolean} {propData.type === 'enum' && enumValues} - {propData.type === 'spacing' && ( - <> - 0.5, 1, 1.5, 2, 3, ..., 14 - string - - )} + {propData.type === 'spacing' && + Array.isArray(propData.values) && ( + + )} {propData.type === 'complex' && propData.complexType && ( >({ ); case 'default': - return propData.default ? {propData.default} : null; + return propData.default ? {propData.default} : '-'; case 'description': - return propData.description || null; + return propData.description ? ( + {propData.description} + ) : null; case 'responsive': return {propData.responsive ? 'Yes' : 'No'}; @@ -106,15 +110,32 @@ export const PropsTable = >({ - {Object.keys(data).map(n => ( - - {columns.map(col => ( - - {renderCell(n, data[n], col.key)} - - ))} - - ))} + {Object.keys(data).map(n => { + const propData = data[n]; + + // Handle spacing-group type + if (propData.type === 'spacing-group' && propData.spacingGroup) { + return ( + + ); + } + + // Handle regular props + return ( + + {columns.map(col => ( + + {renderCell(n, propData, col.key)} + + ))} + + ); + })} ); diff --git a/docs-ui/src/components/PropsTable/SpacingGroupRow.module.css b/docs-ui/src/components/PropsTable/SpacingGroupRow.module.css new file mode 100644 index 0000000000..71ade80b47 --- /dev/null +++ b/docs-ui/src/components/PropsTable/SpacingGroupRow.module.css @@ -0,0 +1,96 @@ +.expandButton { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background: none; + border: none; + padding: 0; + cursor: pointer; + font-family: inherit; + color: inherit; + text-align: left; + gap: 0.5rem; +} + +.expandButton:hover { + opacity: 0.8; +} + +.propName { + font-family: monospace; + font-size: 13px; + font-weight: 500; + white-space: nowrap; + flex: 1; +} + +.count { + font-size: 12px; + color: var(--text-secondary); + font-weight: normal; +} + +.icon { + color: var(--text-secondary); + flex-shrink: 0; + display: flex; + align-items: center; +} + +.expandedContent { + padding: 0.5rem 0; +} + +.twoColumnLayout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +.column { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.columnTitle { + font-size: 13px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.25rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border); +} + +.propsGrid { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.propRow { + display: grid; + grid-template-columns: auto 1fr auto; + gap: 1rem; + align-items: start; +} + +.propRowName { + min-width: 80px; +} + +.propRowDescription { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.5; +} + +.propRowDefault { + font-size: 12px; + color: var(--text-secondary); + white-space: nowrap; + display: flex; + align-items: center; + gap: 0.25rem; +} diff --git a/docs-ui/src/components/PropsTable/SpacingGroupRow.tsx b/docs-ui/src/components/PropsTable/SpacingGroupRow.tsx new file mode 100644 index 0000000000..416ac2ae4f --- /dev/null +++ b/docs-ui/src/components/PropsTable/SpacingGroupRow.tsx @@ -0,0 +1,135 @@ +'use client'; + +import { useState } from 'react'; +import * as Table from '../Table'; +import { Chip } from '../Chip'; +import { SpacingPopup } from './SpacingPopup'; +import type { SpacingGroupDef } from '@/utils/propDefs'; +import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'; +import styles from './SpacingGroupRow.module.css'; + +interface SpacingGroupRowProps { + spacingGroup: SpacingGroupDef; + description?: React.ReactNode; + columns: Array<{ key: string; width: string }>; +} + +export const SpacingGroupRow = ({ + spacingGroup, + description, + columns, +}: SpacingGroupRowProps) => { + const [isExpanded, setIsExpanded] = useState(false); + + // Separate padding and margin props + const paddingProps = spacingGroup.props.filter(prop => prop.name.startsWith('p')); + const marginProps = spacingGroup.props.filter(prop => prop.name.startsWith('m')); + + const renderCell = (columnKey: string) => { + switch (columnKey) { + case 'prop': + return ( + + ); + + case 'type': + return ; + + case 'default': + return '-'; + + case 'description': + return description ? ( + {description} + ) : null; + + case 'responsive': + return {spacingGroup.responsive ? 'Yes' : 'No'}; + + default: + return null; + } + }; + + return ( + <> + + {columns.map(col => ( + + {renderCell(col.key)} + + ))} + + {isExpanded && ( + + +
+
+ {/* Padding Column */} + {paddingProps.length > 0 && ( +
+
Padding
+
+ {paddingProps.map(prop => ( +
+
+ {prop.name} +
+
+ {prop.description} +
+ {prop.default && ( +
+ Default: {prop.default} +
+ )} +
+ ))} +
+
+ )} + + {/* Margin Column */} + {marginProps.length > 0 && ( +
+
Margin
+
+ {marginProps.map(prop => ( +
+
+ {prop.name} +
+
+ {prop.description} +
+ {prop.default && ( +
+ Default: {prop.default} +
+ )} +
+ ))} +
+
+ )} +
+
+ + + )} + + ); +}; diff --git a/docs-ui/src/components/PropsTable/SpacingPopup.module.css b/docs-ui/src/components/PropsTable/SpacingPopup.module.css new file mode 100644 index 0000000000..892bc14bc6 --- /dev/null +++ b/docs-ui/src/components/PropsTable/SpacingPopup.module.css @@ -0,0 +1,77 @@ +.button { + display: inline-flex; + align-items: center; + font-family: monospace; + font-size: 13px; + border-radius: 6px; + padding: 0px 8px; + height: 24px; + margin-right: 4px; + background-color: #f0f0f0; + color: #5d5d5d; + cursor: pointer; + border: none; + outline: none; + box-shadow: none; + transition: background-color 150ms ease; +} + +.button:hover { + background-color: #e0e0e0; +} + +[data-theme-mode='dark'] .button { + background-color: #2c2c2c; + color: #fff; +} + +[data-theme-mode='dark'] .button:hover { + background-color: #3c3c3c; +} + +.popover { + border: 1px solid var(--border); + box-shadow: 0 8px 20px rgba(0 0 0 / 0.1); + border-radius: 6px; + background: var(--bg); + color: var(--primary); + outline: none; + transition: transform 200ms, opacity 200ms; + padding: 1rem; + margin-top: 6px; + max-width: 400px; + --origin: translateY(-8px); + + &[data-entering], + &[data-exiting] { + transform: var(--origin); + opacity: 0; + } +} + +.arrow svg { + display: block; + fill: var(--bg); + stroke: var(--border); + stroke-width: 1px; + transform: rotate(180deg); +} + +.title { + font-size: 14px; + font-weight: 500; + margin-bottom: 0.75rem; +} + +.grid { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin-bottom: 0.75rem; +} + +.note { + font-size: 12px; + color: var(--text-secondary); + font-style: italic; +} diff --git a/docs-ui/src/components/PropsTable/SpacingPopup.tsx b/docs-ui/src/components/PropsTable/SpacingPopup.tsx new file mode 100644 index 0000000000..9515ec4e5a --- /dev/null +++ b/docs-ui/src/components/PropsTable/SpacingPopup.tsx @@ -0,0 +1,47 @@ +import { Chip } from '../Chip'; +import { + Button, + Dialog, + DialogTrigger, + OverlayArrow, + Popover, +} from 'react-aria-components'; +import styles from './SpacingPopup.module.css'; + +interface SpacingPopupProps { + values: string[]; +} + +export const SpacingPopup = ({ values }: SpacingPopupProps) => { + // Display abbreviated list: first, second, ..., last + const firstValue = values[0]; + const secondValue = values[1]; + const lastValue = values[values.length - 1]; + + return ( +
+ {firstValue} + {secondValue} + + + + + + + + + +
All spacing values
+
+ {values.map(value => ( + {value} + ))} +
+
Also accepts custom string values
+ + + + {lastValue} +
+ ); +}; diff --git a/docs-ui/src/components/Table/Table.tsx b/docs-ui/src/components/Table/Table.tsx index 4d0e48dbce..a43bcd766a 100644 --- a/docs-ui/src/components/Table/Table.tsx +++ b/docs-ui/src/components/Table/Table.tsx @@ -45,12 +45,14 @@ export const Row = ({ children }: { children: ReactNode }) => { export const Cell = ({ children, style, + colSpan, }: { children: ReactNode; style?: CSSProperties; + colSpan?: number; }) => { return ( - + {children} ); diff --git a/docs-ui/src/utils/propDefs.ts b/docs-ui/src/utils/propDefs.ts index 575d53e81e..f714dd0d08 100644 --- a/docs-ui/src/utils/propDefs.ts +++ b/docs-ui/src/utils/propDefs.ts @@ -15,6 +15,18 @@ export type ComplexTypeDef = { >; }; +export type SpacingProp = { + name: string; + description: ReactNode; + default?: string; +}; + +export type SpacingGroupDef = { + props: SpacingProp[]; + values: string[]; + responsive: boolean; +}; + export type PropDef = { type: | 'string' @@ -23,9 +35,11 @@ export type PropDef = { | 'number' | 'boolean' | 'spacing' + | 'spacing-group' | 'complex'; values?: string | string[]; complexType?: ComplexTypeDef; + spacingGroup?: SpacingGroupDef; default?: string; required?: boolean; responsive?: boolean; @@ -58,43 +72,43 @@ export const paddingPropDefs = ( spacingValues: string[], ): Record => ({ p: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Padding on all sides.', }, px: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Horizontal padding (left and right).', }, py: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Vertical padding (top and bottom).', }, pt: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Padding on the top.', }, pr: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Padding on the right.', }, pb: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Padding on the bottom.', }, pl: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Padding on the left.', @@ -105,43 +119,43 @@ export const marginPropDefs = ( spacingValues: string[], ): Record => ({ m: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Margin on all sides.', }, mx: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Horizontal margin (left and right).', }, my: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Vertical margin (top and bottom).', }, mt: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Margin on the top.', }, mr: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Margin on the right.', }, mb: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Margin on the bottom.', }, ml: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, description: 'Margin on the left.', @@ -153,6 +167,76 @@ export const spacingPropDefs = { ...marginPropDefs(spacingValues), }; +// Spacing prop metadata for creating groups +const spacingPropMetadata: Record = { + p: { name: 'p', description: 'Padding on all sides.' }, + px: { name: 'px', description: 'Horizontal padding (left and right).' }, + py: { name: 'py', description: 'Vertical padding (top and bottom).' }, + pt: { name: 'pt', description: 'Padding on the top.' }, + pr: { name: 'pr', description: 'Padding on the right.' }, + pb: { name: 'pb', description: 'Padding on the bottom.' }, + pl: { name: 'pl', description: 'Padding on the left.' }, + m: { name: 'm', description: 'Margin on all sides.' }, + mx: { name: 'mx', description: 'Horizontal margin (left and right).' }, + my: { name: 'my', description: 'Vertical margin (top and bottom).' }, + mt: { name: 'mt', description: 'Margin on the top.' }, + mr: { name: 'mr', description: 'Margin on the right.' }, + mb: { name: 'mb', description: 'Margin on the bottom.' }, + ml: { name: 'ml', description: 'Margin on the left.' }, +}; + +export const createSpacingGroup = ( + propNames: string[], + description?: ReactNode, +): PropDef => { + const props = propNames + .map(name => spacingPropMetadata[name]) + .filter(Boolean); + + return { + type: 'spacing-group', + spacingGroup: { + props, + values: spacingValues, + responsive: true, + }, + description: + description || 'Spacing properties for controlling padding and margin.', + responsive: true, + }; +}; + +// Pre-built spacing groups +export const spacingGroupAll = createSpacingGroup( + [ + 'p', + 'px', + 'py', + 'pt', + 'pr', + 'pb', + 'pl', + 'm', + 'mx', + 'my', + 'mt', + 'mr', + 'mb', + 'ml', + ], + 'Padding and margin properties for controlling spacing around the element.', +); + +export const spacingGroupPadding = createSpacingGroup( + ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl'], + 'Padding properties for controlling internal spacing.', +); + +export const spacingGroupMargin = createSpacingGroup( + ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'], + 'Margin properties for controlling external spacing.', +); + export const displayPropDefs: Record = { display: { type: 'enum', @@ -164,7 +248,7 @@ export const displayPropDefs: Record = { export const gapPropDefs: Record = { gap: { - type: 'enum | string', + type: 'spacing', values: spacingValues, responsive: true, default: '4', From 9adcc572f6cd99e281cd70a053cd6c7b42fa9159 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 3 Feb 2026 09:52:38 +0000 Subject: [PATCH 2/2] Update Prettier Signed-off-by: Charles de Dreuille --- docs-ui/src/components/PropsTable/PropsTable.tsx | 9 +++------ .../src/components/PropsTable/SpacingGroupRow.tsx | 13 ++++++++++--- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs-ui/src/components/PropsTable/PropsTable.tsx b/docs-ui/src/components/PropsTable/PropsTable.tsx index 39ffb9f6b0..a8af2ad116 100644 --- a/docs-ui/src/components/PropsTable/PropsTable.tsx +++ b/docs-ui/src/components/PropsTable/PropsTable.tsx @@ -39,10 +39,8 @@ export const PropsTable = >({ data: T; columns?: ColumnConfig[]; }) => { - if (!data) return null; - const renderCell = ( propName: string, propData: PropData, @@ -63,10 +61,9 @@ export const PropsTable = >({ {propData.type === 'number' && number} {propData.type === 'boolean' && boolean} {propData.type === 'enum' && enumValues} - {propData.type === 'spacing' && - Array.isArray(propData.values) && ( - - )} + {propData.type === 'spacing' && Array.isArray(propData.values) && ( + + )} {propData.type === 'complex' && propData.complexType && ( prop.name.startsWith('p')); - const marginProps = spacingGroup.props.filter(prop => prop.name.startsWith('m')); + const paddingProps = spacingGroup.props.filter(prop => + prop.name.startsWith('p'), + ); + const marginProps = spacingGroup.props.filter(prop => + prop.name.startsWith('m'), + ); const renderCell = (columnKey: string) => { switch (columnKey) { @@ -35,7 +39,10 @@ export const SpacingGroupRow = ({ aria-expanded={isExpanded} > - Spacing props ({spacingGroup.props.length}) + Spacing props{' '} + + ({spacingGroup.props.length}) + {isExpanded ? (