@lumx/react 2.1.1 → 2.1.5

package/src/components/button/IconButton.tsx

@@ -4,27 +4,17 @@ import { Emphasis, Icon, Size, Theme, Tooltip, TooltipProps } from '@lumx/react'
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
 import { Comp, getRootClassName } from '@lumx/react/utils';
 
-/** Either icon or image prop must be defined */
-type ImageOrIconType =
-    /** Svg path type icon */
-    | {
-          /**
-           * Icon SVG path (recommended over an image).
-           */
-          icon: string;
-          image?: undefined;
-      }
-    /** Image url type icon */
-    | {
-          /**
-           * Image URL (use icon SVG path when possible).
-           */
-          image: string;
-          icon?: undefined;
-      };
-
-/** Props common to icon and image type icon. */
-export interface IconButtonBaseProps {
+export interface IconButtonProps extends BaseButtonProps {
+    /**
+     * Icon (SVG path).
+     * If `image` is also set, `image` will be used instead.
+     */
+    icon?: string;
+    /**
+     * Image (image url).
+     * Has priority over `icon`.
+     */
+    image?: string;
     /**
      * Label text (required for a11y purpose).
      * If you really don't want an aria-label, you can set an empty label (this is not recommended).
@@ -39,11 +29,6 @@ export interface IconButtonBaseProps {
     hideTooltip?: boolean;
 }
 
-/**
- * Defines the props of the component.
- */
-export type IconButtonProps = IconButtonBaseProps & ImageOrIconType & BaseButtonProps;
-
 /**
  * Component display name.
  */

package/src/components/button/__snapshots__/ButtonRoot.test.tsx.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ButtonRoot> Props should be full width 1`] = `
+<ButtonRoot
+  emphasis="high"
+  fullWidth={true}
+  theme="light"
+>
+  <button
+    className="lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--theme-light lumx-button--is-full-width"
+    type="button"
+  />
+</ButtonRoot>
+`;
+
 exports[`<ButtonRoot> Props should not have default color in low or medium emphasis 1`] = `
 <ButtonRoot
   emphasis="low"

package/src/components/button/__snapshots__/IconButton.test.tsx.snap

@@ -67,3 +67,22 @@ exports[`<IconButton> Snapshots and structure should render icon button with an
   </ButtonRoot>
 </Tooltip>
 `;
+
+exports[`<IconButton> Snapshots and structure should render icon button with an image if both props are set 1`] = `
+<Tooltip
+  delay={500}
+  placement="bottom"
+>
+  <ButtonRoot
+    emphasis="high"
+    size="m"
+    theme="light"
+    variant="icon"
+  >
+    <img
+      alt=""
+      src="http://foo.com"
+    />
+  </ButtonRoot>
+</Tooltip>
+`;

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
 import { Button, CommentBlock, Emphasis, Size } from '@lumx/react';
 import { IconButton } from '@lumx/react/components/button/IconButton';
-import { avatarImageKnob } from '@lumx/react/stories/knobs';
+import { avatarImageKnob } from '@lumx/react/stories/knobs/image';
 
 export default { title: 'LumX components/comment-block/CommentBlock' };
 

package/src/components/dialog/Dialog.stories.tsx

@@ -1,5 +1,6 @@
 import { mdiClose } from '@lumx/icons';
 import {
+    AlertDialog,
     Button,
     Checkbox,
     DatePickerField,
@@ -17,7 +18,7 @@ import {
 import { select } from '@storybook/addon-knobs';
 import React, { RefObject, useRef, useState } from 'react';
 import { Dialog, DialogSizes } from './Dialog';
-import { loremIpsum } from '../../stories/knobs';
+import { loremIpsum } from '../../stories/knobs/lorem';
 
 export default {
     title: 'LumX components/dialog/Dialog',
@@ -32,9 +33,9 @@ const content = <div className="lumx-spacing-padding">{loremIpsum('short')}</div
 const longContent = <div className="lumx-spacing-padding">{loremIpsum('long')}</div>;
 const footer = <footer className="lumx-spacing-padding">Dialog footer</footer>;
 
-function useOpenButton(theme: Theme) {
+function useOpenButton(theme: Theme, defaultState = true) {
     const buttonRef = useRef() as RefObject<HTMLButtonElement>;
-    const [isOpen, setOpen] = useState(true);
+    const [isOpen, setOpen] = useState(defaultState);
     const openDialog = () => setOpen(true);
     const closeDialog = () => setOpen(false);
 
@@ -45,6 +46,7 @@ function useOpenButton(theme: Theme) {
             </Button>
         ),
         buttonRef,
+        openDialog,
         closeDialog,
         isOpen,
     };
@@ -83,6 +85,46 @@ export const PreventDialogAutoClose = ({ theme }: any) => {
     );
 };
 
+export const DialogWithAlertDialog = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+    const { openDialog: openAlertDialog, closeDialog: closeAlertDialog, isOpen: isAlertDialogOpen } = useOpenButton(
+        theme,
+        false,
+    );
+
+    const handleSubmitDialog = () => {
+        closeDialog();
+        openAlertDialog();
+    };
+
+    return (
+        <>
+            {button}
+            <Dialog isOpen={isOpen} onClose={closeDialog} parentElement={buttonRef}>
+                {content}
+                <footer>
+                    <Toolbar
+                        after={
+                            <Button onClick={handleSubmitDialog} emphasis={Emphasis.low}>
+                                Close
+                            </Button>
+                        }
+                    />
+                </footer>
+            </Dialog>
+            <AlertDialog
+                isOpen={isAlertDialogOpen}
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                title="Default (info)"
+                confirmProps={{ onClick: closeAlertDialog, label: 'Confirm' }}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};
+
 export const Sizes = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     const sizes: DialogSizes[] = [Size.tiny, Size.regular, Size.big, Size.huge];

package/src/components/dialog/Dialog.tsx

@@ -115,18 +115,22 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
         ...forwardedProps
     } = props;
 
-    const handleClose = onClose
-        ? () => {
-              onClose();
-              // Focus the parent element on close.
-              if (parentElement && parentElement.current) {
-                  parentElement.current.focus();
-              }
-          }
-        : undefined;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const previousOpen = React.useRef(isOpen);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useCallbackOnEscape(handleClose, isOpen && !preventAutoClose);
+    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const wrapperRef = useRef<HTMLDivElement>(null);
@@ -192,7 +196,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
                   <div className={`${CLASSNAME}__overlay`} />
 
                   <section className={`${CLASSNAME}__container`} role="dialog" aria-modal="true" {...dialogProps}>
-                      <ClickAwayProvider callback={!preventAutoClose && handleClose} refs={clickAwayRefs}>
+                      <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>
                           <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>
                               {(header || headerChildContent) && (
                                   <header

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+    <footer>
+      <Toolbar
+        after={
+          <Button
+            emphasis="low"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Close
+          </Button>
+        }
+      />
+    </footer>
+  </Dialog>
+  <AlertDialog
+    confirmProps={
+      Object {
+        "label": "Confirm",
+        "onClick": [Function],
+      }
+    }
+    isOpen={false}
+    kind="info"
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="tiny"
+    title="Default (info)"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </AlertDialog>
+</Fragment>
+`;
+
 exports[`<Dialog> Snapshots and structure should render story DialogWithFocusableElements 1`] = `
 <Fragment>
   <Button

package/src/components/drag-handle/DragHandle.tsx

@@ -40,7 +40,11 @@ export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((pro
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
         >
-            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />
+            <Icon
+                icon={mdiDragVertical}
+                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
+                size={Size.xs}
+            />
         </div>
     );
 });

package/src/components/flag/Flag.test.tsx

@@ -69,9 +69,8 @@ describe(`<${Flag.displayName} />`, () => {
 
         it('should use the color', () => {
             const color = ColorPalette.green;
-            const { wrapper, iconEl } = setup({ icon: mdiAbTesting, color });
+            const { wrapper } = setup({ icon: mdiAbTesting, color });
 
-            expect(iconEl.prop('color')).toEqual(color);
             expect(wrapper).toHaveClassName(
                 getBasicClass({
                     prefix: CLASSNAME,

package/src/components/flag/Flag.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';
+import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 export interface FlagProps extends GenericProps {
@@ -38,15 +38,7 @@ export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) =>
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
             ref={ref}
         >
-            {icon && (
-                <Icon
-                    icon={icon}
-                    color={color}
-                    colorVariant={ColorVariant.D2}
-                    size={Size.xxs}
-                    className={`${CLASSNAME}__icon`}
-                />
-            )}
+            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
             <span className={`${CLASSNAME}__label`}>{label}</span>
         </div>
     );

package/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -19,8 +19,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="blue"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -35,8 +33,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="dark"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -51,8 +47,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="green"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -67,8 +61,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="primary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -83,8 +75,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="red"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -99,8 +89,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="secondary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -115,8 +103,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="yellow"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -135,7 +121,6 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
 >
   <Icon
     className="lumx-flag__icon"
-    colorVariant="D2"
     icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
     size="xxs"
   />

package/src/components/image-block/ImageBlock.stories.tsx

@@ -1,4 +1,4 @@
-import { LANDSCAPE_IMAGES, landscapeImageKnob } from '@lumx/react/stories/knobs';
+import { LANDSCAPE_IMAGES, landscapeImageKnob } from '@lumx/react/stories/knobs/image';
 import React from 'react';
 
 import { Alignment, AspectRatio, Chip, ChipGroup, ImageBlock, Size } from '@lumx/react';

package/src/components/link-preview/LinkPreview.stories.tsx

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import { landscapeImageKnob, portraitImageKnob } from '@lumx/react/stories/knobs';
+import { landscapeImageKnob, portraitImageKnob } from '@lumx/react/stories/knobs/image';
 import { text } from '@storybook/addon-knobs';
 import React from 'react';
 import { Size } from '..';

package/src/components/list/List.stories.tsx

@@ -46,10 +46,16 @@ export const KeyboardNavigation = () => {
                     <ListItem linkProps={{ href: '#' }}>Link item 2</ListItem>
                     <ListSubheader>Header</ListSubheader>
                 </>
+                <ListItem linkProps={{ href: '#' }} isDisabled>
+                    Disabled link item
+                </ListItem>
+                <ListItem onItemSelected={action('onItemSelected')} isDisabled>
+                    Disabled button item
+                </ListItem>
                 <CustomListItem />
                 {[
                     <ListItem key="1" linkProps={{ href: '#' }}>
-                        Link item 3
+                        Link item 4
                     </ListItem>,
                 ]}
             </List>

package/src/components/list/ListItem.stories.tsx

@@ -2,12 +2,37 @@ import React from 'react';
 
 import { Size } from '@lumx/react';
 import { select, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 
 import { ListItem } from './ListItem';
 
 export default { title: 'LumX components/list/ListItem' };
 
-export const Default = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
+export const NonClickable = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
+
+export const Link = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const Button = ({ theme }: any) => (
+    <ListItem theme={theme} onItemSelected={action('onItemSelected')}>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const LinkDisabled = ({ theme }: any) => (
+    <ListItem theme={theme} linkProps={{ href: '#' }} isDisabled>
+        {text('text', 'Text')}
+    </ListItem>
+);
+
+export const ButtonDisabled = ({ theme }: any) => (
+    <ListItem theme={theme} onItemSelected={action('onItemSelected')} isDisabled>
+        {text('text', 'Text')}
+    </ListItem>
+);
 
 export const Selected = ({ theme }: any) => (
     <ListItem theme={theme} linkProps={{ href: '#' }} isSelected>
@@ -28,10 +53,10 @@ export const Sizes = ({ theme }: any) => (
 );
 
 const CustomLink: React.FC = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' } }, children);
+    React.createElement('a', { ...props, style: { color: 'red' }, href: 'http://google.com' }, children);
 
 export const WithCustomLink = ({ theme }: any) => (
-    <ListItem theme={theme} linkAs={CustomLink} linkProps={{ href: 'http://google.com' }}>
+    <ListItem theme={theme} linkAs={CustomLink}>
         My custom link
     </ListItem>
 );

package/src/components/list/ListItem.tsx

@@ -4,7 +4,14 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed } from '@lumx/react/utils';
+import {
+    Comp,
+    GenericProps,
+    getRootClassName,
+    handleBasicClasses,
+    onEnterPressed,
+    onButtonPressed,
+} from '@lumx/react/utils';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
 export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
@@ -23,6 +30,8 @@ export interface ListItemProps extends GenericProps {
     isHighlighted?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /** Whether link/button is disabled or not. */
+    isDisabled?: boolean;
     /** Reference to the <li> element. */
     listItemRef?: Ref<HTMLLIElement>;
     /** Custom react component for the link (can be used to inject react router Link). */
@@ -33,6 +42,7 @@ export interface ListItemProps extends GenericProps {
     linkRef?: Ref<HTMLAnchorElement>;
     /** Size variant. */
     size?: ListItemSize;
+
     /** On selected callback. */
     onItemSelected?(evt: SyntheticEvent): void;
 }
@@ -77,6 +87,7 @@ export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, r
         className,
         isHighlighted,
         isSelected,
+        isDisabled,
         linkAs,
         linkProps = {},
         linkRef,
@@ -84,9 +95,13 @@ export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, r
         size,
         ...forwardedProps
     } = props;
-    const onKeyDown = useMemo(() => (onItemSelected ? onEnterPressed(onItemSelected as any) : undefined), [
-        onItemSelected,
-    ]);
+
+    const role = linkAs || linkProps.href ? 'link' : 'button';
+    const onKeyDown = useMemo(() => {
+        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);
+        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);
+        return undefined;
+    }, [role, onItemSelected]);
 
     const content = (
         <>
@@ -113,17 +128,20 @@ export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, r
                 renderLink(
                     {
                         linkAs,
-                        tabIndex: 0,
-                        role: onItemSelected ? 'button' : undefined,
+                        tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
+                        role,
+                        'aria-disabled': isDisabled,
                         ...linkProps,
+                        href: isDisabled ? undefined : linkProps.href,
                         className: classNames(
                             handleBasicClasses({
                                 prefix: `${CLASSNAME}__link`,
                                 isHighlighted,
                                 isSelected,
+                                isDisabled,
                             }),
                         ),
-                        onClick: onItemSelected,
+                        onClick: isDisabled ? undefined : onItemSelected,
                         onKeyDown,
                         ref: linkRef,
                     },

package/src/components/list/__snapshots__/List.test.tsx.snap

@@ -129,12 +129,32 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
   >
     Header
   </ListSubheader>
-  <CustomListItem
+  <ListItem
+    isDisabled={true}
     key=".4"
+    linkProps={
+      Object {
+        "href": "#",
+      }
+    }
+    size="regular"
+  >
+    Disabled link item
+  </ListItem>
+  <ListItem
+    isDisabled={true}
+    key=".5"
+    onItemSelected={[Function]}
+    size="regular"
+  >
+    Disabled button item
+  </ListItem>
+  <CustomListItem
+    key=".6"
   />
   <ListItem
     isHighlighted={false}
-    key=".5:$1"
+    key=".7:$1"
     linkProps={
       Object {
         "href": "#",
@@ -147,7 +167,7 @@ exports[`<List> Snapshots and structure should render story 'KeyboardNavigation'
     onMouseUp={[Function]}
     size="regular"
   >
-    Link item 3
+    Link item 4
   </ListItem>
 </ul>
 `;