[docs] Number Input docs fixes (#38521)

mui · Aug 29, 2023 · 2ae2e79 · 2ae2e79
1 parent f2a254e
commit 2ae2e79
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 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);
+  }
 `,
 );
diff --git 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.