Fix button variants, hide max button when input is disabled

aragon · Jan 23, 2024 · 4ef4ab4 · 4ef4ab4
1 parent dbd8071
commit 4ef4ab4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/src/components/input/inputNumberMax/inputNumberMax.test.tsx b/src/components/input/inputNumberMax/inputNumberMax.test.tsx
@@ -42,4 +42,10 @@ describe('<InputNumberMax /> component', () => {
         fireEvent.click(screen.getByRole('button'));
         expect(setValue).toHaveBeenCalledWith(max.toString());
     });
+
+    it('does not render the max button when input is disabled', () => {
+        const isDisabled = true;
+        render(createTestComponent({ isDisabled }));
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
 });
diff --git a/src/components/input/inputNumberMax/inputNumberMax.tsx b/src/components/input/inputNumberMax/inputNumberMax.tsx
@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import { Button } from '../../button';
-import { type ButtonVariant } from '../../button/button.api';
 import { useInputProps, useNumberMask, type IUseNumberMaskProps } from '../hooks';
-import { InputContainer, type IInputComponentProps, type InputVariant } from '../inputContainer';
+import { InputContainer, type IInputComponentProps } from '../inputContainer';
 
 export interface IInputNumberMaxProps extends Omit<IInputComponentProps, 'maxLength' | 'onChange'> {
     /**
@@ -15,18 +14,12 @@ export interface IInputNumberMaxProps extends Omit<IInputComponentProps, 'maxLen
     onChange?: IUseNumberMaskProps['onChange'];
 }
 
-const inputVariantToButtonVariant: Record<InputVariant, ButtonVariant> = {
-    critical: 'critical',
-    default: 'tertiary',
-    warning: 'warning',
-};
-
 export const InputNumberMax: React.FC<IInputNumberMaxProps> = (props) => {
     const { max, onChange, ...otherProps } = props;
     const { containerProps, inputProps } = useInputProps(otherProps);
 
     const { variant, ...otherContainerProps } = containerProps;
-    const { className: inputClassName, value, min, ...otherInputProps } = inputProps;
+    const { className: inputClassName, value, min, disabled, ...otherInputProps } = inputProps;
 
     const { ref, setValue } = useNumberMask({ min, max, value, onChange });
 
@@ -40,17 +33,15 @@ export const InputNumberMax: React.FC<IInputNumberMaxProps> = (props) => {
                 max={max}
                 min={min}
                 inputMode="decimal"
+                disabled={disabled}
                 {...otherInputProps}
             />
-            <Button
-                size="sm"
-                variant={inputVariantToButtonVariant[variant ?? 'default']}
-                className="mr-2"
-                onClick={handleMaxClick}
-            >
-                {/* TODO: apply internationalisation to Max label [APP-2627] */}
-                Max
-            </Button>
+            {!disabled && (
+                <Button size="sm" variant="tertiary" className="mr-2" onClick={handleMaxClick}>
+                    {/* TODO: apply internationalisation to Max label [APP-2627] */}
+                    Max
+                </Button>
+            )}
         </InputContainer>
     );
 };