[@mantine/core] Input: Add inputSize prop to set size html attribute on the input element

Author: rtivital

packages/@mantine/core/src/components/Input/Input.story.tsx

@@ -15,7 +15,7 @@ export function WithinDisabledFieldset() {
 export function Error() {
   return (
     <div style={{ padding: 40, maxWidth: 400 }}>
-      <Input placeholder="With error" error />
+      <Input placeholder="With error" error inputSize="5" />
     </div>
   );
 }

packages/@mantine/core/src/components/Input/Input.test.tsx

@@ -157,6 +157,11 @@ describe('@mantine/core/Input', () => {
     expect(screen.getByRole('textbox')).not.toHaveAttribute('disabled');
   });
 
+  it('allows setting size attribute on the input element', () => {
+    render(<Input inputSize="5" />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('size', '5');
+  });
+
   it('exposes compound components', () => {
     expect(Input.Wrapper).toBe(InputWrapper);
     expect(Input.Label).toBe(InputLabel);

packages/@mantine/core/src/components/Input/Input.tsx

@@ -100,6 +100,9 @@ export interface __InputProps {
 
   /** Determines whether the input should have red border and red text color when the `error` prop is set, `true` by default */
   withErrorStyles?: boolean;
+
+  /** `size` prop added to the input element */
+  inputSize?: string;
 }
 
 export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {
@@ -195,6 +198,7 @@ export const Input = polymorphicFactory<InputFactory>((_props, ref) => {
     withAria,
     withErrorStyles,
     mod,
+    inputSize,
     ...others
   } = props;
 
@@ -267,6 +271,7 @@ export const Input = polymorphicFactory<InputFactory>((_props, ref) => {
         required={required}
         mod={{ disabled, error: !!error && withErrorStyles }}
         variant={variant}
+        __size={inputSize}
         {...getStyles('input')}
       />
 

packages/@mantine/core/src/core/Box/Box.tsx

@@ -28,6 +28,9 @@ export interface BoxProps extends MantineStyleProps {
   /** CSS variables defined on root component element */
   __vars?: CssVarsProp;
 
+  /** `size` property passed down the HTML element */
+  __size?: string;
+
   /** Breakpoint above which the component is hidden with `display: none` */
   hiddenFrom?: MantineBreakpoint;
 
@@ -75,6 +78,7 @@ const _Box = forwardRef<
       lightHidden,
       darkHidden,
       renderRoot,
+      __size,
       ...others
     },
     ref
@@ -108,6 +112,7 @@ const _Box = forwardRef<
       }),
       'data-variant': variant,
       'data-size': isNumberLike(size) ? undefined : size || undefined,
+      size: __size,
       ...getBoxMod(mod),
       ...rest,
     };