From 2ae2e79598fc34d2b0d68810df3b793edf36fc9a Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Tue, 29 Aug 2023 16:33:42 +0800
Subject: [PATCH] [docs] Number Input docs fixes (#38521)

---
 .../components/number-input/NumberInputIntroduction.js | 10 +++++++---
 .../number-input/NumberInputIntroduction.tsx           | 10 +++++++---
 docs/data/base/components/number-input/number-input.md | 10 +++++++---
 3 files changed, 21 insertions(+), 9 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);
+  }
 `,
 );
diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
index 3fd2115b77585b..c634ff37ee997f 100644
--- a/docs/data/base/components/number-input/number-input.md
+++ b/docs/data/base/components/number-input/number-input.md
@@ -50,10 +50,10 @@ The following demo shows how to create a number input component, apply some styl
 The `min` and `max` props can be used to define a range of accepted values. You can pass only one of them to define an open-ended range.
 
 ```tsx
-  <NumberInput min={-10} max={10} />
+<NumberInput min={-10} max={10} />
 
-  // Open-ended
-  <NumberInput min={0} />
+// Open-ended
+<NumberInput min={0} />
 ```
 
 The `step` prop can be used to defined the granularity of the change in value when incrementing or decrementing. For example, if `min={0}` and `step={2}`, valid values for the component would be 0, 2, 4… since the value can only be changed in increments of 2.
@@ -63,6 +63,10 @@ The `step` prop can be used to defined the granularity of the change in value wh
 <NumberInput min={0} step={2} />
 ```
 
+:::warning
+Support for decimal values or step sizes isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/material-ui/issues/38518) to see it arrive sooner!
+:::
+
 When the input field is in focus, you can enter values that fall outside the valid range. The value will be clamped based on `min`, `max` and `step` once the input field is blurred.
 
 Holding down the <kbd>Shift</kbd> key when interacting with the stepper buttons applies a multipler (default 10x) to the value change of each step.