feat(suite): Add cursor: not-allowed to disabled components (#12945)

trezor · Jul 1, 2024 · 204416f · 204416f
1 parent 49e0bfd
commit 204416f
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 36 deletions.
diff --git a/packages/components/src/components/buttons/Button/Button.stories.tsx b/packages/components/src/components/buttons/Button/Button.stories.tsx
@@ -11,7 +11,37 @@ export default meta;
 export const Button: StoryObj<ButtonProps> = {
     args: {
         children: 'Button label',
+        variant: 'primary',
+        size: 'medium',
+        isDisabled: false,
+        isLoading: false,
+        isFullWidth: false,
+        iconAlignment: 'left',
+        title: 'Button title',
         ...framePropsStory.args,
     },
-    argTypes: framePropsStory.argTypes,
+    argTypes: {
+        variant: {
+            control: {
+                type: 'radio',
+            },
+            options: ['primary', 'secondary', 'tertiary', 'info', 'warning', 'destructive'],
+        },
+        size: {
+            control: {
+                type: 'radio',
+            },
+            options: ['large', 'medium', 'small', 'tiny'],
+        },
+        icon: { control: 'text' },
+        iconSize: { control: 'number' },
+        iconAlignment: {
+            control: {
+                type: 'radio',
+            },
+            options: ['left', 'right'],
+        },
+        title: { control: 'text' },
+        ...framePropsStory.argTypes,
+    },
 };
diff --git a/packages/components/src/components/buttons/Button/Button.tsx b/packages/components/src/components/buttons/Button/Button.tsx
@@ -48,8 +48,7 @@ export const ButtonContainer = styled.button<ButtonContainerProps>`
     &:disabled {
         background: ${({ theme }) => theme.BG_GREY};
         color: ${({ theme }) => theme.textDisabled};
-        pointer-events: none;
-        cursor: default;
+        cursor: not-allowed;
     }
 
     ${withFrameProps}
@@ -142,6 +141,7 @@ export const Button = ({
             $hasIcon={!!icon || isLoading}
             $elevation={elevation}
             {...rest}
+            onClick={isDisabled ? undefined : rest?.onClick}
             {...makePropsTransient(frameProps)}
         >
             {!isLoading && icon && IconComponent}

diff --git a/packages/components/src/components/form/Checkbox/Checkbox.stories.tsx b/packages/components/src/components/form/Checkbox/Checkbox.stories.tsx
@@ -29,8 +29,26 @@ export const Checkbox: StoryObj<CheckboxProps> = {
     },
     args: {
         children: 'Checkbox',
+        variant: 'primary',
+        isChecked: false,
+        isDisabled: false,
+        labelAlignment: 'right',
         ...framePropsStory.args,
     },
 
-    argTypes: framePropsStory.argTypes,
+    argTypes: {
+        variant: {
+            control: {
+                type: 'radio',
+            },
+            options: ['primary', 'warning', 'destructive'],
+        },
+        labelAlignment: {
+            control: {
+                type: 'radio',
+            },
+            options: ['left', 'right'],
+        },
+        ...framePropsStory.argTypes,
+    },
 };
diff --git a/packages/components/src/components/form/Checkbox/Checkbox.tsx b/packages/components/src/components/form/Checkbox/Checkbox.tsx
@@ -92,17 +92,22 @@ export const CheckContainer = styled.div<{ $variant: CheckboxVariant }>`
         background 0.1s,
         box-shadow 0.1s ease-out;
 
-    input:checked + && {
+    input:checked + & {
         background: ${({ theme, $variant }) => theme[variantStyles[$variant].backgroundChecked]};
         border-color: ${({ theme, $variant }) => theme[variantStyles[$variant].borderChecked]};
     }
 
-    input:disabled:not(:checked) + && {
+    input:disabled + & {
+        cursor: not-allowed;
+        pointer-events: auto;
+    }
+
+    input:disabled:not(:checked) + & {
         background: ${({ theme, $variant }) => theme[variantStyles[$variant].backgroundDisabled]};
         border-color: ${({ theme, $variant }) => theme[variantStyles[$variant].borderDisabled]};
     }
 
-    input:disabled:checked + && {
+    input:disabled:checked + & {
         background: ${({ theme, $variant }) =>
             theme[variantStyles[$variant].backgroundDisabledChecked]};
         border-color: ${({ theme, $variant }) =>
@@ -160,7 +165,7 @@ export type CheckboxProps = {
 export const Checkbox = ({
     variant = 'primary',
     isChecked,
-    isDisabled,
+    isDisabled = false,
     labelAlignment = 'right',
     onClick,
     'data-test': dataTest,
@@ -171,7 +176,10 @@ export const Checkbox = ({
     const theme = useTheme();
 
     const handleKeyUp = (event: KeyboardEvent<HTMLElement>) => {
-        if (event.code === KEYBOARD_CODE.SPACE || event.code === KEYBOARD_CODE.ENTER) {
+        if (
+            !isDisabled &&
+            (event.code === KEYBOARD_CODE.SPACE || event.code === KEYBOARD_CODE.ENTER)
+        ) {
             onClick(event);
         }
     };
@@ -184,7 +192,7 @@ export const Checkbox = ({
         <Container
             $isDisabled={isDisabled}
             $labelAlignment={labelAlignment}
-            onClick={onClick}
+            onClick={isDisabled ? undefined : onClick}
             onKeyUp={handleKeyUp}
             data-test={dataTest}
             className={className}

diff --git a/packages/components/src/components/form/Input/Input.stories.tsx b/packages/components/src/components/form/Input/Input.stories.tsx
@@ -9,34 +9,42 @@ const meta: Meta = {
     args: {
         value: 'Input',
         label: 'Label',
-        bottomText: '',
         isDisabled: false,
+        size: 'large',
         inputState: null,
-        variant: null,
+        innerAddonAlign: 'right',
+        hasBottomPadding: true,
     },
     argTypes: {
-        labelRight: {
-            type: 'string',
+        bottomText: { control: 'text' },
+        labelHoverRight: { control: 'text' },
+        labelLeft: { control: 'text' },
+        labelRight: { control: 'text' },
+        innerAddon: { control: 'text' },
+        placeholder: { control: 'text' },
+        size: {
+            control: {
+                type: 'radio',
+            },
+            options: ['large', 'small'],
         },
-        placeholder: {
-            type: 'string',
+        inputState: {
+            control: {
+                type: 'radio',
+            },
+            options: [null, 'warning', 'error'],
         },
-        state: {
+        innerAddonAlign: {
             control: {
-                options: {
-                    'None (default)': null,
-                    Success: 'success',
-                    Warning: 'warning',
-                    Error: 'error',
-                },
                 type: 'radio',
             },
+            options: ['right', 'left'],
         },
-        variant: {
+        showClearButton: {
             control: {
-                options: { 'Large (default)': null, Small: 'small' },
                 type: 'radio',
             },
+            options: [null, 'hover', 'always'],
         },
     },
 } as Meta;

diff --git a/packages/components/src/components/form/Input/Input.tsx b/packages/components/src/components/form/Input/Input.tsx
@@ -43,6 +43,11 @@ const StyledInput = styled.input<StyledInputProps & { $isWithLabel: boolean }>`
     height: ${({ $size }) => `${INPUT_HEIGHTS[$size as InputSize]}px`};
     ${baseInputStyle}
     ${({ $size }) => $size === 'small' && typography.hint};
+
+    &:disabled {
+        pointer-events: auto;
+        cursor: not-allowed;
+    }
 `;
 
 const InputWrapper = styled.div`

diff --git a/packages/components/src/components/form/Radio/Radio.stories.tsx b/packages/components/src/components/form/Radio/Radio.stories.tsx
@@ -32,7 +32,26 @@ export const RadioButton: StoryObj<RadioProps> = {
             </RadioComponent>
         );
     },
-    args: { children: 'RadioButton' },
+    args: {
+        children: 'RadioButton',
+        variant: 'primary',
+        isChecked: false,
+        isDisabled: false,
+    },
+    argTypes: {
+        variant: {
+            control: {
+                type: 'radio',
+            },
+            options: ['primary', 'warning', 'destructive'],
+        },
+        labelAlignment: {
+            control: {
+                type: 'radio',
+            },
+            options: [null, 'left', 'right'],
+        },
+    },
 };
 
 export const RadioButtonGroup: StoryObj = {

diff --git a/packages/components/src/components/form/Radio/Radio.tsx b/packages/components/src/components/form/Radio/Radio.tsx
@@ -54,7 +54,7 @@ const RadioIcon = styled(CheckContainer)`
         transition: background 0.1s;
     }
 
-    input:checked + && {
+    input:checked + & {
         background: ${({ theme }) => theme.backgroundSurfaceElevation0};
         border-color: ${({ theme, $variant }) => theme[radioVariantStyles[$variant].borderChecked]};
 
@@ -64,7 +64,11 @@ const RadioIcon = styled(CheckContainer)`
         }
     }
 
-    input:disabled:not(:checked) + && {
+    input:disabled + & {
+        cursor: not-allowed;
+    }
+
+    input:disabled:not(:checked) + & {
         background: ${({ theme }) => theme.backgroundSurfaceElevation0};
         border-color: ${({ theme, $variant }) => theme[variantStyles[$variant].borderDisabled]};
 
@@ -73,7 +77,7 @@ const RadioIcon = styled(CheckContainer)`
         }
     }
 
-    input:disabled:checked + && {
+    input:disabled:checked + & {
         background: transparent;
         border-color: ${({ theme, $variant }) =>
             theme[radioVariantStyles[$variant].borderDisabledChecked]};
@@ -84,15 +88,13 @@ const RadioIcon = styled(CheckContainer)`
         }
     }
 
-    ${/* sc-selector */ Container}:hover input:not(:disabled):not(:checked) + && {
+    ${/* sc-selector */ Container}:hover input:not(:disabled):not(:checked) + & {
         &::after {
             background: ${({ theme, $variant }) => theme[variantStyles[$variant].backgroundHover]};
         }
     }
 
-    &&& {
-        ${getFocusShadowStyle()}
-    }
+    ${getFocusShadowStyle()}
 `;
 
 export interface RadioProps {
@@ -109,20 +111,23 @@ export const Radio = ({
     variant = 'primary',
     isChecked,
     labelAlignment,
-    isDisabled,
+    isDisabled = false,
     onClick,
     'data-test': dataTest,
     children,
 }: RadioProps) => {
     const handleKeyUp = (event: KeyboardEvent<HTMLElement>) => {
-        if (event.code === KEYBOARD_CODE.SPACE || event.code === KEYBOARD_CODE.ENTER) {
+        if (
+            !isDisabled &&
+            (event.code === KEYBOARD_CODE.SPACE || event.code === KEYBOARD_CODE.ENTER)
+        ) {
             onClick(event);
         }
     };
 
     return (
         <Container
-            onClick={onClick}
+            onClick={isDisabled ? undefined : onClick}
             onKeyUp={handleKeyUp}
             $isDisabled={isDisabled}
             $labelAlignment={labelAlignment}