paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 37 Packages Projects Releases Wiki Activity

Merge pull request #31249 from backstage/tweak-grid-docs

Browse Source 
docs: fix grid usage
This commit is contained in:
Ben Lambert
2025-09-30 15:43:21 +02:00
committed by GitHub
parent 80c9347003 3947797480
commit 627f044a07
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/content/components/grid.props.ts
+27 -27
View File
@@ -43,12 +43,12 @@ export const gridItemPropDefs: Record<string, PropDef> = {
values: [...columnsValues, 'full'],
responsive: true,
},
start: {
colStart: {
type: 'enum | string',
values: [...columnsValues, 'auto'],
responsive: true,
},
end: {
colEnd: {
type: 'enum | string',
values: [...columnsValues, 'auto'],
responsive: true,
@@ -60,7 +60,7 @@ export const gridItemPropDefs: Record<string, PropDef> = {
export const gridUsageSnippet = `import { Grid } from '@backstage/ui';
<Grid />`;
<Grid.Root />`;
export const gridDefaultSnippet = `<Grid.Root>
<DecorativeBox />
@@ -68,44 +68,44 @@ export const gridDefaultSnippet = `<Grid.Root>
<DecorativeBox />
</Grid.Root>`;
export const gridSimpleSnippet = `<Grid columns={3} gap="md">
export const gridSimpleSnippet = `<Grid.Root columns="3" gap="md">
<Box>Hello World</Box>
<Box>Hello World</Box>
<Box>Hello World</Box>
</Grid>`;
</Grid.Root>`;
export const gridComplexSnippet = `<Grid columns={3} gap="md">
<Grid.Item colSpan={1}>
<Box>Hello World</Box>
export const gridComplexSnippet = `<Grid.Root columns="3" gap="md">
<Grid.Item colSpan="1">
Hello World
</Grid.Item>
<Grid.Item colSpan={2}>
<Box>Hello World</Box>
<Grid.Item colSpan="2">
Hello World
</Grid.Item>
</Grid>`;
</Grid.Root>`;
export const gridMixingRowsSnippet = `<Grid columns={3} gap="md">
<Grid.Item colSpan={1} rowSpan={2}>
<Box>Hello World</Box>
export const gridMixingRowsSnippet = `<Grid.Root columns="3" gap="md">
<Grid.Item colSpan="1" rowSpan="2">
Hello World
</Grid.Item>
<Grid.Item colSpan={2}>
<Box>Hello World</Box>
<Grid.Item colSpan="2">
Hello World
</Grid.Item>
<Grid.Item colSpan={2}>
<Box>Hello World</Box>
<Grid.Item colSpan="2">
Hello World
</Grid.Item>
</Grid>`;
</Grid.Root>`;
export const gridResponsiveSnippet = `<Grid columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
export const gridResponsiveSnippet = `<Grid.Root columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
<Grid.Item colSpan={{ xs: 1, md: 2 }}>
<Box>Hello World</Box>
<Hello World
</Grid.Item>
<Grid.Item colSpan={{ xs: 1, md: 1 }}>
<Box>Hello World</Box>
Hello World
</Grid.Item>
</Grid>`;
</Grid.Root>`;
export const gridStartEndSnippet = `<Grid columns={3} gap="md">
<Grid.Item start={2} end={4}>
<Box>Hello World</Box>
export const gridStartEndSnippet = `<Grid.Root columns="3" gap="md">
<Grid.Item colStart="2" colEnd="4">
Hello World
</Grid.Item>
</Grid>`;
</Grid.Root>`;