[@mantine/core] Numberinput: Reduce width of the right section to mat…

…ch controls width (#5033)
mantinedev · Nov 7, 2023 · 4b31a1f · 4b31a1f
1 parent adc8819
commit 4b31a1f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/src/mantine-core/src/components/NumberInput/NumberInput.module.css b/src/mantine-core/src/components/NumberInput/NumberInput.module.css
@@ -1,3 +1,11 @@
+.root {
+  --ni-right-section-width-xs: rem(17px);
+  --ni-right-section-width-sm: rem(24px);
+  --ni-right-section-width-md: rem(27px);
+  --ni-right-section-width-lg: rem(31px);
+  --ni-right-section-width-xl: rem(34px);
+}
+
 .controls {
   --ni-chevron-size-xs: rem(10px);
   --ni-chevron-size-sm: rem(14px);

diff --git a/src/mantine-core/src/components/NumberInput/NumberInput.story.tsx b/src/mantine-core/src/components/NumberInput/NumberInput.story.tsx
@@ -20,6 +20,27 @@ export function Usage() {
   );
 }
 
+export function RightSectionSizes() {
+  return (
+    <div
+      style={{
+        maxWidth: 340,
+        margin: 'auto',
+        padding: 40,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 20,
+      }}
+    >
+      <NumberInput placeholder="xs" size="xs" styles={{ section: { background: 'transparent' } }} />
+      <NumberInput placeholder="sm" size="sm" styles={{ section: { background: 'transparent' } }} />
+      <NumberInput placeholder="md" size="md" styles={{ section: { background: 'transparent' } }} />
+      <NumberInput placeholder="lg" size="lg" styles={{ section: { background: 'transparent' } }} />
+      <NumberInput placeholder="xl" size="xl" styles={{ section: { background: 'transparent' } }} />
+    </div>
+  );
+}
+
 export function Unstyled() {
   const [value, setValue] = useState<number | string>(345);
   return (

diff --git a/src/mantine-core/src/components/NumberInput/NumberInput.tsx b/src/mantine-core/src/components/NumberInput/NumberInput.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'clsx';
 import { NumericFormat, OnValueChange, NumberFormatValues } from 'react-number-format';
 import { assignRef, clamp, useUncontrolled } from '@mantine/hooks';
 import {
@@ -175,6 +176,7 @@ const varsResolver = createVarsResolver<NumberInputFactory>((_, { size }) => ({
 export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
   const props = useProps('NumberInput', defaultProps, _props);
   const {
+    className,
     classNames,
     styles,
     unstyled,
@@ -200,6 +202,8 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
     rightSectionPointerEvents,
     allowNegative,
     readOnly,
+    size,
+    rightSectionWidth,
     ...others
   } = props;
 
@@ -304,6 +308,8 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
     <InputBase
       component={NumericFormat}
       allowNegative={allowNegative}
+      className={cx(classes.root, className)}
+      size={size}
       {...others}
       readOnly={readOnly}
       disabled={disabled}
@@ -318,6 +324,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
       decimalScale={allowDecimal ? decimalScale : 0}
       onKeyDown={handleKeyDown}
       rightSectionPointerEvents={rightSectionPointerEvents ?? disabled ? 'none' : undefined}
+      rightSectionWidth={rightSectionWidth ?? `var(--ni-right-section-width-${size || 'sm'})`}
       onBlur={(event) => {
         onBlur?.(event);
         if (clampBehavior === 'blur' && typeof _value === 'number') {