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

Merge pull request #28770 from backstage/canon-fix-box

Browse Source 
Canon - Fix custom values in spacing props
This commit is contained in:
Charles de Dreuille
2025-02-07 19:01:07 +00:00
committed by GitHub
parent e828a7f174 a165e6f925
commit 4de4602e94
14 changed files with 95 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/soft-seahorses-relate.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Fix spacing props not being applied for custom values.
packages/canon/report.api.md
+4 -4
View File
@@ -670,14 +670,14 @@ export const marginPropDefs: (spacingValues: string[]) => {
type: 'enum | string';
values: string[];
className: string;
customProperties: ('--ml' | '--mr')[];
customProperties: '--mx'[];
responsive: true;
};
my: {
type: 'enum | string';
values: string[];
className: string;
customProperties: ('--mt' | '--mb')[];
customProperties: '--my'[];
responsive: true;
};
mt: {
@@ -732,14 +732,14 @@ export const paddingPropDefs: (spacingValues: string[]) => {
px: {
type: 'enum | string';
className: string;
customProperties: ('--pl' | '--pr')[];
customProperties: '--px'[];
values: string[];
responsive: true;
};
py: {
type: 'enum | string';
className: string;
customProperties: ('--pt' | '--pb')[];
customProperties: '--py'[];
values: string[];
responsive: true;
};
packages/canon/src/components/Box/Box.stories.tsx
+55
View File
@@ -54,6 +54,13 @@ const Card = () => {
};
export const Default: Story = {
args: {
children: 'Hello World',
mb: '4',
},
};
export const Preview: Story = {
args: {
children: <Card />,
display: 'inline',
@@ -141,6 +148,25 @@ export const Padding: Story = {
<Box {...args}>Padding Left</Box>
</Box>
</Flex>
<Flex gap="4" align="center">
<Box p="10px" style={styleInsideBox}>
<Box {...args}>Custom Padding</Box>
</Box>
<Box px="10px" style={styleInsideBox}>
<Box {...args}>Custom Padding X</Box>
</Box>
<Box py="10px" style={styleInsideBox}>
<Box {...args}>Custom Padding Y</Box>
</Box>
</Flex>
<Flex gap="4" align="center">
<Box pt="10px" pb="10px" style={styleInsideBox}>
<Box {...args}>Custom Padding Top Bottom</Box>
</Box>
<Box pl="10px" pr="10px" style={styleInsideBox}>
<Box {...args}>Custom Padding Left Right</Box>
</Box>
</Flex>
</Flex>
),
};
@@ -195,6 +221,35 @@ export const Margin: Story = {
</Box>
</Box>
</Flex>
<Flex align="center" gap="4">
<Box style={styleInsideBox}>
<Box m="10px" {...args}>
Custom Margin
</Box>
</Box>
<Box style={styleInsideBox}>
<Box mx="10px" {...args}>
Custom Margin X
</Box>
</Box>
<Box style={styleInsideBox}>
<Box my="10px" {...args}>
Custom Margin Y
</Box>
</Box>
</Flex>
<Flex align="center" gap="4">
<Box style={styleInsideBox}>
<Box mt="10px" mb="10px" {...args}>
Custom Margin Top Bottom
</Box>
</Box>
<Box style={styleInsideBox}>
<Box ml="10px" mr="10px" {...args}>
Custom Margin Left Right
</Box>
</Box>
</Flex>
</Flex>
),
};
packages/canon/src/components/Box/Box.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ import { displayPropDefs } from '../../props/display.props';
/** @public */
export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
const { as = 'div', children } = props;
const { children } = props;
const propDefs = {
...spacingPropDefs,
@@ -39,7 +39,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
};
const { className, style } = extractProps(props, propDefs);
return createElement(as, {
return createElement(props.as || 'div', {
ref,
className: clsx('canon-Box', className),
style,
packages/canon/src/css/utilities/m.css
+1 -1
View File
@@ -1,5 +1,5 @@
.cu-m {
margin: var(--p);
margin: var(--m);
}
.cu-m-0\.5 {
packages/canon/src/css/utilities/mb.css
+1 -1
View File
@@ -1,5 +1,5 @@
.cu-mb {
margin-bottom: var(--pb);
margin-bottom: var(--mb);
}
.cu-mb-0\.5 {
packages/canon/src/css/utilities/ml.css
+1 -1
View File
@@ -1,5 +1,5 @@
.cu-ml {
margin-left: var(--pl);
margin-left: var(--ml);
}
.cu-ml-0\.5 {
packages/canon/src/css/utilities/mr.css
+1 -1
View File
@@ -1,5 +1,5 @@
.cu-mr {
margin-right: var(--pr);
margin-right: var(--mr);
}
.cu-mr-0\.5 {
packages/canon/src/css/utilities/mt.css
+1 -1
View File
@@ -1,5 +1,5 @@
.cu-mt {
margin-top: var(--pt);
margin-top: var(--mt);
}
.cu-mt-0\.5 {
packages/canon/src/css/utilities/mx.css
+2 -2
View File
@@ -1,6 +1,6 @@
.cu-mx {
margin-left: var(--px);
margin-right: var(--px);
margin-left: var(--mx);
margin-right: var(--mx);
}
.cu-mx-0\.5 {
packages/canon/src/css/utilities/my.css
+2 -2
View File
@@ -1,6 +1,6 @@
.cu-my {
margin-top: var(--py);
margin-bottom: var(--py);
margin-top: var(--my);
margin-bottom: var(--my);
}
.cu-my-0\.5 {
packages/canon/src/props/margin.props.ts
+2 -2
View File
@@ -29,14 +29,14 @@ const marginPropDefs = (spacingValues: string[]) =>
type: 'enum | string',
values: spacingValues,
className: 'cu-mx',
customProperties: ['--ml', '--mr'],
customProperties: ['--mx'],
responsive: true,
},
my: {
type: 'enum | string',
values: spacingValues,
className: 'cu-my',
customProperties: ['--mt', '--mb'],
customProperties: ['--my'],
responsive: true,
},
mt: {
packages/canon/src/props/padding.props.ts
+2 -2
View File
@@ -29,14 +29,14 @@ const paddingPropDefs = (spacingValues: string[]) =>
px: {
type: 'enum | string',
className: 'cu-px',
customProperties: ['--pl', '--pr'],
customProperties: ['--px'],
values: spacingValues,
responsive: true,
},
py: {
type: 'enum | string',
className: 'cu-py',
customProperties: ['--pt', '--pb'],
customProperties: ['--py'],
values: spacingValues,
responsive: true,
},
packages/canon/src/utils/extractProps.ts
+16 -13
View File
@@ -24,36 +24,35 @@ export function extractProps(
},
propDefs: { [key: string]: any },
) {
let className: string = props.className || '';
let style: React.CSSProperties = props.style || {};
let className: string[] = (props.className || '').split(' ');
let style: React.CSSProperties = { ...props.style };
const hasProp = (key: string) => props.hasOwnProperty(key);
for (const key in propDefs) {
// Check if the prop is present or has a default value
if (
!props.hasOwnProperty(key) &&
!propDefs[key].hasOwnProperty('default')
) {
if (!hasProp(key) && !propDefs[key].hasOwnProperty('default')) {
continue; // Skip processing if neither is present
}
const value = props.hasOwnProperty(key)
? props[key]
: propDefs[key].default;
const value = hasProp(key) ? props[key] : propDefs[key].default;
const propDefsValues = propDefs[key].values;
const propDefsCustomProperties = propDefs[key].customProperties;
const propDefsClassName = propDefs[key].className;
const isResponsive = propDefs[key].responsive;
const handleValue = (val: any, prefix: string = '') => {
const handleValue = (val: string, prefix: string = '') => {
// Skip adding class name if the key is "as"
if (key === 'as') return;
if (propDefsValues.includes(val)) {
className += ` ${prefix}${propDefsClassName}-${val}`;
className.push(`${prefix}${propDefsClassName}-${val}`);
} else {
const customPropertyKey =
isResponsive && prefix
? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
: propDefsCustomProperties;
(style as any)[customPropertyKey] = val;
className += ` ${prefix}${propDefsClassName}`;
className.push(`${prefix}${propDefsClassName}`);
}
};
@@ -76,5 +75,9 @@ export function extractProps(
return acc;
}, {} as { [key: string]: any });
return { ...cleanedProps, className, style };
const newClassNames = className
.filter(name => name && name.trim() !== '')
.join(' ');
return { ...cleanedProps, className: newClassNames, style };
}