@lumx/react 3.18.2-alpha.2 → 3.18.2-alpha.4

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.18.2-alpha.2",
-        "@lumx/icons": "^3.18.2-alpha.2",
+        "@lumx/core": "^3.18.2-alpha.4",
+        "@lumx/icons": "^3.18.2-alpha.4",
         "@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.2-alpha.2"
+    "version": "3.18.2-alpha.4"
 }

package/src/components/button/ButtonRoot.tsx

@@ -175,6 +175,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         <button
             {...forwardedProps}
             {...disabledStateProps}
+            aria-disabled={isAnyDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 
+import { DisabledStateProvider } from '@lumx/react/utils';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
 
 const setup = (props: Partial<ThumbnailProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<Thumbnail {...(props as any)} />, { wrapper });
+    const { container } = render(<Thumbnail {...(props as any)} />, { wrapper });
     const thumbnail = queryByClassName(document.body, CLASSNAME);
-    return { props, thumbnail };
+    return { props, thumbnail, container };
 };
 
 describe(`<${Thumbnail.displayName}>`, () => {
@@ -26,4 +27,40 @@ describe(`<${Thumbnail.displayName}>`, () => {
             defaultTheme: 'light',
         },
     });
+
+    describe('disabled state', () => {
+        it('should not be clickable when disabled from context', () => {
+            const onClick = jest.fn();
+            const { thumbnail, container } = setup(
+                { onClick, 'aria-label': 'thumbnail' },
+                {
+                    wrapper: ({ children }) => (
+                        <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+                    ),
+                },
+            );
+
+            // Should render a div instead of a button.
+            expect(container.querySelector('button')).toBe(null);
+            expect(thumbnail?.tagName).toBe('DIV');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('should have no href when disabled from context', () => {
+            const { container, thumbnail } = setup(
+                { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
+                {
+                    wrapper: ({ children }) => (
+                        <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+                    ),
+                },
+            );
+
+            // Should render a div instead of a link.
+            expect(container.querySelector('a')).toBe(null);
+            expect(thumbnail?.tagName).toBe('DIV');
+        });
+    });
 });

package/src/components/thumbnail/Thumbnail.tsx

@@ -21,6 +21,7 @@ import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPoi
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -99,6 +100,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
+    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -125,7 +127,7 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
         linkProps,
         linkAs,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     const [imgElement, setImgElement] = useState<HTMLImageElement>();
 
     // Image loading state.
@@ -150,14 +152,14 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
 
     const isLink = Boolean(linkProps?.href || linkAs);
     const isButton = !!forwardedProps.onClick;
-    const isClickable = isButton || isLink;
+    const isClickable = !isAnyDisabled && (isButton || isLink);
 
     let Wrapper: any = 'div';
     const wrapperProps = { ...forwardedProps };
-    if (isLink) {
+    if (!isAnyDisabled && isLink) {
         Wrapper = linkAs || 'a';
         Object.assign(wrapperProps, linkProps);
-    } else if (isButton) {
+    } else if (!isAnyDisabled && isButton) {
         Wrapper = 'button';
         wrapperProps.type = forwardedProps.type || 'button';
         wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;

package/src/components/uploader/Uploader.stories.tsx

@@ -8,6 +8,8 @@ import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
 
 import { AspectRatio, GridColumn, Size, Uploader, UploaderVariant } from '@lumx/react';
 import { mdiTextBoxPlus } from '@lumx/icons';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
 export default {
     title: 'LumX components/uploader/Uploader',
@@ -15,11 +17,13 @@ export default {
     argTypes: {
         onClick: { action: true },
         icon: iconArgType,
+        aspectRatio: getSelectArgType(AspectRatio),
     },
 };
 
 const UPLOADER_VARIANTS = [UploaderVariant.square, UploaderVariant.rounded, UploaderVariant.circle];
 const UPLOADER_SIZES = [Size.xl, Size.xxl];
+const ASPECT_RATIOS = [AspectRatio.wide, AspectRatio.horizontal, AspectRatio.vertical, AspectRatio.square];
 
 export const WithLabel = {
     args: { label: 'Pick a file' },
@@ -71,13 +75,18 @@ export const Variants = {
         withCombinations({
             combinations: {
                 rows: { key: 'variant', options: UPLOADER_VARIANTS },
+                cols: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                    'Aria Disabled': { 'aria-disabled': true },
+                },
                 sections: {
                     Button: {},
                     'File input': { fileInputProps: {} },
                 },
             },
         }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 300 }, GridColumn),
+        withWrapper({ maxColumns: 2, itemMinWidth: 470 }, GridColumn),
     ],
 };
 
@@ -88,13 +97,13 @@ export const RatioAndSize = {
         withCombinations({
             combinations: {
                 cols: { key: 'size', options: UPLOADER_SIZES },
-                rows: { key: 'aspectRatio', options: Object.values(AspectRatio) },
+                rows: { key: 'aspectRatio', options: withUndefined(ASPECT_RATIOS) },
                 sections: {
                     Button: {},
                     'File input': { fileInputProps: {} },
                 },
             },
         }),
-        withWrapper({ maxColumns: 2, itemMinWidth: 200 }, GridColumn),
+        withWrapper({ maxColumns: 2, itemMinWidth: 470 }, GridColumn),
     ],
 };

package/src/components/uploader/Uploader.test.tsx

@@ -22,8 +22,9 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
     const uploader = getByClassName(document.body, CLASSNAME);
     const label = queryByClassName(uploader, `${CLASSNAME}__label`);
     const icon = queryByClassName(uploader, `${CLASSNAME}__icon`);
+    const input = queryByClassName(uploader, `${CLASSNAME}__input`);
 
-    return { props, uploader, label, icon };
+    return { props, uploader, label, icon, input };
 };
 
 describe(`<${Uploader.displayName}>`, () => {
@@ -83,31 +84,51 @@ describe(`<${Uploader.displayName}>`, () => {
         });
     });
 
-    describe('Events', () => {
+    describe.each`
+        name                      | props
+        ${'button'}               | ${{}}
+        ${'button isDisabled   '} | ${{ isDisabled: true }}
+        ${'button aria-disabled'} | ${{ 'aria-disabled': true }}
+        ${'file input          '} | ${{ fileInputProps: { onChange: jest.fn() } }}
+    `('Events $name', ({ props }) => {
+        const onClick = jest.fn();
+        beforeEach(() => onClick.mockClear());
+        const assertClick = () => {
+            if (props.isDisabled || props['aria-disabled']) {
+                expect(onClick).not.toHaveBeenCalled();
+            } else {
+                expect(onClick).toHaveBeenCalled();
+            }
+        };
+
         it('should trigger `onClick` when clicked', async () => {
-            const onClick = jest.fn();
-            const { uploader } = setup({ onClick });
+            const { uploader } = setup({ ...props, onClick });
 
             await userEvent.click(uploader);
-            expect(onClick).toHaveBeenCalled();
+            assertClick();
         });
 
         it('should trigger `onClick` when pressing Enter or Escape', async () => {
-            const onClick = jest.fn();
-            const { uploader } = setup({ onClick });
+            const { uploader, input } = setup({ ...props, onClick });
+
+            if (props.isDisabled) {
+                expect(props.fileInputProps ? input : uploader).toBeDisabled();
+                //Cannot test focus or activation
+                return;
+            }
 
             await userEvent.tab();
-            expect(uploader).toHaveFocus();
+            expect(props.fileInputProps ? input : uploader).toHaveFocus();
 
             // Activate with Enter
             await userEvent.keyboard('[Enter]');
-            expect(onClick).toHaveBeenCalled();
+            assertClick();
 
             onClick.mockClear();
 
             // Activate with Space
             await userEvent.keyboard('[Space]');
-            expect(onClick).toHaveBeenCalled();
+            assertClick();
         });
     });
 

package/src/components/uploader/Uploader.tsx

@@ -9,6 +9,9 @@ import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 
 /**
  * Uploader variants.
@@ -35,11 +38,13 @@ interface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'>
 /**
  * Defines the props of the component.
  */
-export interface UploaderProps extends GenericProps, HasTheme {
+export interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Icon (SVG path). */
     icon?: string;
+    /** Disabled state */
+    isDisabled?: boolean;
     /** Label text. */
     label?: string;
     /** Size variant. */
@@ -79,6 +84,7 @@ const DEFAULT_PROPS: Partial<UploaderProps> = {
  * @return React element.
  */
 export const Uploader = forwardRef<UploaderProps>((props, ref) => {
+    const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         aspectRatio = DEFAULT_PROPS.aspectRatio,
@@ -89,32 +95,45 @@ export const Uploader = forwardRef<UploaderProps>((props, ref) => {
         theme = defaultTheme,
         variant = DEFAULT_PROPS.variant,
         fileInputProps,
+        onClick,
         ...forwardedProps
-    } = props;
+    } = otherProps;
     // Adjust to square aspect ratio when using circle variants.
     const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
 
+    const handleClick: React.MouseEventHandler = React.useCallback(
+        (evt) => {
+            if (isAnyDisabled) {
+                evt.preventDefault();
+            } else {
+                onClick?.(evt);
+            }
+        },
+        [isAnyDisabled, onClick],
+    );
+
     const generatedInputId = useId();
     const inputId = fileInputProps?.id || generatedInputId;
     const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
     const wrapper = fileInputProps
-        ? { Component: 'label' as const, props: { htmlFor: inputId } as const }
-        : { Component: 'button' as const, props: { type: 'button' } as const };
+        ? ({ Component: 'label', props: { htmlFor: inputId } } as const)
+        : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);
 
     const onChange = React.useMemo(() => {
-        if (!fileInputProps?.onChange) return undefined;
+        if (isAnyDisabled || !fileInputProps?.onChange) return undefined;
         return (evt: React.ChangeEvent<HTMLInputElement>) => {
             const fileList = evt.target.files;
             const files = fileList ? Array.from(fileList) : [];
             fileInputProps.onChange(files, evt);
         };
-    }, [fileInputProps]);
+    }, [isAnyDisabled, fileInputProps]);
 
     return (
         <wrapper.Component
             ref={ref as any}
             {...wrapper.props}
             {...forwardedProps}
+            onClick={handleClick}
             className={classNames(
                 className,
                 handleBasicClasses({
@@ -124,6 +143,7 @@ export const Uploader = forwardRef<UploaderProps>((props, ref) => {
                     theme,
                     variant,
                     isDragHovering,
+                    isDisabled: isAnyDisabled,
                 }),
             )}
         >
@@ -139,8 +159,10 @@ export const Uploader = forwardRef<UploaderProps>((props, ref) => {
                 <input
                     type="file"
                     id={inputId}
-                    className={`${CLASSNAME}__input`}
+                    className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}
+                    {...disabledStateProps}
                     {...fileInputProps}
+                    readOnly={isAnyDisabled}
                     onChange={onChange}
                     onDragEnter={setDragHovering}
                     onDragLeave={unsetDragHovering}

package/src/utils/disabled/DisabledStateProvider.stories.tsx

@@ -12,11 +12,14 @@ import {
     RadioButton,
     Switch,
     TextField,
+    Thumbnail,
+    Uploader,
 } from '@lumx/react';
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
 import { mdiFoodApple } from '@lumx/icons';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
 export default {
     title: 'LumX components/DisabledStateProvider',
@@ -71,6 +74,7 @@ export const AllComponents = {
             <Checkbox label="Checkbox" />
             <Chip onClick={() => {}}>Chip</Chip>
             <DatePickerField
+                label="Date picker field"
                 nextButtonProps={{ label: 'Next' }}
                 previousButtonProps={{ label: 'Previous' }}
                 value={new Date()}
@@ -82,7 +86,9 @@ export const AllComponents = {
             </List>
             <RadioButton label="Radio button" />
             <Switch>Switch</Switch>
-            <TextField onChange={() => {}} value="" />
+            <TextField label="texfield" onChange={() => {}} value="" />
+            <Thumbnail alt="Thumbnail" image={LANDSCAPE_IMAGES.landscape1s200} onClick={() => {}} />
+            <Uploader label="Upload a file" fileInputProps={{ onChange: () => {} }} />
         </DisabledStateProvider>
     ),
 };