diff --git a/.changeset/neat-lamps-press.md b/.changeset/neat-lamps-press.md index ffc7ec9226..23c0b15fb7 100644 --- a/.changeset/neat-lamps-press.md +++ b/.changeset/neat-lamps-press.md @@ -2,8 +2,7 @@ '@backstage/core-components': patch '@backstage/plugin-splunk-on-call': patch '@backstage/plugin-xcmetrics': patch -'@backstage/plugin-techdocs': patch '@backstage/plugin-catalog': patch --- -Material UI v5 fix: express theme spacing without extra unit +Prefer simple `theme.spacing` without string interpolation diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts deleted file mode 100644 index 49f7ee51a5..0000000000 --- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.test.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright 2023 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { ensurePxUnit } from './layout'; - -describe('ensurePxUnit', () => { - it('only adds a unit when necessary', () => { - expect(ensurePxUnit('1px')).toBe('1px'); - expect(ensurePxUnit('-1.3px')).toBe('-1.3px'); - expect(ensurePxUnit('1')).toBe('1px'); - expect(ensurePxUnit('-1.3')).toBe('-1.3px'); - expect(ensurePxUnit(1)).toBe('1px'); - expect(ensurePxUnit(-1.3)).toBe('-1.3px'); - }); -}); diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts index b5e4da81a8..cce6af7d6f 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts @@ -18,16 +18,6 @@ import { RuleOptions } from './types'; const SIDEBAR_WIDTH = '224px'; -// NOTE(freben): Since different versions of Material UI have been inconsistent -// with whether they returned a unit or not with the theme spacing function, we -// ensure that one is always added here to be sure that we work with all -// versions of the library. -export function ensurePxUnit(value: string | number) { - return typeof value === 'number' || value.match(/^[\d.-]+$/) - ? `${value}px` - : value; -} - export default ({ theme, sidebar }: RuleOptions) => ` /*================== Layout ==================*/ @@ -52,7 +42,7 @@ export default ({ theme, sidebar }: RuleOptions) => ` .md-nav__icon { height: 20px !important; width: 20px !important; - margin-left: ${ensurePxUnit(theme.spacing(1))}; + margin-left:${theme.spacing(1)}px; } .md-nav__icon svg { margin: 0; @@ -86,7 +76,7 @@ export default ({ theme, sidebar }: RuleOptions) => ` width: calc(12.1rem); } .md-sidebar--secondary { - right: ${ensurePxUnit(theme.spacing(3))}; + right: ${theme.spacing(3)}px; } .md-sidebar::-webkit-scrollbar { width: 5px; @@ -244,7 +234,7 @@ export default ({ theme, sidebar }: RuleOptions) => ` #toggle-sidebar { display: none; } - + .md-content { margin: 0; width: 100%;