@lumx/react 3.18.1 → 3.18.2-alpha.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.18.1",
-        "@lumx/icons": "^3.18.1",
+        "@lumx/core": "^3.18.2-alpha.1",
+        "@lumx/icons": "^3.18.2-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.18.1"
+    "version": "3.18.2-alpha.1"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -11,6 +11,8 @@ import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+
 /**
  * Defines the props of the component.
  */
@@ -203,6 +205,7 @@ const DEFAULT_PROPS: Partial<AutocompleteProps> = {
  */
 export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme();
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         anchorToInput = DEFAULT_PROPS.anchorToInput,
         children,
@@ -211,7 +214,6 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
         closeOnClick = DEFAULT_PROPS.closeOnClick,
         closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
         closeOnEscape = DEFAULT_PROPS.closeOnEscape,
-        disabled,
         error,
         fitToAnchorWidth,
         hasError,
@@ -219,7 +221,6 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
         icon,
         inputRef,
         clearButtonProps,
-        isDisabled = disabled,
         isRequired,
         isOpen,
         isValid,
@@ -239,7 +240,7 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
         textFieldProps = {},
         focusAnchorOnClose,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const inputAnchorRef = useRef<HTMLElement>(null);
     const textFieldRef = useRef(null);
     useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
@@ -255,7 +256,7 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
                 icon={icon}
                 inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}
                 clearButtonProps={clearButtonProps}
-                isDisabled={isDisabled}
+                {...disabledStateProps}
                 isRequired={isRequired}
                 isValid={isValid}
                 label={label}

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -9,6 +9,8 @@ import { getRootClassName } from '@lumx/react/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+
 /**
  * Defines the props of the component.
  */
@@ -69,6 +71,7 @@ const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
  */
 export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme();
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         anchorToInput,
         children,
@@ -84,7 +87,6 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
         icon,
         inputRef,
         clearButtonProps,
-        isDisabled,
         isRequired,
         isOpen,
         isValid,
@@ -107,7 +109,7 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
         value,
         values = DEFAULT_PROPS.values,
         ...forwardedProps
-    } = props;
+    } = otherProps;
 
     return (
         <Autocomplete
@@ -127,7 +129,7 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
             icon={icon}
             inputRef={inputRef}
             chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}
-            isDisabled={isDisabled}
+            {...disabledStateProps}
             isRequired={isRequired}
             clearButtonProps={clearButtonProps}
             isValid={isValid}

package/src/components/button/Button.stories.tsx

@@ -98,6 +98,7 @@ export const LinkButton = {
                 cols: {
                     Default: {},
                     Disabled: { isDisabled: true },
+                    AriaDisabled: { 'aria-disabled': true },
                 },
             },
         }),

package/src/components/button/Button.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { Emphasis, Icon } from '@lumx/react';
 
@@ -63,11 +64,49 @@ describe(`<${Button.displayName}>`, () => {
             expect(buttonWrapper).toBeInTheDocument();
             expect(button).toBe(within(buttonWrapper as any).queryByRole('button', { name: label }));
         });
+    });
+
+    describe('Disabled state', () => {
+        it('should render disabled button', async () => {
+            const onClick = jest.fn();
+            const { button } = setup({ children: 'Label', disabled: true, onClick });
+            expect(button).toHaveAttribute('disabled');
+            await userEvent.click(button);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render disabled link', async () => {
+            const onClick = jest.fn();
+            const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(button).toHaveAttribute('disabled');
+            await userEvent.click(button);
+            expect(onClick).not.toHaveBeenCalled();
+        });
 
-        it('should prevent click when aria-disabled', () => {
+        it('should render aria-disabled button', async () => {
             const onClick = jest.fn();
             const { button } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(button.onclick).toBeFalsy();
+            expect(button).toHaveAttribute('aria-disabled');
+            await userEvent.click(button);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled link', async () => {
+            const onClick = jest.fn();
+            const { button } = setup({
+                children: 'Label',
+                'aria-disabled': true,
+                href: 'https://example.com',
+                onClick,
+            });
+            expect(button).toHaveAccessibleName('Label');
+            // Disabled link do not exist so we fallback to a button
+            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(button);
+            expect(onClick).not.toHaveBeenCalled();
         });
     });
 

package/src/components/button/ButtonRoot.tsx

@@ -10,6 +10,8 @@ import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
@@ -20,8 +22,9 @@ export type ButtonSize = Extract<Size, 's' | 'm'>;
 
 export interface BaseButtonProps
     extends GenericProps,
-        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label' | 'aria-disabled'>,
-        HasTheme {
+        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
+        HasTheme,
+        HasAriaDisabled {
     /** Color variant. */
     color?: ColorPalette;
     /** Emphasis variant. */
@@ -96,17 +99,15 @@ const renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {
  * @return React element.
  */
 export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         'aria-label': ariaLabel,
         children,
         className,
         color,
-        disabled,
         emphasis,
         hasBackground,
         href,
-        isDisabled = disabled,
-        'aria-disabled': ariaDisabled = isDisabled,
         isSelected,
         isActive,
         isFocused,
@@ -120,7 +121,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         type = 'button',
         fullWidth,
         ...forwardedProps
-    } = props;
+    } = otherProps;
 
     const adaptedColor =
         color ||
@@ -138,7 +139,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
             color: adaptedColor,
             emphasis,
             isSelected,
-            isDisabled,
+            isDisabled: isAnyDisabled,
             isActive,
             isFocused,
             isHovered,
@@ -156,7 +157,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
      *
      * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
      */
-    if ((linkAs || !isEmpty(props.href)) && !isDisabled) {
+    if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
         return renderLink(
             {
                 linkAs,
@@ -173,9 +174,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
     return (
         <button
             {...forwardedProps}
-            {...(ariaDisabled ? { onClick: undefined } : undefined)}
-            disabled={isDisabled}
-            aria-disabled={ariaDisabled}
+            {...disabledStateProps}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}

package/src/components/checkbox/Checkbox.stories.tsx

@@ -1,6 +1,7 @@
 import { Checkbox } from '@lumx/react';
 import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
 export default {
     title: 'LumX components/checkbox/Checkbox',
@@ -47,7 +48,17 @@ export const IntermediateState = {
  */
 export const Disabled = {
     args: {
-        ...LabelAndHelper.args,
-        isDisabled: true,
+        label: 'Checkbox label',
+        helper: 'Checkbox is disabled because...',
     },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: {
+                    disabled: { disabled: true },
+                    'aria-disabled': { 'aria-disabled': true },
+                },
+            },
+        }),
+    ],
 };

package/src/components/checkbox/Checkbox.test.tsx

@@ -112,6 +112,35 @@ describe(`<${Checkbox.displayName}>`, () => {
         });
     });
 
+    describe('Disabled state', () => {
+        it('should be disabled with isDisabled', async () => {
+            const onChange = jest.fn();
+            const { checkbox, input } = setup({ isDisabled: true, onChange });
+
+            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
+            expect(input).toBeDisabled();
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should be disabled with aria-disabled', async () => {
+            const onChange = jest.fn();
+            const { checkbox, input } = setup({ 'aria-disabled': true, onChange });
+
+            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
+            // Note: input is not disabled (so it can be focused) but it's readOnly.
+            expect(input).not.toBeDisabled();
+            expect(input).toHaveAttribute('aria-disabled', 'true');
+            expect(input).toHaveAttribute('readOnly');
+
+            // Should not trigger onChange.
+            await userEvent.click(input);
+            expect(onChange).not.toHaveBeenCalled();
+        });
+    });
+
     // Common tests suite.
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,

package/src/components/checkbox/Checkbox.tsx

@@ -11,6 +11,8 @@ import { useId } from '@lumx/react/hooks/useId';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 /**
  * Intermediate state of checkbox.
@@ -20,7 +22,7 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Defines the props of the component.
  */
-export interface CheckboxProps extends GenericProps, HasTheme {
+export interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Helper text. */
     helper?: string;
     /** Native input id property. */
@@ -66,16 +68,15 @@ const DEFAULT_PROPS: Partial<CheckboxProps> = {};
  * @return React element.
  */
 export const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         checked,
         className,
-        disabled,
         helper,
         id,
         inputRef,
         isChecked = checked,
-        isDisabled = disabled,
         label,
         name,
         onChange,
@@ -83,7 +84,7 @@ export const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) =
         value,
         inputProps = {},
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const localInputRef = React.useRef<HTMLInputElement>(null);
     const generatedInputId = useId();
     const inputId = id || generatedInputId;
@@ -110,7 +111,7 @@ export const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) =
                 handleBasicClasses({
                     // Whether state is intermediate class name will "-checked"
                     isChecked: intermediateState ? true : isChecked,
-                    isDisabled,
+                    isDisabled: isAnyDisabled,
                     isUnchecked: !isChecked,
                     prefix: CLASSNAME,
                     theme,
@@ -123,14 +124,14 @@ export const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) =
                     type="checkbox"
                     id={inputId}
                     className={`${CLASSNAME}__input-native`}
-                    disabled={isDisabled}
-                    tabIndex={isDisabled ? -1 : 0}
+                    {...disabledStateProps}
                     name={name}
                     value={value}
                     checked={isChecked}
                     onChange={handleChange}
                     aria-describedby={helper ? `${inputId}-helper` : undefined}
                     aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}
+                    readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}
                     {...inputProps}
                 />
 

package/src/components/chip/Chip.stories.tsx

@@ -147,3 +147,20 @@ export const Theming = {
         }),
     ],
 };
+
+/**
+ * Test Chip disabled states
+ */
+export const Disabled = {
+    args: {
+        children: 'Chip label',
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { disabled: { disabled: true }, 'aria-disabled': { 'aria-disabled': true } },
+                cols: { button: { onClick: () => {} }, link: { href: 'https://example.com' } },
+            },
+        }),
+    ],
+};

package/src/components/chip/Chip.test.tsx

@@ -185,6 +185,50 @@ describe('<Chip />', () => {
         });
     });
 
+    describe('Disabled state', () => {
+        it('should render disabled chip button', async () => {
+            const onClick = jest.fn();
+            const { chip } = setup({ children: 'Label', isDisabled: true, onClick });
+            expect(chip).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(chip);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render disabled chip link', async () => {
+            const onClick = jest.fn();
+            const { chip } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
+            // Disabled link should not have an href.
+            expect(chip).not.toHaveAttribute('href');
+            expect(chip).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(chip);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled chip button', async () => {
+            const onClick = jest.fn();
+            const { chip } = setup({ children: 'Label', 'aria-disabled': true, onClick });
+            expect(chip).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(chip);
+            // userEvent doesn't dispatch click on aria-disabled elements, but we check just in case.
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should render aria-disabled chip link', async () => {
+            const onClick = jest.fn();
+            const { chip } = setup({
+                children: 'Label',
+                'aria-disabled': true,
+                href: 'https://example.com',
+                onClick,
+            });
+            expect(chip).toHaveAttribute('href', 'https://example.com');
+            expect(chip).toHaveAttribute('aria-disabled', 'true');
+            await userEvent.click(chip);
+            // userEvent doesn't dispatch click on aria-disabled elements, but we check just in case.
+            expect(onClick).not.toHaveBeenCalled();
+        });
+    });
+
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,
         forwardClassName: 'chip',

package/src/components/chip/Chip.tsx

@@ -11,6 +11,8 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
 
 /**
  * Chip sizes.
@@ -20,7 +22,7 @@ type ChipSize = Extract<Size, 's' | 'm'>;
 /**
  * Defines the props of the component.
  */
-export interface ChipProps extends GenericProps, HasTheme {
+export interface ChipProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** A component to be rendered after the content. */
     after?: ReactNode;
     /** A component to be rendered before the content. */
@@ -71,15 +73,14 @@ const DEFAULT_PROPS: Partial<ChipProps> = {
  */
 export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
+    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         after,
         before,
         children,
         className,
         color,
-        disabled,
         isClickable: propIsClickable,
-        isDisabled = disabled,
         isHighlighted,
         isSelected,
         onAfterClick,
@@ -90,10 +91,10 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
         href,
         onKeyDown,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const hasAfterClick = isFunction(onAfterClick);
     const hasBeforeClick = isFunction(onBeforeClick);
-    const hasOnClick = isFunction(onClick);
+    const hasOnClick = isFunction(props.onClick);
     const isButton = hasOnClick && !href;
     const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
@@ -113,16 +114,16 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <a
             role={isButton ? 'button' : undefined}
-            tabIndex={isClickable ? 0 : undefined}
+            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : undefined}
             {...forwardedProps}
-            href={href}
+            href={!disabledStateProps.disabled ? href : undefined}
             ref={ref}
             className={classNames(
                 className,
                 handleBasicClasses({
                     clickable: isClickable,
                     color: chipColor,
-                    isDisabled,
+                    isDisabled: isAnyDisabled,
                     hasAfter: Boolean(after),
                     hasBefore: Boolean(before),
                     highlighted: Boolean(isHighlighted),
@@ -132,7 +133,7 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
                     unselected: Boolean(!isSelected),
                 }),
             )}
-            aria-disabled={(isClickable && isDisabled) || undefined}
+            aria-disabled={(isClickable && isAnyDisabled) || undefined}
             onClick={hasOnClick ? onClick : undefined}
             onKeyDown={handleKeyDown}
         >

package/src/components/date-picker/DatePickerField.stories.tsx

@@ -2,6 +2,7 @@ import { DatePickerField } from '@lumx/react';
 import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
 import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
 export default {
     title: 'LumX components/date-picker/DatePickerField',
@@ -80,3 +81,20 @@ export const DefaultMonth = {
         defaultMonth: new Date('2019-07-14'),
     },
 };
+
+/**
+ * Disabled states
+ */
+export const Disabled = {
+    args: DefaultValue.args,
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: {
+                    disabled: { disabled: true },
+                    'aria-disabled': { 'aria-disabled': true },
+                },
+            },
+        }),
+    ],
+};

package/src/components/date-picker/DatePickerField.tsx

@@ -5,6 +5,7 @@ import { GenericProps } from '@lumx/react/utils/type';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 
 /**
  * Defines the props of the component.
@@ -42,10 +43,9 @@ const COMPONENT_NAME = 'DatePickerField';
  * @return React element.
  */
 export const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>((props, ref) => {
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         defaultMonth,
-        disabled,
-        isDisabled = disabled,
         locale = getCurrentLocale(),
         maxDate,
         minDate,
@@ -55,7 +55,7 @@ export const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>(
         previousButtonProps,
         value,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const anchorRef = useRef(null);
 
     const [isOpen, close, , toggleOpen] = useBooleanState(false);
@@ -101,7 +101,7 @@ export const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>(
                 onClick={toggleOpen}
                 onChange={onTextFieldChange}
                 onKeyPress={handleKeyboardNav}
-                isDisabled={isDisabled}
+                {...disabledStateProps}
                 readOnly
                 aria-haspopup="dialog"
             />

package/src/components/link/Link.stories.tsx

@@ -76,13 +76,15 @@ export const WithCustomizableTypography = {
 export const AllStates = {
     argTypes: {
         isDisabled: { control: false },
+        onClick: { action: true },
     },
     decorators: [
         withThemedBackground(),
         withCombinations({
             combinations: {
                 sections: {
-                    Default: {},
+                    Default: { href: '#' },
+                    'As button': {},
                     'with icon': {
                         children: ['Link', <Icon key="icon" icon={mdiEarth} />, 'with icon'],
                     },
@@ -91,6 +93,7 @@ export const AllStates = {
                     Default: {},
                     Disabled: { isDisabled: true },
                     Focused: { 'data-focus-visible-added': true },
+                    'ARIA Disabled': { 'aria-disabled': true },
                     Hovered: { 'data-lumx-hover': true },
                 },
                 rows: {