diff --git a/.changeset/yellow-schools-relax.md b/.changeset/yellow-schools-relax.md new file mode 100644 index 0000000000..fd5f1fa7f7 --- /dev/null +++ b/.changeset/yellow-schools-relax.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Override the spacing to a v5 compliant method diff --git a/packages/theme/src/unified/overrides.test.ts b/packages/theme/src/unified/overrides.test.ts index e84cedade6..c99c0c10a4 100644 --- a/packages/theme/src/unified/overrides.test.ts +++ b/packages/theme/src/unified/overrides.test.ts @@ -18,12 +18,14 @@ import { Theme } from '@mui/material/styles'; import { transformV5ComponentThemesToV4 } from './overrides'; describe('transformV5ComponentThemesToV4', () => { + // TODO: Create actual v5 Theme to avoid missing properties in test const mockTheme = { palette: { primary: { main: 'red', }, }, + spacing: (n: number) => `${n * 8}px`, } as unknown as Theme; it('transforms empty component themes', () => { expect(transformV5ComponentThemesToV4(mockTheme)).toEqual({ diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 7417fccedc..a87f047f5c 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -29,6 +29,26 @@ type StaticStyleRules = Record< CSSProperties | Record >; +// Utility function based on v5 `createSpacing`: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createTheme/createSpacing.ts#L42C3-L59C5 +const __v5Spacing = + (defaultSpacing: number) => + (...argsInput: ReadonlyArray) => { + const args = argsInput.length === 0 ? [1] : argsInput; + const transform = (argument: string | number, themeSpacing: number) => { + if (typeof argument === 'string') { + return argument; + } + return themeSpacing * argument; + }; + + return args + .map(argument => { + const output = transform(argument, defaultSpacing); + return typeof output === 'number' ? `${output}px` : output; + }) + .join(' '); + }; + // Converts callback-based overrides to static styles, e.g. // { root: theme => ({ color: theme.color }) } -> { root: { color: 'red' } } function adaptV5CssBaselineOverride( @@ -60,6 +80,12 @@ function adaptV5Override( 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];