adjust theme spacing to not use extra units

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
2023-07-07 14:39:26 +02:00
parent 639bbea9f0
commit 3d86be999f
11 changed files with 23 additions and 12 deletions
@@ -0,0 +1,9 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-xcmetrics': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-catalog': patch
+---
+
+MUI v5 fix: express theme spacing without extra unit
@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -53,7 +54,7 @@ const useStyles = makeStyles<BackstageTheme>(
  theme => ({
    code: {
      borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
+      margin: theme.spacing(2, 0),
      background:
        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
    },
@@ -28,7 +28,7 @@ const useStyles = makeStyles(
        maxWidth: '96%',
        bottom: 'unset',
        right: 'unset',
-        margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+        margin: theme.spacing(10, 'auto', 4),
      },
    },
  }),
@@ -28,7 +28,7 @@ const useStyles = makeStyles<BackstageTheme>(
  theme => ({
    code: {
      borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
+      margin: theme.spacing(2, 0),
      background:
        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
    },
@@ -33,7 +33,7 @@ const useStyles = makeStyles<BackstageTheme>(
  theme => ({
    code: {
      borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
+      margin: theme.spacing(2, 0),
      background:
        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
    },
@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
      position: 'relative',
      top: 'unset',
      right: 'unset',
-      margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+      margin: theme.spacing(10, 'auto', 4),
    },
  },
 }));
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) =>
      backgroundColor: theme.palette.background.paper,
    },
    progress: {
-      margin: `0 ${theme.spacing(2)}px`,
+      margin: theme.spacing(0, 2),
    },
  }),
 );
@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme: Theme) =>
      backgroundColor: theme.palette.background.paper,
    },
    progress: {
-      margin: `0 ${theme.spacing(2)}px`,
+      margin: theme.spacing(0, 2),
    },
  }),
 );
@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) =>
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
-      minWidth: `calc(100% - ${theme.spacing(2)}px)`,
+      minWidth: `calc(100% - ${theme.spacing(2)})`,
    },
    formHeader: {
      width: '50%',
@@ -42,7 +42,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
 .md-nav__icon {
  height: 20px !important;
  width: 20px !important;
-  margin-left:${theme.spacing(1)}px;
+  margin-left: ${theme.spacing(1)};
 }
 .md-nav__icon svg {
  margin: 0;
@@ -76,7 +76,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
  width: calc(12.1rem);
 }
 .md-sidebar--secondary {
-  right: ${theme.spacing(3)}px;
+  right: ${theme.spacing(3)};
 }
 .md-sidebar::-webkit-scrollbar {
  width: 5px;
@@ -234,7 +234,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
  #toggle-sidebar {
    display: none;
  }
-  
+
  .md-content {
    margin: 0;
    width: 100%;
@@ -13,6 +13,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import React from 'react';
 import {
  createStyles,
@@ -27,7 +28,7 @@ import {
 const BootstrapInput = withStyles((theme: Theme) =>
  createStyles({
    root: {
-      margin: `${theme.spacing(1)} 0px`,
+      margin: theme.spacing(1, 0),
      maxWidth: 300,
      'label + &': {
        marginTop: theme.spacing(3),