@lumx/react 3.0.6-alpha.2 → 3.0.7-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.6-alpha.2",
-        "@lumx/icons": "^3.0.6-alpha.2",
+        "@lumx/core": "^3.0.7-alpha.0",
+        "@lumx/icons": "^3.0.7-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -114,6 +114,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.6-alpha.2",
-    "gitHead": "08b0d777dc906cf3a6816c9cb9e2d4b57ddaf8e1"
+    "version": "3.0.7-alpha.0",
+    "gitHead": "3f528f821c680dbf072fc5f78fee38d980227d17"
 }

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette } from '@lumx/react';
+import { ColorPalette } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ export interface BadgeProps extends GenericProps {
     /** Badge content. */
     children?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
 }
 
 /**

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { mdiSend } from '@lumx/icons';
-import { Button, ColorPalette, IconButton } from '@lumx/react';
+import { Button, ColorPalette, IconButton, Text } from '@lumx/react';
 import { squareImageKnob } from '@lumx/react/stories/knobs/image';
 import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
 import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
@@ -30,6 +30,32 @@ export const SimpleButton = ({ theme }: any) => {
     );
 };
 
+export const SimpleButtonWithTruncatedText = ({ theme }: any) => {
+    const buttonText =
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Potenti nullam ac tortor vitae. Lorem ipsum dolor sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ultrices tincidunt arcu non sodales neque sodales.';
+    return (
+        <Button
+            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
+            theme={theme}
+            rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
+            leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
+            size={buttonSize()}
+            isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
+            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
+            href={text('Button link', '')}
+            hasBackground={boolean('hasBackground', Boolean(DEFAULT_PROPS.hasBackground))}
+            fullWidth
+            title={buttonText}
+        >
+            <Text as="span" truncate>
+                {text('Button content', buttonText)}
+            </Text>
+        </Button>
+    );
+};
+
 export const WithHref = () => <Button href="https://google.com">Button with redirection</Button>;
 
 export const Disabled = () => <Button isDisabled>Disabled button</Button>;

package/src/components/button/Button.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
-import { Emphasis, Icon, Size, Theme } from '@lumx/react';
-import { Comp } from '@lumx/react/utils/type';
+import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
+import { Comp, isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
@@ -71,7 +71,7 @@ export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> =
             variant="button"
         >
             {leftIcon && !isEmpty(leftIcon) && <Icon icon={leftIcon} />}
-            {children && <span>{children}</span>}
+            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
             {rightIcon && !isEmpty(rightIcon) && <Icon icon={rightIcon} />}
         </ButtonRoot>
     );

package/src/components/button/ButtonRoot.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
+import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
@@ -22,7 +22,7 @@ export interface BaseButtonProps
         Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
         HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Emphasis variant. */
     emphasis?: Emphasis;
     /** Whether or not the button has a background color in low emphasis. */

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

@@ -39,6 +39,7 @@ describe(`<${Checkbox.displayName}>`, () => {
             expect(wrapper).toHaveClassName(CLASSNAME);
             expect(wrapper).not.toHaveClassName('lumx-checkbox--is-disabled');
             expect(wrapper).toHaveClassName('lumx-checkbox--is-unchecked');
+            expect(wrapper.find('input')).toHaveProp('disabled', undefined);
         });
     });
 
@@ -51,6 +52,7 @@ describe(`<${Checkbox.displayName}>`, () => {
             });
 
             expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'disabled', value: true }));
+            expect(wrapper.find('input')).toHaveProp('disabled', true);
             expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'checked', value: true }));
         });
 

package/src/components/checkbox/Checkbox.tsx

@@ -106,6 +106,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     type="checkbox"
                     id={inputId}
                     className={`${CLASSNAME}__input-native`}
+                    disabled={isDisabled}
                     tabIndex={isDisabled ? -1 : 0}
                     name={name}
                     value={value}

package/src/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette, Size, Theme } from '@lumx/react';
+import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
@@ -24,7 +24,7 @@ export interface ChipProps extends GenericProps, HasTheme {
     /** A component to be rendered before the content. */
     before?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
     /** Whether the component is disabled or not. */

package/src/components/icon/Icon.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
@@ -14,7 +14,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
  */
 export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
@@ -16,7 +16,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 export interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */

package/src/components/popover/Popover.tsx

@@ -16,6 +16,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 
 /**
  * Different possible placements for the popover.
@@ -115,6 +116,8 @@ export interface PopoverProps extends GenericProps {
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
     onClose?(): void;
+    /** Whether the popover should trap the focus within itself. Default to false. */
+    withFocusTrap?: boolean;
 }
 
 /**
@@ -235,6 +238,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         usePortal,
         zIndex,
         focusAnchorOnClose = true,
+        withFocusTrap,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -243,6 +247,8 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRef = useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const contentRef = useRef<HTMLDivElement>(null);
 
     /**
      * Track whether the focus is currently set in the
@@ -340,8 +346,12 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useCallbackOnEscape(handleClose, isOpen && closeOnEscape);
+
+    /** Only set focus within if the focus trap is disabled as they interfere with one another. */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocus(focusElement?.current, !withFocusTrap && isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocus(focusElement?.current, isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
+    useFocusTrap(withFocusTrap && isOpen && contentRef?.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRefs = useRef([clickAwayRef, anchorRef]);
@@ -350,7 +360,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         ? renderPopover(
               <div
                   {...forwardedProps}
-                  ref={mergeRefs<HTMLDivElement>(setPopperElement, ref, clickAwayRef)}
+                  ref={mergeRefs<HTMLDivElement>(setPopperElement, ref, clickAwayRef, contentRef)}
                   className={classNames(
                       className,
                       handleBasicClasses({ prefix: CLASSNAME, elevation: Math.min(elevation || 0, 5), position }),

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -0,0 +1,75 @@
+import { mdiMenu } from '@lumx/icons/index';
+import { mdiSettings } from '@lumx/icons/v4-to-v5-aliases';
+import React, { useRef, useState } from 'react';
+import { PopoverDialog, PopoverDialogProps } from '.';
+import { Emphasis, Orientation, Size, Typography } from '..';
+import { Button, IconButton } from '../button';
+import { FlexBox } from '../flex-box';
+import { Heading } from '../heading';
+import { List, ListItem } from '../list';
+import { Placement } from '../popover/Popover';
+import { Toolbar } from '../toolbar';
+
+const WithButton = (Story: any, context: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState<boolean>(context?.args?.isOpen || false);
+
+    return (
+        <>
+            <Button ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+                Open popover
+            </Button>
+            <Story anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+        </>
+    );
+};
+
+const dialogHeaderId = 'dialog-header';
+
+const DemoPopoverContent = () => (
+    <FlexBox orientation={Orientation.vertical}>
+        <Toolbar
+            label={
+                <Heading id="dialogHeaderId" typography={Typography.headline}>
+                    Title
+                </Heading>
+            }
+            after={<IconButton label="Settings" icon={mdiSettings} emphasis={Emphasis.low} />}
+        />
+        <List>
+            <ListItem size={Size.huge} after={<IconButton label="Menu" icon={mdiMenu} size={Size.s} />}>
+                List Item With Actions
+            </ListItem>
+            <ListItem
+                size={Size.huge}
+                linkProps={{
+                    href: 'http://google.com',
+                }}
+            >
+                Clickable list item
+            </ListItem>
+        </List>
+    </FlexBox>
+);
+
+export default {
+    title: 'LumX components/popover-dialog/PopoverDialog',
+    component: PopoverDialog,
+    decorators: [WithButton],
+    args: {
+        children: <DemoPopoverContent />,
+        'aria-labelledby': dialogHeaderId,
+        placement: Placement.BOTTOM,
+    },
+};
+
+const Template = (args: PopoverDialogProps, context: any) => {
+    const { anchorRef, isOpen, onClose } = context;
+    return (
+        <PopoverDialog {...args} anchorRef={anchorRef} isOpen={isOpen} onClose={onClose}>
+            {args.children}
+        </PopoverDialog>
+    );
+};
+
+export const Default = Template.bind({});

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useState } from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PopoverDialog } from './PopoverDialog';
+
+const DialogWithButton = (forwardedProps: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <button type="button" ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+                Open popover
+            </button>
+
+            <PopoverDialog {...forwardedProps} anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                <button type="button">Button 1</button>
+                <button type="button">Button 2</button>
+            </PopoverDialog>
+            {/* This should never have focus while popover is opened */}
+            <button type="button">External button</button>
+        </>
+    );
+};
+
+describe(`<${PopoverDialog.displayName}>`, () => {
+    it('should behave like a dialog', async () => {
+        const label = 'Test Label';
+
+        render(<DialogWithButton label={label} />);
+
+        /** Open the popover */
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
+        const withinDialog = within(dialog);
+
+        /** Get buttons within dialog */
+        const dialogButtons = withinDialog.getAllByRole('button');
+
+        // First button should have focus by default on opening
+        expect(dialogButtons[0]).toHaveFocus();
+
+        // Tab to next button
+        await userEvent.tab();
+
+        // Second button should have focus
+        expect(dialogButtons[1]).toHaveFocus();
+
+        // Tab to next button
+        await userEvent.tab();
+
+        // As there is no more button, focus should loop back to first button.
+        expect(dialogButtons[0]).toHaveFocus();
+
+        // Close the popover
+        await userEvent.keyboard('{escape}');
+
+        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
+        /** Anchor should retrieve the focus */
+        expect(triggerElement).toHaveFocus();
+    });
+});

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+
+import { Comp, HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+import { Popover, PopoverProps } from '../popover/Popover';
+
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+export type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PopoverDialog';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
+
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog
+ * * Has a dialog aria role
+ * * Sets a focus trap within the popover
+ * * Closes on click away and escape.
+ */
+export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, isOpen, focusElement, label, className, ...forwardedProps } = props;
+
+    return (
+        <Popover
+            {...forwardedProps}
+            ref={ref}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            role="dialog"
+            aria-modal="true"
+            /**
+             * If a label is set, set as aria-label.
+             * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
+             */
+            aria-label={label}
+            isOpen={isOpen}
+            focusElement={focusElement}
+            closeOnClickAway
+            closeOnEscape
+            withFocusTrap
+        >
+            {children}
+        </Popover>
+    );
+});
+
+PopoverDialog.displayName = COMPONENT_NAME;
+PopoverDialog.className = CLASSNAME;
+PopoverDialog.defaultProps = DEFAULT_PROPS;

package/src/components/popover-dialog/index.tsx

@@ -0,0 +1 @@
+export * from './PopoverDialog';

package/src/index.ts

@@ -35,6 +35,7 @@ export * from './components/message';
 export * from './components/mosaic';
 export * from './components/notification';
 export * from './components/popover';
+export * from './components/popover-dialog';
 export * from './components/post-block';
 export * from './components/progress';
 export * from './components/progress-tracker';

package/src/stories/generated/PopoverDialog/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/popover-dialog/PopoverDialog Demos' };
+
+export { App as Default } from './default';

package/src/utils/type.ts

@@ -91,3 +91,23 @@ export const isComponentType = (type: ReactElement['type']) => (node: ReactNode)
  * (excluding `NaN` as it can't be distinguished from `number`)
  */
 export type Falsy = false | undefined | null | 0 | '';
+
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
+    ? {
+          /**
+           * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+           * Although it is not recommended, aria-label can be used instead if no visible element is available.
+           */
+          'aria-labelledby': T;
+          /** The label of the dialog. */
+          'aria-label'?: undefined;
+      }
+    : {
+          'aria-label': string;
+          'aria-labelledby'?: undefined;
+      };