From e6a0d27bd31afd4fc7fd2f02ebdd6ae99cc36650 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 17 Aug 2023 20:56:49 +0800
Subject: [PATCH] Fix intro component arrow alignment

---
 .../components/number-input/NumberInputIntroduction.js | 10 +++++++---
 .../number-input/NumberInputIntroduction.tsx           | 10 +++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction.js
index 54d5a32ea056ed..d0518191dbbbd2 100644
--- 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
index df41c99be9c9d0..fbab0df46eda37 100644
--- 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);
+  }
 `,
 );