Fix other arrow alignment

mui · Aug 17, 2023 · 3ea9c60 · 3ea9c60
1 parent 3544f88
commit 3ea9c60
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 33 deletions.
diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.js b/docs/data/base/components/number-input/NumberInputBasic/css/index.js
@@ -5,18 +5,38 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import { useTheme } from '@mui/system';
 
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
+  return (
+    <NumberInput
+      ref={ref}
+      slotProps={{
+        root: { className: 'CustomNumberInput' },
+        input: { className: 'input' },
+        decrementButton: {
+          className: 'btn decrement',
+          children: <span className="arrow">▾</span>,
+        },
+        incrementButton: {
+          className: 'btn increment',
+          children: <span className="arrow">▴</span>,
+        },
+      }}
+      aria-label="Demo number input"
+      placeholder="Type a number…"
+      {...props}
+    />
+  );
+});
+
 export default function NumberInputBasic() {
+  const [value, setValue] = React.useState();
   return (
     <React.Fragment>
-      <NumberInput
-        slotProps={{
-          root: { className: 'CustomNumberInput' },
-          input: { className: 'input' },
-          decrementButton: { className: 'btn decrement', children: '▾' },
-          incrementButton: { className: 'btn increment', children: '▴' },
-        }}
+      <CustomNumberInput
         aria-label="Demo number input"
         placeholder="Type a number…"
+        value={value}
+        onChange={(event, val) => setValue(val)}
       />
       <Styles />
     </React.Fragment>
@@ -143,6 +163,10 @@ function Styles() {
         grid-column: 2/3;
         grid-row: 2/3;
       }
+
+      .CustomNumberInput .arrow {
+        transform: translateY(-1px);
+      }
       `}
     </style>
   );

diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
@@ -1,22 +1,46 @@
 import * as React from 'react';
 import {
   Unstable_NumberInput as NumberInput,
+  NumberInputProps,
   numberInputClasses,
 } from '@mui/base/Unstable_NumberInput';
 import { useTheme } from '@mui/system';
 
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(
+  props: NumberInputProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <NumberInput
+      ref={ref}
+      slotProps={{
+        root: { className: 'CustomNumberInput' },
+        input: { className: 'input' },
+        decrementButton: {
+          className: 'btn decrement',
+          children: <span className="arrow">▾</span>,
+        },
+        incrementButton: {
+          className: 'btn increment',
+          children: <span className="arrow">▴</span>,
+        },
+      }}
+      aria-label="Demo number input"
+      placeholder="Type a number…"
+      {...props}
+    />
+  );
+});
+
 export default function NumberInputBasic() {
+  const [value, setValue] = React.useState<number | undefined>();
   return (
     <React.Fragment>
-      <NumberInput
-        slotProps={{
-          root: { className: 'CustomNumberInput' },
-          input: { className: 'input' },
-          decrementButton: { className: 'btn decrement', children: '▾' },
-          incrementButton: { className: 'btn increment', children: '▴' },
-        }}
+      <CustomNumberInput
         aria-label="Demo number input"
         placeholder="Type a number…"
+        value={value}
+        onChange={(event, val) => setValue(val)}
       />
       <Styles />
     </React.Fragment>
@@ -143,6 +167,10 @@ function Styles() {
         grid-column: 2/3;
         grid-row: 2/3;
       }
+
+      .CustomNumberInput .arrow {
+        transform: translateY(-1px);
+      }
       `}
     </style>
   );

diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx.preview b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx.preview
@@ -1,13 +1,9 @@
 <React.Fragment>
-  <NumberInput
-    slotProps={{
-      root: { className: 'CustomNumberInput' },
-      input: { className: 'input' },
-      decrementButton: { className: 'btn decrement', children: '▾' },
-      incrementButton: { className: 'btn increment', children: '▴' },
-    }}
+  <CustomNumberInput
     aria-label="Demo number input"
     placeholder="Type a number…"
+    value={value}
+    onChange={(event, val) => setValue(val)}
   />
   <Styles />
 </React.Fragment>
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.js b/docs/data/base/components/number-input/NumberInputBasic/system/index.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}
@@ -146,5 +146,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/NumberInputBasic/system/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/system/index.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}
@@ -150,5 +150,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/NumberInputBasic/tailwind/index.js b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js
@@ -19,14 +19,14 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref
             'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none',
         },
         incrementButton: {
-          children: '▴',
+          children: <span className="arrow">▴</span>,
           className:
-            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2',
+            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-none border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2 translate-y-[-1px]',
         },
         decrementButton: {
-          children: '▾',
+          children: <span className="arrow">▾</span>,
           className:
-            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3',
+            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-none border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3 translate-y-[-1px]',
         },
       }}
       {...props}

diff --git a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx
@@ -26,14 +26,14 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(
             'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none',
         },
         incrementButton: {
-          children: '▴',
+          children: <span className="arrow">▴</span>,
           className:
-            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2',
+            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-none border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2 translate-y-[-1px]',
         },
         decrementButton: {
-          children: '▾',
+          children: <span className="arrow">▾</span>,
           className:
-            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3',
+            'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-none border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3 translate-y-[-1px]',
         },
       }}
       {...props}