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

Add status surfaces

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-12-23 18:26:53 +01:00
parent 3f0d15db8d
commit b12ad76bd0
10 changed files with 106 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/Box/Box.module.css
+12
View File
@@ -38,4 +38,16 @@
.bui-Box[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
}
.bui-Box[data-surface='danger'] {
background-color: var(--bui-bg-danger);
}
.bui-Box[data-surface='warning'] {
background-color: var(--bui-bg-warning);
}
.bui-Box[data-surface='success'] {
background-color: var(--bui-bg-success);
}
}
packages/ui/src/components/Box/Box.stories.tsx
+10 -1
View File
@@ -349,7 +349,7 @@ export const Display = meta.story({
export const Surfaces = meta.story({
args: { px: '6', py: '4' },
render: args => (
<Flex align="center">
<Flex align="center" style={{ flexWrap: 'wrap' }}>
<Box {...args}>Default</Box>
<Box surface="0" {...args}>
Surface 0
@@ -366,6 +366,15 @@ export const Surfaces = meta.story({
<Box surface={{ initial: '0', sm: '1' }} {...args}>
Responsive Surface
</Box>
<Box surface="danger" {...args}>
Surface Danger
</Box>
<Box surface="warning" {...args}>
Surface Warning
</Box>
<Box surface="success" {...args}>
Surface Success
</Box>
</Flex>
),
});
packages/ui/src/components/Box/definition.ts
+1 -1
View File
@@ -49,6 +49,6 @@ export const BoxDefinition = {
'maxHeight',
],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
packages/ui/src/components/Flex/Flex.module.css
+12
View File
@@ -39,4 +39,16 @@
.bui-Flex[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
}
.bui-Flex[data-surface='danger'] {
background-color: var(--bui-bg-danger);
}
.bui-Flex[data-surface='warning'] {
background-color: var(--bui-bg-warning);
}
.bui-Flex[data-surface='success'] {
background-color: var(--bui-bg-success);
}
}
packages/ui/src/components/Flex/Flex.stories.tsx
+10 -1
View File
@@ -250,7 +250,7 @@ export const Surfaces = meta.story({
py: '4',
},
render: args => (
<Flex align="center">
<Flex align="center" style={{ flexWrap: 'wrap' }}>
<Flex {...args}>Default</Flex>
<Flex surface="0" {...args}>
Surface 0
@@ -267,6 +267,15 @@ export const Surfaces = meta.story({
<Flex surface={{ initial: '0', sm: '1' }} {...args}>
Responsive Surface
</Flex>
<Flex surface="danger" {...args}>
Surface Danger
</Flex>
<Flex surface="warning" {...args}>
Surface Warning
</Flex>
<Flex surface="success" {...args}>
Surface Success
</Flex>
</Flex>
),
});
packages/ui/src/components/Flex/definition.ts
+1 -1
View File
@@ -45,6 +45,6 @@ export const FlexDefinition = {
'direction',
],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
packages/ui/src/components/Grid/Grid.module.css
+15
View File
@@ -40,4 +40,19 @@
.bui-GridItem[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
}
.bui-Grid[data-surface='danger'],
.bui-GridItem[data-surface='danger'] {
background-color: var(--bui-bg-danger);
}
.bui-Grid[data-surface='warning'],
.bui-GridItem[data-surface='warning'] {
background-color: var(--bui-bg-warning);
}
.bui-Grid[data-surface='success'],
.bui-GridItem[data-surface='success'] {
background-color: var(--bui-bg-success);
}
}
packages/ui/src/components/Grid/Grid.stories.tsx
+42 -7
View File
@@ -108,7 +108,7 @@ export const Surfaces = meta.story({
args: { px: '6', py: '4' },
render: args => (
<Flex direction="column">
<Flex>
<Flex style={{ flexWrap: 'wrap' }}>
<Grid.Root {...args} surface="0">
Surface 0
</Grid.Root>
@@ -124,25 +124,60 @@ export const Surfaces = meta.story({
<Grid.Root {...args} surface={{ initial: '0', sm: '1' }}>
Responsive Surface
</Grid.Root>
<Grid.Root {...args} surface="danger">
Surface Danger
</Grid.Root>
<Grid.Root {...args} surface="warning">
Surface Warning
</Grid.Root>
<Grid.Root {...args} surface="success">
Surface Success
</Grid.Root>
</Flex>
<Flex>
<Flex style={{ flexWrap: 'wrap' }}>
<Grid.Root {...args}>
<Grid.Item surface="0">Surface 0</Grid.Item>
<Grid.Item surface="0" style={{ padding: '4px' }}>
Surface 0
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="1">Surface 1</Grid.Item>
<Grid.Item surface="1" style={{ padding: '4px' }}>
Surface 1
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="2">Surface 2</Grid.Item>
<Grid.Item surface="2" style={{ padding: '4px' }}>
Surface 2
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="3">Surface 3</Grid.Item>
<Grid.Item surface="3" style={{ padding: '4px' }}>
Surface 3
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface={{ initial: '0', sm: '1' }}>
<Grid.Item
surface={{ initial: '0', sm: '1' }}
style={{ padding: '4px' }}
>
Responsive Surface
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="danger" style={{ padding: '4px' }}>
Surface Danger
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="warning" style={{ padding: '4px' }}>
Surface Warning
</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="success" style={{ padding: '4px' }}>
Surface Success
</Grid.Item>
</Grid.Root>
</Flex>
</Flex>
),
packages/ui/src/components/Grid/definition.ts
+2 -2
View File
@@ -43,7 +43,7 @@ export const GridDefinition = {
'py',
],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
@@ -57,6 +57,6 @@ export const GridItemDefinition = {
},
utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
packages/ui/src/types.ts
+1 -1
View File
@@ -178,4 +178,4 @@ export interface ComponentDefinition {
* Surface type
* @public
*/
export type Surface = '0' | '1' | '2' | '3';
export type Surface = '0' | '1' | '2' | '3' | 'danger' | 'warning' | 'success';