feat(suite): Add cursor: not-allowed to some components when disabled (…

…#12945) Add cursor: not-allowed for cursor to look nicer for the following components: - Textarea - IconButton - TextButton - TooltipButton Update the related storybooks, add missing controls.
trezor · Aug 11, 2024 · c66a65f · c66a65f
1 parent 20461f2
commit c66a65f
Show file tree

Hide file tree

Showing 8 changed files with 231 additions and 20 deletions.
diff --git a/packages/components/src/components/buttons/IconButton/IconButton.stories.tsx b/packages/components/src/components/buttons/IconButton/IconButton.stories.tsx
@@ -12,19 +12,50 @@ export const IconButton: StoryObj<IconButtonProps> = {
     args: {
         label: 'label',
         icon: 'ARROW_RIGHT_LONG',
+        variant: 'primary',
+        size: 'large',
+        isDisabled: false,
+        isLoading: false,
     },
     argTypes: {
         label: {
             type: 'string',
         },
-        bottomLabel: {
-            type: 'string',
-        },
         icon: {
             options: variables.ICONS,
             control: {
                 type: 'select',
             },
         },
+        bottomLabel: {
+            type: 'string',
+        },
+        variant: {
+            control: {
+                type: 'radio',
+            },
+            options: ['primary', 'secondary', 'tertiary', 'info', 'warning', 'destructive'],
+        },
+        size: {
+            control: {
+                type: 'radio',
+            },
+            options: ['large', 'medium', 'small', 'tiny'],
+        },
+        iconSize: {
+            control: {
+                type: 'number',
+            },
+        },
+        isDisabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        isLoading: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 };
diff --git a/packages/components/src/components/buttons/PinButton/PinButton.stories.tsx b/packages/components/src/components/buttons/PinButton/PinButton.stories.tsx
@@ -7,4 +7,22 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const PinButton: StoryObj<typeof PinButtonComponent> = {};
+export const PinButton: StoryObj<typeof PinButtonComponent> = {
+    args: {
+        'data-value': '1',
+    },
+    argTypes: {
+        'data-value': {
+            control: {
+                type: 'text',
+            },
+        },
+        onClick: {
+            table: {
+                type: {
+                    summary: 'React.MouseEventHandler<HTMLButtonElement> | undefined',
+                },
+            },
+        },
+    },
+};
diff --git a/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx b/packages/components/src/components/buttons/TextButton/TextButton.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { TextButton as TextButtonComponent, TextButtonProps } from './TextButton';
+import { variables } from '../../../config';
 
 const meta: Meta = {
     title: 'Buttons/TextButton',
@@ -10,5 +11,52 @@ export default meta;
 export const TextButton: StoryObj<TextButtonProps> = {
     args: {
         children: 'Button label',
+        iconAlignment: 'left',
+        size: 'large',
+        isDisabled: false,
+        isLoading: false,
+    },
+    argTypes: {
+        children: {
+            table: {
+                type: {
+                    summary: 'ReactNode',
+                },
+            },
+        },
+        icon: {
+            options: {
+                'No icon': null,
+                ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
+            },
+            control: {
+                type: 'select',
+            },
+        },
+        iconAlignment: {
+            control: {
+                type: 'radio',
+            },
+            options: ['left', 'right'],
+        },
+        size: {
+            control: {
+                type: 'radio',
+            },
+            options: ['large', 'medium', 'small', 'tiny'],
+        },
+        isDisabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        isLoading: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        title: {
+            control: { type: 'text' },
+        },
     },
 };
diff --git a/packages/components/src/components/buttons/TextButton/TextButton.tsx b/packages/components/src/components/buttons/TextButton/TextButton.tsx
@@ -17,7 +17,7 @@ const TextButtonContainer = styled.button<{
     flex-direction: ${({ $iconAlignment }) => $iconAlignment === 'right' && 'row-reverse'};
     gap: ${({ $hasIcon }) => $hasIcon && spacingsPx.xs};
     height: ${({ $size: size }) => (size === 'small' ? 22 : 26)}px;
-    padding: 4px;
+    padding: ${spacingsPx.xxs};
     border: 1px solid transparent;
     border-radius: ${borders.radii.xxs};
     background: none;
@@ -47,7 +47,7 @@ const TextButtonContainer = styled.button<{
 
     &:disabled {
         color: ${({ theme }) => theme.textDisabled};
-        cursor: default;
+        cursor: not-allowed;
 
         path {
             fill: ${({ theme }) => theme.iconDisabled};

diff --git a/packages/components/src/components/buttons/TooltipButton/TooltipButton.stories.tsx b/packages/components/src/components/buttons/TooltipButton/TooltipButton.stories.tsx
@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { TooltipButton as TooltipButtonComponent } from './TooltipButton';
+import { getFramePropsStory } from '../../common/frameProps';
+import { allowedButtonFrameProps } from '../Button/Button';
+import { variables } from '../../../config';
 
 const meta: Meta = {
     title: 'Buttons/TooltipButton',
@@ -10,7 +13,81 @@ export default meta;
 export const TooltipButton: StoryObj<typeof TooltipButtonComponent> = {
     args: {
         children: 'Button',
+        variant: 'primary',
+        size: 'medium',
         isDisabled: true,
+        isLoading: false,
+        isFullWidth: false,
+        iconAlignment: 'left',
+        title: 'Button title',
         tooltipContent: 'Example tooltip',
+        ...getFramePropsStory(allowedButtonFrameProps).args,
+    },
+    argTypes: {
+        children: {
+            table: {
+                type: {
+                    summary: 'ReactNode',
+                },
+            },
+        },
+        variant: {
+            control: {
+                type: 'radio',
+            },
+            options: ['primary', 'secondary', 'tertiary', 'info', 'warning', 'destructive'],
+        },
+        size: {
+            control: {
+                type: 'radio',
+            },
+            options: ['large', 'medium', 'small', 'tiny'],
+        },
+        isDisabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        isLoading: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        isFullWidth: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        icon: {
+            options: {
+                'No icon': null,
+                ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
+            },
+            control: {
+                type: 'select',
+            },
+        },
+        iconSize: {
+            control: {
+                type: 'number',
+            },
+        },
+        iconAlignment: {
+            control: {
+                type: 'radio',
+            },
+            options: ['left', 'right'],
+        },
+        title: {
+            control: { type: 'text' },
+        },
+        tooltipContent: {
+            table: {
+                type: {
+                    summary: 'ReactNode',
+                },
+            },
+        },
+        ...getFramePropsStory(allowedButtonFrameProps).argTypes,
     },
 };
diff --git a/packages/components/src/components/buttons/TooltipButton/TooltipButton.tsx b/packages/components/src/components/buttons/TooltipButton/TooltipButton.tsx
@@ -3,17 +3,17 @@ import styled, { useTheme } from 'styled-components';
 import { Icon } from '../../assets/Icon/Icon';
 import { Tooltip } from '../../Tooltip/Tooltip';
 import { Button, ButtonProps } from '../Button/Button';
+import { spacingsPx } from '@trezor/theme';
 
 const StyledButton = styled(Button)`
     position: relative;
-    padding-left: 32px;
-    padding-right: 32px;
+    padding-inline: ${spacingsPx.xxl};
 `;
 
 const InfoIcon = styled(Icon)`
     position: absolute;
-    top: 4px;
-    right: 4px;
+    top: ${spacingsPx.xxs};
+    right: ${spacingsPx.xxs};
 `;
 
 export interface TooltipButtonProps extends ButtonProps {
@@ -22,7 +22,7 @@ export interface TooltipButtonProps extends ButtonProps {
 
 export const TooltipButton = ({
     tooltipContent,
-    isDisabled,
+    isDisabled = false,
     children,
     ...buttonProps
 }: TooltipButtonProps) => {

diff --git a/packages/components/src/components/form/Textarea/Textarea.stories.tsx b/packages/components/src/components/form/Textarea/Textarea.stories.tsx
@@ -21,17 +21,24 @@ const Component = ({ ...args }) => {
 export const Textarea: StoryObj<TextareaProps> = {
     render: Component,
     args: {
+        isDisabled: false,
         label: 'Label',
         rows: 5,
         maxLength: 500,
         characterCount: true,
+        hasBottomPadding: true,
     },
     argTypes: {
+        isDisabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
         label: {
-            control: 'text',
+            control: { type: 'text' },
         },
         placeholder: {
-            control: 'text',
+            control: { type: 'text' },
         },
         rows: {
             control: {
@@ -41,23 +48,48 @@ export const Textarea: StoryObj<TextareaProps> = {
                 type: 'range',
             },
         },
+        maxLength: {
+            control: { type: 'number' },
+        },
         labelHoverRight: {
-            control: 'text',
+            control: { type: 'text' },
         },
         labelRight: {
-            control: 'text',
+            control: { type: 'text' },
         },
         bottomText: {
-            control: 'text',
+            control: { type: 'text' },
         },
         innerRef: {
-            control: false,
+            table: {
+                type: {
+                    summary: 'Ref<HTMLTextAreaElement>',
+                },
+            },
         },
         value: {
-            control: false,
+            control: { type: 'text' },
         },
         characterCount: {
-            control: 'boolean',
+            control: {
+                type: 'object',
+            },
+            table: {
+                type: {
+                    summary: 'boolean | { current: number | undefined; max: number }',
+                },
+            },
+        },
+        inputState: {
+            control: {
+                type: 'radio',
+            },
+            options: [null, 'warning', 'error'],
+        },
+        hasBottomPadding: {
+            control: {
+                type: 'boolean',
+            },
         },
     },
 };
diff --git a/packages/components/src/components/form/Textarea/Textarea.tsx b/packages/components/src/components/form/Textarea/Textarea.tsx
@@ -55,6 +55,11 @@ const StyledTextarea = styled.textarea<{ $inputState?: InputState; $elevation: E
     border: none;
     resize: none;
     white-space: pre-wrap;
+
+    &:disabled {
+        cursor: not-allowed;
+        pointer-events: auto;
+    }
 `;
 
 const TextareaLabel = styled(Label)`
@@ -91,7 +96,7 @@ export const Textarea = ({
     value,
     maxLength,
     labelHoverRight,
-    isDisabled,
+    isDisabled = false,
     innerRef,
     label,
     inputState,