Merge pull request #18608 from backstage/freben/px

adjust theme spacing to not use extra units

.changeset/neat-lamps-press.md

@@ -0,0 +1,8 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-xcmetrics': patch
+'@backstage/plugin-catalog': patch
+---
+
+Prefer simple `theme.spacing` without string interpolation

packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx

@@ -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,
     },

packages/core-components/src/layout/ErrorPage/MicDrop.tsx

@@ -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),
       },
     },
   }),

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx

@@ -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,
     },

plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx

@@ -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,
     },

plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx

@@ -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),
     },
   },
 }));

plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx

@@ -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),
     },
   }),
 );

plugins/splunk-on-call/src/components/Incident/Incidents.tsx

@@ -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),
     },
   }),
 );

plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx

@@ -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),