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

Author: hstastna

packages/components/src/components/AutoScalingInput/AutoScalingInput.stories.tsx

@@ -1,49 +1,37 @@
-import styled from 'styled-components';
-import { AutoScalingInput as Input } from './AutoScalingInput';
-import { Meta } from '@storybook/react';
-
-const Wrapper = styled.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-`;
-
-const BorderAutoScalingInput = styled(Input)`
-    padding: 1px 5px;
-    border-radius: 3px;
-    border-style: solid;
-    border-width: 1px;
-`;
-
-const BorderlessAutoScalingInput = styled(Input)`
-    padding: 1px 5px;
-    border-style: solid;
-    border-width: 0;
-    background-color: #ccc;
-`;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { AutoScalingInput as AutoScalingInputComponent, Props } from './AutoScalingInput';
+import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta = {
     title: 'Form/AutoScalingInput',
+    component: AutoScalingInputComponent,
 };
 export default meta;
 
-export const AutoScalingInput = {
-    render: () => (
-        <>
-            <Wrapper>
-                <div>Border</div>
-                <BorderAutoScalingInput minWidth={130} />
-                <BorderAutoScalingInput
-                    minWidth={120}
-                    placeholder="Chancellor on the Brink of Second Bailout for Banks"
-                />
-                <div>Borderless</div>
-                <BorderlessAutoScalingInput minWidth={130} />
-                <BorderlessAutoScalingInput
-                    minWidth={120}
-                    placeholder="Chancellor on the Brink of Second Bailout for Banks"
-                />
-            </Wrapper>
-        </>
-    ),
+export const AutoScalingInput: StoryObj<
+    ForwardRefExoticComponent<Omit<Props, 'ref'> & RefAttributes<HTMLInputElement>>
+> = {
+    render: props => <AutoScalingInputComponent {...props} />,
+    args: {
+        value: undefined,
+        minWidth: 120,
+        placeholder: 'Chancellor on the Brink of Second Bailout for Banks',
+        disabled: false,
+    },
+    argTypes: {
+        value: {
+            control: { type: 'text' },
+        },
+        minWidth: {
+            control: { type: 'number' },
+        },
+        placeholder: {
+            control: { type: 'text' },
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
 };

packages/components/src/components/AutoScalingInput/AutoScalingInput.tsx

@@ -43,11 +43,18 @@ const createHandleOnChangeAndApplyNewWidth =
         onChange?.(event);
     };
 
-interface Props
+export interface Props
     extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     minWidth: number;
 }
 
+const StyledInput = styled.input`
+    &:disabled {
+        pointer-events: auto;
+        cursor: not-allowed;
+    }
+`;
+
 /**
  * TODO: This is Labeling Input and this maybe consolidated with `withEditable`
  */
@@ -104,7 +111,7 @@ export const AutoScalingInput = forwardRef<HTMLInputElement, Props>(
                     value={props.placeholder}
                     readOnly
                 />
-                <input
+                <StyledInput
                     {...props}
                     ref={innerRef}
                     type="text"

packages/components/src/components/AutoScalingInput/AutoScalingInputExamples.stories.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { AutoScalingInput as Input } from './AutoScalingInput';
+import { Meta } from '@storybook/react';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+`;
+
+const BorderAutoScalingInput = styled(Input)`
+    padding: 1px 5px;
+    border-radius: 3px;
+    border-style: solid;
+    border-width: 1px;
+`;
+
+const BorderlessAutoScalingInput = styled(Input)`
+    padding: 1px 5px;
+    border-style: solid;
+    border-width: 0;
+    background-color: #ccc;
+`;
+
+const meta: Meta = {
+    title: 'Form/AutoScalingInput',
+};
+export default meta;
+
+export const AutoScalingInputExamples = {
+    render: () => (
+        <>
+            <Wrapper>
+                <div>Border</div>
+                <BorderAutoScalingInput minWidth={130} />
+                <BorderAutoScalingInput
+                    minWidth={120}
+                    placeholder="Chancellor on the Brink of Second Bailout for Banks"
+                />
+                <div>Borderless</div>
+                <BorderlessAutoScalingInput minWidth={130} />
+                <BorderlessAutoScalingInput
+                    minWidth={120}
+                    placeholder="Chancellor on the Brink of Second Bailout for Banks"
+                />
+            </Wrapper>
+        </>
+    ),
+};

packages/components/src/components/buttons/Button/Button.stories.tsx

@@ -22,6 +22,13 @@ export const Button: StoryObj<ButtonProps> = {
         ...framePropsStory.args,
     },
     argTypes: {
+        children: {
+            table: {
+                type: {
+                    summary: 'ReactNode',
+                },
+            },
+        },
         variant: {
             control: {
                 type: 'radio',
@@ -34,20 +41,44 @@ export const Button: StoryObj<ButtonProps> = {
             },
             options: ['large', 'medium', 'small', 'tiny'],
         },
+        isDisabled: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        isLoading: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        isFullWidth: {
+            control: {
+                type: 'boolean',
+            },
+        },
         icon: {
-            options: variables.ICONS,
+            options: {
+                'No icon': null,
+                ...variables.ICONS.reduce((acc, icon) => ({ ...acc, [icon]: icon }), {}),
+            },
             control: {
                 type: 'select',
             },
         },
-        iconSize: { control: 'number' },
+        iconSize: {
+            control: {
+                type: 'number',
+            },
+        },
         iconAlignment: {
             control: {
                 type: 'radio',
             },
             options: ['left', 'right'],
         },
-        title: { control: 'text' },
+        title: {
+            control: { type: 'text' },
+        },
         ...framePropsStory.argTypes,
     },
 };

packages/components/src/components/form/Range/Range.stories.tsx

@@ -16,18 +16,49 @@ export const Range: StoryObj<RangeProps> = {
         return <RangeComponent {...args} onChange={e => updateArgs({ value: e.target.value })} />;
     },
     args: {
-        max: 100,
-        min: 0,
-        value: 21,
+        disabled: false,
         labels: [
             { component: '0', value: 0 },
             { component: '50', value: 50 },
             { component: '100', value: 100 },
         ],
+        max: 100,
+        min: 0,
+        value: 21,
     },
     argTypes: {
         disabled: {
-            control: 'boolean',
+            control: {
+                type: 'boolean',
+            },
+        },
+        labels: {
+            control: {
+                type: 'array',
+            },
+            table: {
+                type: {
+                    summary: 'Array<{ component: string; value: number }>',
+                },
+            },
+        },
+        max: {
+            control: {
+                type: 'number',
+            },
+        },
+        min: {
+            control: {
+                type: 'number',
+            },
+        },
+        value: {
+            control: {
+                type: 'number',
+            },
+        },
+        step: {
+            control: { type: 'text' },
         },
         className: {
             control: false,

packages/components/src/components/form/Range/Range.tsx

@@ -83,6 +83,11 @@ const Input = styled.input<{ $trackStyle?: CSSObject; disabled?: boolean }>`
             ${focusStyle}
         }
     }
+
+    &:disabled {
+        pointer-events: auto;
+        cursor: not-allowed;
+    }
 `;
 
 const Label = styled.div<{ disabled?: boolean; $width?: number }>`
@@ -123,7 +128,7 @@ export interface RangeProps {
 
 export const Range = ({
     className,
-    disabled,
+    disabled = false,
     labels,
     onLabelClick,
     trackStyle,

packages/components/src/components/form/Select/Select.stories.tsx

@@ -29,8 +29,26 @@ export const Select: StoryObj<SelectProps> = {
 
         return <SelectComponent {...args} value={option} onChange={setOption} options={options} />;
     },
+    args: {
+        label: 'Label',
+        isClean: false,
+        isDisabled: false,
+        isSearchable: false,
+        hasBottomPadding: true,
+        size: 'large',
+        minValueWidth: 'initial',
+        menuIsOpen: undefined,
+        useKeyPressScroll: undefined,
+    },
     argTypes: {
-        isSearchable: {
+        label: {
+            table: {
+                type: {
+                    summary: 'ReactNode',
+                },
+            },
+        },
+        isClean: {
             control: {
                 type: 'boolean',
             },
@@ -40,23 +58,46 @@ export const Select: StoryObj<SelectProps> = {
                 type: 'boolean',
             },
         },
+        isSearchable: {
+            control: {
+                type: 'boolean',
+            },
+        },
         bottomText: {
             control: { type: 'text' },
         },
+        hasBottomPadding: {
+            control: {
+                type: 'boolean',
+            },
+        },
         size: {
             control: {
-                options: { 'Large (default)': null, Small: 'small' },
                 type: 'radio',
             },
+            options: ['large', 'small'],
         },
-        label: {
+        minValueWidth: {
             control: { type: 'text' },
         },
+        menuIsOpen: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        useKeyPressScroll: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        inputState: {
+            control: {
+                type: 'radio',
+            },
+            options: [null, 'warning', 'error'],
+        },
         placeholder: {
             control: { type: 'text' },
         },
     },
-    args: {
-        label: 'Label',
-    },
 };

packages/components/src/components/form/Select/Select.tsx

@@ -217,6 +217,8 @@ const Wrapper = styled.div<WrapperProps>`
         border: none;
         z-index: ${zIndices.base};
     }
+
+    ${({ $isDisabled }) => $isDisabled && `pointer-events: auto; cursor: not-allowed;`};
 `;
 
 const SelectLabel = styled(Label)`
@@ -272,7 +274,7 @@ export const Select = ({
     components,
     onChange,
     placeholder,
-    isDisabled,
+    isDisabled = false,
     'data-test': dataTest,
     ...props
 }: SelectProps) => {