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

Replace theme spacing only on overrides

Browse Source 
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2023-07-14 14:29:04 +02:00
parent e110bfd5c9
commit 41c5aa0ab5
3 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/metal-dots-suffer.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/theme': patch
---
Applying the modified `theme.spacing` method only to overrides instead of replacing it in the whole theme.
packages/theme/src/unified/overrides.ts
+8 -7
View File
@@ -77,16 +77,17 @@ function adaptV5Override(
return undefined;
}
if (typeof overrides === 'object') {
const _theme = { ...theme };
const defaultSpacing = theme.spacing(1);
if (typeof defaultSpacing === 'number') {
// Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix
// `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41
_theme.spacing = __v5Spacing(defaultSpacing);
}
return Object.fromEntries(
Object.entries(overrides).map(([className, style]) => {
if (typeof style === 'function') {
const defaultSpacing = theme.spacing(1);
if (typeof defaultSpacing === 'number') {
// Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix
// `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41
theme.spacing = __v5Spacing(defaultSpacing);
}
return [className, style({ theme })];
return [className, style({ theme: _theme })];
}
return [className, style];
}),
packages/theme/src/v5/defaultComponentThemes.ts
+2 -2
View File
@@ -189,12 +189,12 @@ export const defaultComponentThemes: ThemeOptions['components'] = {
color: theme.palette.grey[500],
width: theme.spacing(3),
height: theme.spacing(3),
margin: `0 ${theme.spacing(0.75)} 0 -${theme.spacing(0.75)}`,
margin: theme.spacing(0, 0.75, 0, -0.75),
}),
deleteIconSmall: ({ theme }) => ({
width: theme.spacing(2),
height: theme.spacing(2),
margin: `0 ${theme.spacing(0.5)} 0 -${theme.spacing(0.5)}`,
margin: theme.spacing(0, 0.5, 0, -0.5),
}),
},
},