@workday/canvas-kit-react 12.0.0-alpha.906-next.0 → 12.0.0-alpha.908-next.0

package/menu/index.ts

@@ -2,7 +2,8 @@ export {useMenuModel} from './lib/useMenuModel';
 export {Menu} from './lib/Menu';
 
 export {useMenuCard} from './lib/MenuCard';
-export {useMenuItem, StyledMenuItem, MenuItemProps} from './lib/MenuItem';
+export {useMenuItem, menuItemStencil, StyledMenuItem} from './lib/MenuItem';
+export {useMenuOption, menuOptionStencil} from './lib/MenuOption';
 export {useMenuList, menuListStencil} from './lib/MenuList';
 export {useMenuPopper} from './lib/MenuPopper';
 export {useMenuTarget, useMenuTargetContext} from './lib/MenuTarget';

package/menu/lib/Menu.tsx

@@ -9,6 +9,7 @@ import {MenuItem} from './MenuItem';
 import {MenuCard} from './MenuCard';
 import {MenuList} from './MenuList';
 import {MenuDivider} from './MenuDivider';
+import {MenuOption} from './MenuOption';
 
 export interface MenuProps {
   /**
@@ -99,6 +100,15 @@ export const Menu = createContainer()({
      * the model.
      */
     Item: MenuItem,
+    /**
+     * A `Menu.Option` is similar to the `Menu.Item`, but has a `role=option` and works with
+     * `aria-activedescendant` and is selectable with a selected checkmark. It adds the
+     * `aria-selected="true/false"` attribute. `Menu.Option` requires much more accessibility
+     * behavior composed into the `Menu.Target` and `Menu.List` component. The `Combobox` and
+     * `Select` components make use of the `Menu.Option`. See those components for a better idea of
+     * how behavior is composed.
+     */
+    Option: MenuOption,
     Divider: MenuDivider,
     /**
      * A `Menu.TargetContext` is the same as a {@link MenuTarget Menu.Target}, except it adds a

package/menu/lib/MenuItem.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
 
-import {colors, iconColors, typeColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
 import {
   createSubcomponent,
-  styled,
-  StyledType,
   composeHooks,
   createElemPropsHook,
   useLocalRef,
+  createComponent,
 } from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
-import {Box} from '@workday/canvas-kit-react/layout';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {
   useListItemRegister,
   useListItemRovingFocus,
@@ -30,113 +31,120 @@ export interface MenuItemProps {
   /**
    * The label text of the MenuItem.
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * The name of the menu item. This name will be used in the `onSelect` callback in the model. If
    * this property is not provided, it will default to a string representation of the the zero-based
    * index of the Tab when it was initialized.
    */
   'data-id'?: string;
+  /**
+   * `aria-disabled` is used for keyboard and screen reader users to discover disabled content with
+   * the keyboard or screen reader caret tool. For more information, see
+   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+   */
   'aria-disabled'?: boolean;
-}
-
-interface StyledMenuProps {
   /**
    * If true, set the StyledMenuItem to the disabled state so it is not clickable.
    * @default false
+   * @deprecated Use `aria-disabled` instead
    */
   isDisabled?: boolean;
 }
 
-export const StyledMenuItem = styled(Box.as('button'))<StyledType & StyledMenuProps>(
-  ({theme}) => {
-    return {
-      ...type.levels.subtext.large,
-      display: 'grid',
-      alignItems: 'center',
-      width: '100%',
-      gap: space.s,
-      padding: `${space.xxs} ${space.s}`,
-      boxSizing: 'border-box',
-      cursor: 'pointer',
-      color: colors.blackPepper300,
-      borderWidth: 0,
-      textAlign: 'left',
-      transition: 'background-color 80ms, color 80ms',
-      '&:hover, &[aria-selected=true]': {
-        backgroundColor: theme.canvas.palette.primary.lightest,
-        color: colors.blackPepper300,
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.hover,
-        },
-        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.hover,
-        },
-      },
-      '&:focus, &.focus': {
-        outline: 'none',
-        backgroundColor: theme.canvas.palette.primary.main,
-        color: typeColors.inverse,
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.inverse,
-        },
-        '*:hover .wd-icon-fill': {
-          fill: iconColors.inverse,
-        },
-        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.inverse,
-        },
-      },
-      // We want the focus styles no matter what
-      [`[data-whatinput]`]: {
-        backgroundColor: 'inherit',
-        color: colors.blackPepper300,
-        '&:hover, &[aria-selected=true]': {
-          backgroundColor: theme.canvas.palette.primary.lightest,
-          '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-            fill: iconColors.hover,
-          },
-        },
-        '&:focus, &.focus': {
-          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.hover,
-          },
-        },
-      },
-      backgroundColor: 'inherit',
-      '&:disabled, &[aria-disabled=true]': {
-        color: colors.licorice100,
-        cursor: 'default',
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-          fill: iconColors.disabled,
-        },
-        '&:focus, &.focus': {
-          backgroundColor: colors.blueberry200,
-          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.disabled,
-          },
-        },
-        '&:hover, &[aria-selected=true]': {
-          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.disabled,
-          },
-          '*:hover .wd-icon-fill': {
-            fill: iconColors.disabled,
-          },
-        },
+export const menuItemStencil = createStencil({
+  base: {
+    ...system.type.subtext.large,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    gap: system.space.x4,
+    padding: `${system.space.x2} ${system.space.x4}`,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: system.color.fg.default,
+    borderWidth: 0,
+    textAlign: 'start',
+    transition: 'background-color 80ms, color 80ms',
+    backgroundColor: 'inherit',
+    minHeight: system.space.x10,
+    // We want the icon colors to be the same as the text color
+    [systemIconStencil.vars.color]: 'currentcolor',
+
+    // selected checkmark
+    '& :where([data-part="menu-item-selected"])': {
+      transition: 'opacity 80ms linear',
+      opacity: system.opacity.zero,
+    },
+
+    // if the menu item has children we need it to be displayed in flex
+    '&:where(:has(span))': {
+      display: 'flex',
+    },
+
+    // Selected styles
+    '&:is([aria-selected=true])': {
+      color: brand.primary.dark,
+      backgroundColor: brand.primary.lightest,
+    },
+
+    // Hover styles
+    '&:is(.hover, :hover)': {
+      color: system.color.fg.strong,
+      backgroundColor: brand.neutral.lightest,
+    },
+
+    // Focus styles
+    '&:is(.focus, :focus)': {
+      color: brand.primary.accent,
+      outline: 'none',
+      backgroundColor: brand.primary.base,
+    },
+
+    // Disabled styles
+    '&:is(:disabled, [aria-disabled=true])': {
+      color: system.color.text.disabled,
+      cursor: 'default',
+
+      // Focus + Disabled
+      '&:where(.focus, :focus)': {
+        backgroundColor: brand.primary.light,
       },
-    };
+    },
+
+    '& :where([data-part="menu-item-text"])': {
+      flexGrow: 1,
+      alignSelf: 'center',
+    },
+
+    '& :where([data-part="menu-icon-icon"])': {
+      alignSelf: 'start',
+    },
   },
-  ({children}) => {
-    if (typeof children === 'string') {
-      return {};
-    } else {
-      return {
-        display: 'flex',
-      };
-    }
-  }
-);
+});
+
+const MenuItemIcon = (elemProps: SystemIconProps) => {
+  return <SystemIcon data-part="menu-item-icon" {...elemProps} />;
+};
+
+const MenuItemText = ({children}: React.PropsWithChildren) => {
+  return <span data-part="menu-item-text">{children}</span>;
+};
+
+export const StyledMenuItem = createComponent('button')({
+  displayName: 'MenuItem',
+  Component: ({children, isDisabled, ...elemProps}: MenuItemProps, ref, Element) => {
+    return (
+      <Element
+        ref={ref}
+        aria-disabled={isDisabled}
+        {...mergeStyles(elemProps, menuItemStencil({}))}
+      >
+        {typeof children === 'string' ? <MenuItemText>{children}</MenuItemText> : children}
+      </Element>
+    );
+  },
+});
 
 export const useMenuItem = composeHooks(
   createElemPropsHook(useMenuModel)(
@@ -181,13 +189,13 @@ export const MenuItem = createSubcomponent('button')({
   modelHook: useMenuModel,
   elemPropsHook: useMenuItem,
   subComponents: {
-    Icon: styled(SystemIcon)({alignSelf: 'start'}),
-    Text: styled('span')({flexGrow: 1, alignSelf: 'center'}),
+    Icon: MenuItemIcon,
+    Text: MenuItemText,
   },
 })<MenuItemProps>(({children, ...elemProps}, Element) => {
   return (
     <OverflowTooltip placement="left">
-      <StyledMenuItem minHeight={space.xl} as={Element} {...elemProps}>
+      <StyledMenuItem as={Element} {...elemProps}>
         {children}
       </StyledMenuItem>
     </OverflowTooltip>

package/menu/lib/MenuOption.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+
+import {createStencil} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+
+import {
+  createSubcomponent,
+  composeHooks,
+  createElemPropsHook,
+  createComponent,
+} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {
+  isSelected,
+  useListItemActiveDescendant,
+  useListItemRegister,
+} from '@workday/canvas-kit-react/collection';
+
+import {useMenuModel} from './useMenuModel';
+import {menuItemStencil} from './MenuItem';
+
+export interface MenuOptionProps {
+  /**
+   * Optionally pass index to menu item. This should be done if `Menu.Item` components were created
+   * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The label text of the MenuOption.
+   */
+  children?: React.ReactNode;
+  /**
+   * The name of the menu item. This name will be used in the `onSelect` callback in the model. If
+   * this property is not provided, it will default to a string representation of the the zero-based
+   * index of the Tab when it was initialized.
+   */
+  'data-id'?: string;
+  /**
+   * `aria-disabled` is used for keyboard and screen reader users to discover disabled content with
+   * the keyboard or screen reader caret tool. For more information, see
+   * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+   */
+  'aria-disabled'?: boolean;
+}
+
+export const menuOptionStencil = createStencil({
+  extends: menuItemStencil,
+  base: {
+    '&:where([aria-selected=true])': {
+      '& :where([data-part="menu-item-selected"])': {
+        opacity: system.opacity.full,
+      },
+      '&:where(.focus, :focus)': {
+        [systemIconStencil.vars.color]: brand.primary.accent,
+        outline: 'none',
+        backgroundColor: brand.primary.base,
+        color: systemIconStencil.vars.color,
+      },
+    },
+  },
+});
+
+const MenuOptionIcon = (elemProps: SystemIconProps) => {
+  return <SystemIcon data-part="menu-item-icon" {...elemProps} />;
+};
+
+const MenuOptionText = ({children}: React.PropsWithChildren) => {
+  return (
+    <>
+      <span data-part="menu-item-text">{children}</span>
+      <SystemIcon icon={checkSmallIcon} data-part="menu-item-selected" />
+    </>
+  );
+};
+
+export const StyledMenuOption = createComponent('button')({
+  displayName: 'MenuOption',
+  Component: ({children, ...elemProps}: MenuOptionProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, menuOptionStencil())}>
+        {typeof children === 'string' ? <MenuOptionText>{children}</MenuOptionText> : children}
+      </Element>
+    );
+  },
+});
+
+export const useMenuOption = composeHooks(
+  createElemPropsHook(useMenuModel)((model, ref, elemProps: {'data-id'?: string} = {}) => {
+    const id = elemProps['data-id'] || '';
+
+    const selected = isSelected(id, model.state);
+
+    const onMouseDown = (event: React.MouseEvent<HTMLElement>) => {
+      // Only left mouse button
+      if (event.button === 0) {
+        if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+          model.events.select({id});
+
+          if (model.state.mode === 'single') {
+            model.events.hide(event);
+          }
+        }
+      }
+      // prevent focus changes
+      event.preventDefault();
+    };
+
+    return {
+      role: 'option',
+      'aria-selected': selected,
+      onMouseDown,
+    };
+  }),
+  useListItemActiveDescendant,
+  useListItemRegister
+);
+
+export const MenuOption = createSubcomponent('li')({
+  displayName: 'Menu.Item',
+  modelHook: useMenuModel,
+  elemPropsHook: useMenuOption,
+  subComponents: {
+    Icon: MenuOptionIcon,
+    Text: MenuOptionText,
+  },
+})<MenuOptionProps>(({children, ...elemProps}, Element) => {
+  return (
+    <OverflowTooltip placement="left">
+      <StyledMenuOption as={Element} {...elemProps}>
+        {children}
+      </StyledMenuOption>
+    </OverflowTooltip>
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.0-alpha.906-next.0",
+  "version": "12.0.0-alpha.908-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.906-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.906-next.0",
+    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.908-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.908-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "b796b56840b04395e0b4f4d643cad66be4103936"
+  "gitHead": "96aa087e44d928f9b530e0133be4326b8ff2fdce"
 }

package/select/lib/Select.tsx

@@ -124,7 +124,7 @@ export const SelectItem = createSubcomponent('li')({
   },
 })<ExtractProps<typeof Combobox.Menu.Item>>(({children, ...elemProps}, Element, _model) => {
   return (
-    <Combobox.Menu.Item role="option" as={Element} {...elemProps}>
+    <Combobox.Menu.Item as={Element} {...elemProps}>
       {children}
     </Combobox.Menu.Item>
   );