Fix intro component arrow alignment

mui · Aug 17, 2023 · 3544f88 · 3544f88
1 parent 242ffcf
commit 3544f88
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction.js
@@ -16,10 +16,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref
       }}
       slotProps={{
         incrementButton: {
-          children: '▴',
+          children: <span className="arrow">▴</span>,
         },
         decrementButton: {
-          children: '▾',
+          children: <span className="arrow">▾</span>,
         },
       }}
       {...props}
@@ -116,8 +116,8 @@ const StyledButton = styled('button')(
   height: 19px;
   font-family: system-ui, sans-serif;
   font-size: 0.875rem;
+  line-height: 1;
   box-sizing: border-box;
-  line-height: 1.2;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -141,5 +141,9 @@ const StyledButton = styled('button')(
     grid-column: 2/3;
     grid-row: 2/3;
   }
+
+  & .arrow {
+    transform: translateY(-1px);
+  }
 `,
 );
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction.tsx
@@ -20,10 +20,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(
       }}
       slotProps={{
         incrementButton: {
-          children: '▴',
+          children: <span className="arrow">▴</span>,
         },
         decrementButton: {
-          children: '▾',
+          children: <span className="arrow">▾</span>,
         },
       }}
       {...props}
@@ -120,8 +120,8 @@ const StyledButton = styled('button')(
   height: 19px;
   font-family: system-ui, sans-serif;
   font-size: 0.875rem;
+  line-height: 1;
   box-sizing: border-box;
-  line-height: 1.2;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -145,5 +145,9 @@ const StyledButton = styled('button')(
     grid-column: 2/3;
     grid-row: 2/3;
   }
+
+  & .arrow {
+    transform: translateY(-1px);
+  }
 `,
 );