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

Add surfaces to Flex and Grid

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-12-23 08:23:37 +01:00
parent 0edcb325c7
commit 591d8a2483
11 changed files with 185 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/report.api.md
+23
View File
@@ -194,6 +194,9 @@ export const BoxDefinition: {
'minHeight',
'maxHeight',
];
readonly dataAttributes: {
readonly surface: readonly ['0', '1', '2', '3'];
};
};
// @public (undocumented)
@@ -223,6 +226,8 @@ export interface BoxProps extends SpaceProps {
// (undocumented)
style?: React.CSSProperties;
// (undocumented)
surface?: Responsive<Surface>;
// (undocumented)
width?: Responsive<string>;
}
@@ -657,6 +662,9 @@ export const FlexDefinition: {
'justify',
'direction',
];
readonly dataAttributes: {
readonly surface: readonly ['0', '1', '2', '3'];
};
};
// @public (undocumented)
@@ -678,6 +686,8 @@ export interface FlexProps extends SpaceProps {
justify?: Responsive<'start' | 'center' | 'end' | 'between'>;
// (undocumented)
style?: React.CSSProperties;
// (undocumented)
surface?: Responsive<Surface>;
}
// @public (undocumented)
@@ -714,6 +724,9 @@ export const GridDefinition: {
'px',
'py',
];
readonly dataAttributes: {
readonly surface: readonly ['0', '1', '2', '3'];
};
};
// @public
@@ -722,6 +735,9 @@ export const GridItemDefinition: {
readonly root: 'bui-GridItem';
};
readonly utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'];
readonly dataAttributes: {
readonly surface: readonly ['0', '1', '2', '3'];
};
};
// @public (undocumented)
@@ -740,6 +756,8 @@ export interface GridItemProps {
rowSpan?: Responsive<Columns>;
// (undocumented)
style?: React.CSSProperties;
// (undocumented)
surface?: Responsive<Surface>;
}
// @public (undocumented)
@@ -754,6 +772,8 @@ export interface GridProps extends SpaceProps {
gap?: Responsive<Space>;
// (undocumented)
style?: React.CSSProperties;
// (undocumented)
surface?: Responsive<Surface>;
}
// @public
@@ -1229,6 +1249,9 @@ export const SubmenuTrigger: (props: SubmenuTriggerProps) => JSX_2.Element;
// @public (undocumented)
export interface SubmenuTriggerProps extends SubmenuTriggerProps_2 {}
// @public
export type Surface = '0' | '1' | '2' | '3';
// @public (undocumented)
export const Switch: ForwardRefExoticComponent<
SwitchProps & RefAttributes<HTMLLabelElement>
packages/ui/src/components/Flex/Flex.module.css
+16
View File
@@ -23,4 +23,20 @@
/* This helps when using `truncate` on text inside a flex container */
min-width: 0;
}
.bui-Flex[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
}
.bui-Flex[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
}
.bui-Flex[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
}
.bui-Flex[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
}
}
packages/ui/src/components/Flex/Flex.stories.tsx
+27
View File
@@ -243,3 +243,30 @@ export const WithTextTruncate = meta.story({
</Flex>
),
});
export const Surfaces = meta.story({
args: {
px: '6',
py: '4',
},
render: args => (
<Flex align="center">
<Flex {...args}>Default</Flex>
<Flex surface="0" {...args}>
Surface 0
</Flex>
<Flex surface="1" {...args}>
Surface 1
</Flex>
<Flex surface="2" {...args}>
Surface 2
</Flex>
<Flex surface="3" {...args}>
Surface 3
</Flex>
<Flex surface={{ initial: '0', sm: '1' }} {...args}>
Responsive Surface
</Flex>
</Flex>
),
});
packages/ui/src/components/Flex/Flex.tsx
+12 -6
View File
@@ -20,17 +20,16 @@ import clsx from 'clsx';
import { useStyles } from '../../hooks/useStyles';
import { FlexDefinition } from './definition';
import styles from './Flex.module.css';
import { SurfaceProvider } from '../../hooks/useSurface';
/** @public */
export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
const { classNames, utilityClasses, style, cleanedProps } = useStyles(
FlexDefinition,
{ gap: '4', ...props },
);
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
useStyles(FlexDefinition, { gap: '4', ...props });
const { className, ...rest } = cleanedProps;
const { className, surface, ...rest } = cleanedProps;
return (
const content = (
<div
ref={ref}
className={clsx(
@@ -40,7 +39,14 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
className,
)}
style={style}
{...dataAttributes}
{...rest}
/>
);
return surface ? (
<SurfaceProvider surface={surface}>{content}</SurfaceProvider>
) : (
content
);
});
packages/ui/src/components/Flex/definition.ts
+3
View File
@@ -44,4 +44,7 @@ export const FlexDefinition = {
'justify',
'direction',
],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
},
} as const satisfies ComponentDefinition;
packages/ui/src/components/Flex/types.ts
+2 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import type { Responsive, Space, SpaceProps } from '../../types';
import type { Responsive, Space, SpaceProps, Surface } from '../../types';
/** @public */
export interface FlexProps extends SpaceProps {
@@ -25,4 +25,5 @@ export interface FlexProps extends SpaceProps {
direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
className?: string;
style?: React.CSSProperties;
surface?: Responsive<Surface>;
}
packages/ui/src/components/Grid/Grid.module.css
+20
View File
@@ -20,4 +20,24 @@
.bui-Grid {
display: grid;
}
.bui-Grid[data-surface='0'],
.bui-GridItem[data-surface='0'] {
background-color: var(--bui-bg-surface-0);
}
.bui-Grid[data-surface='1'],
.bui-GridItem[data-surface='1'] {
background-color: var(--bui-bg-surface-1);
}
.bui-Grid[data-surface='2'],
.bui-GridItem[data-surface='2'] {
background-color: var(--bui-bg-surface-2);
}
.bui-Grid[data-surface='3'],
.bui-GridItem[data-surface='3'] {
background-color: var(--bui-bg-surface-3);
}
}
packages/ui/src/components/Grid/Grid.stories.tsx
+44
View File
@@ -103,3 +103,47 @@ export const RowAndColumns = meta.story({
</Grid.Root>
),
});
export const Surfaces = meta.story({
args: { px: '6', py: '4' },
render: args => (
<Flex direction="column">
<Flex>
<Grid.Root {...args} surface="0">
Surface 0
</Grid.Root>
<Grid.Root {...args} surface="1">
Surface 1
</Grid.Root>
<Grid.Root {...args} surface="2">
Surface 2
</Grid.Root>
<Grid.Root {...args} surface="3">
Surface 3
</Grid.Root>
<Grid.Root {...args} surface={{ initial: '0', sm: '1' }}>
Responsive Surface
</Grid.Root>
</Flex>
<Flex>
<Grid.Root {...args}>
<Grid.Item surface="0">Surface 0</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="1">Surface 1</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="2">Surface 2</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface="3">Surface 3</Grid.Item>
</Grid.Root>
<Grid.Root {...args}>
<Grid.Item surface={{ initial: '0', sm: '1' }}>
Responsive Surface
</Grid.Item>
</Grid.Root>
</Flex>
</Flex>
),
});
packages/ui/src/components/Grid/Grid.tsx
+23 -12
View File
@@ -20,16 +20,15 @@ import type { GridItemProps, GridProps } from './types';
import { useStyles } from '../../hooks/useStyles';
import { GridDefinition, GridItemDefinition } from './definition';
import styles from './Grid.module.css';
import { SurfaceProvider } from '../../hooks/useSurface';
const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
const { classNames, utilityClasses, style, cleanedProps } = useStyles(
GridDefinition,
{ columns: 'auto', gap: '4', ...props },
);
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
useStyles(GridDefinition, { columns: 'auto', gap: '4', ...props });
const { className, ...rest } = cleanedProps;
const { className, surface, ...rest } = cleanedProps;
return (
const content = (
<div
ref={ref}
className={clsx(
@@ -39,20 +38,25 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
className,
)}
style={style}
{...dataAttributes}
{...rest}
/>
);
return surface ? (
<SurfaceProvider surface={surface}>{content}</SurfaceProvider>
) : (
content
);
});
const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
const { classNames, utilityClasses, style, cleanedProps } = useStyles(
GridItemDefinition,
props,
);
const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
useStyles(GridItemDefinition, props);
const { className, ...rest } = cleanedProps;
const { className, surface, ...rest } = cleanedProps;
return (
const content = (
<div
ref={ref}
className={clsx(
@@ -62,9 +66,16 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
className,
)}
style={style}
{...dataAttributes}
{...rest}
/>
);
return surface ? (
<SurfaceProvider surface={surface}>{content}</SurfaceProvider>
) : (
content
);
});
/** @public */
packages/ui/src/components/Grid/definition.ts
+6
View File
@@ -42,6 +42,9 @@ export const GridDefinition = {
'px',
'py',
],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
},
} as const satisfies ComponentDefinition;
/**
@@ -53,4 +56,7 @@ export const GridItemDefinition = {
root: 'bui-GridItem',
},
utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
dataAttributes: {
surface: ['0', '1', '2', '3'] as const,
},
} as const satisfies ComponentDefinition;
packages/ui/src/components/Grid/types.ts
+9 -1
View File
@@ -14,7 +14,13 @@
* limitations under the License.
*/
import type { Space, SpaceProps, Responsive, Columns } from '../../types';
import type {
Space,
SpaceProps,
Responsive,
Columns,
Surface,
} from '../../types';
/** @public */
export interface GridProps extends SpaceProps {
@@ -23,6 +29,7 @@ export interface GridProps extends SpaceProps {
columns?: Responsive<Columns>;
gap?: Responsive<Space>;
style?: React.CSSProperties;
surface?: Responsive<Surface>;
}
/** @public */
@@ -34,4 +41,5 @@ export interface GridItemProps {
colStart?: Responsive<Columns>;
rowSpan?: Responsive<Columns>;
style?: React.CSSProperties;
surface?: Responsive<Surface>;
}