@workday/canvas-kit-react 6.8.9 → 6.9.0-next.2

package/action-bar/README.md

@@ -1,55 +1,6 @@
-# Canvas Kit Action Bar
+# Canvas Kit React Action Bar
 
-Full width toolbar fixed to bottom of screen.
+`ActionBar` contains primary and secondary actions related to a page or task.
 
-Although not required, [buttons](../../button/react) are often used in in action bars. The primary
-action button should be left aligned followed by secondary buttons. The primary button is on the
-right only in task orchestration and on mobile devices.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-```tsx
-import * as React from 'react';
-import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {ActionBar} from '@workday/canvas-kit-react/action-bar';
-
-<ActionBar>
-  <PrimaryButton variant="primary">Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>;
-```
-
-## Static Properties
-
-> None
-
-## Component Props
-
-### Required
-
-> None
-
-### Optional
-
-#### `fixed: boolean`
-
-> Fixes the toolbar to the bottom of the window (uses `position: fixed`)
-
-## Responsive Behavior
-
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
-
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+For more detailed information on this component, please refer to the
+[storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-action-bar-react--basic)

package/action-bar/index.ts

@@ -1,5 +1,2 @@
-import ActionBar from './lib/ActionBar';
-
-export default ActionBar;
-export {ActionBar};
 export * from './lib/ActionBar';
+export * from './lib/useActionBarModel';

package/action-bar/lib/ActionBar.tsx

@@ -1,76 +1,39 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {useActionBarModel} from './useActionBarModel';
+import {ActionBarList} from './ActionBarList';
+import {ActionBarOverflowButton} from './ActionBarOverflowButton';
+import {ActionBarItem} from './ActionBarItem';
 
-export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ActionBarProps {
   /**
-   * If true, fix the ActionBar to the bottom of the screen.
-   * @default false
+   * The contents of the ActionBar. Can be `ActionBar` children or any valid elements.
    */
-  fixed?: boolean;
+  children: React.ReactNode;
 }
 
-function getFixedStyles(fixed = false): CSSProperties {
-  return fixed
-    ? {
-        position: 'fixed',
-        left: 0,
-        bottom: 0,
-        right: 0,
-      }
-    : {};
-}
-
-const ActionBarContainer = styled('div')<ActionBarProps>(
-  {
-    borderTop: `solid 1px ${colors.soap400}`,
-    background: commonColors.background,
-    padding: space.s,
-    boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-  },
-  ({fixed, theme}) => {
-    return {
-      ...getFixedStyles(fixed),
-      [theme.canvas.breakpoints.down('s')]: {
-        padding: space.xxs,
-      },
-    };
-  }
-);
-
-const ChildrenContainer = styled('div')(
-  {
-    display: 'inline-block',
-    padding: `0 ${space.m}`,
-    '> *:not(style) ~ *:not(style)': {
-      marginLeft: space.s,
-    },
+export const ActionBar = createContainer()({
+  displayName: 'ActionBar',
+  modelHook: useActionBarModel,
+  subComponents: {
+    List: ActionBarList,
+    Item: ActionBarItem,
+    OverflowButton: ActionBarOverflowButton,
+    /**
+     * The overflow menu of the ActionBar component. If there isn't enough room to render all the action
+     * items, the extra actions that don't fit will be overflowed into this menu.
+     * @example
+     * <ActionBar.Menu.Popper>
+     *   <ActionBar.Menu.Card>
+     *     <ActionBar.Menu.List>
+     *       {(item: MyActionItem) => <ActionBar.Menu.Item>{item.text}</ActionBar.Menu.Item>}
+     *     </ActionBar.Menu.List>
+     *   </ActionBar.Menu.Card>
+     * </ActionBar.Menu.Popper>
+     */
+    Menu,
   },
-  ({theme}) => ({
-    [theme.canvas.breakpoints.down('s')]: {
-      display: 'flex',
-      padding: space.xxs,
-      justifyContent: 'center',
-      flexDirection: 'row-reverse',
-      '> *': {
-        flex: 1,
-        '&:not(style) ~ *:not(style)': {
-          marginRight: space.s,
-          marginLeft: 0,
-        },
-      },
-    },
-  })
-);
-
-export default class ActionBar extends React.Component<ActionBarProps> {
-  public render() {
-    const {fixed, children, ...elemProps} = this.props;
-
-    return (
-      <ActionBarContainer {...elemProps} fixed={fixed}>
-        <ChildrenContainer>{children}</ChildrenContainer>
-      </ActionBarContainer>
-    );
-  }
-}
+})<ActionBarProps>(({children}, _, model) => {
+  return <Menu model={model.menu}>{children}</Menu>;
+});

package/action-bar/lib/ActionBarItem.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  useListItemRegister,
+  useListItemRovingFocus,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+
+import {useActionBarModel} from './useActionBarModel';
+
+export interface ActionBarItemProps {
+  /**
+   * The contents of the action item. This will be the accessible name of the action for screen readers.
+   *
+   * ```tsx
+   * <ActionBar.Item>First Action</ActionBar.Item>
+   * ```
+   */
+  children: React.ReactNode;
+  /**
+   * The identifier of the action. This identifier will be used for correct overflow behavior.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the Item when it was initialized.
+   */
+  'data-id'?: string;
+}
+
+export const useActionBarItem = composeHooks(
+  useOverflowListItemMeasure,
+  useListItemRovingFocus,
+  useListItemRegister
+);
+
+export const ActionBarItem = createSubcomponent(SecondaryButton)({
+  displayName: 'ActionBar.Item',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarItem,
+})<ActionBarItemProps>((elemProps, Element) => {
+  return <Element {...elemProps} />;
+});

package/action-bar/lib/ActionBarList.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
+import {
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
+
+import {useActionBarModel} from './useActionBarModel';
+import {ActionBar} from './ActionBar';
+
+// Use `Partial` here to make `spacing` optional
+export interface ActionBarListProps<T = unknown>
+  extends Partial<ExtractProps<typeof HStack, never>> {
+  /**
+   * If items are passed to a `ActionBarModel`, the child of `ActionBar.List` should be a render prop. The
+   * List will determine how and when the item will be rendered.
+   *
+   * @example
+   * <ActionBar.List>
+   *   {(item) => <ActionBar.Item key={item.id} name={item.name}>{item.text}</ActionBar.Item>}
+   * </ActionBar.List>
+   */
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
+    padding: space.s,
+    '> *': {
+      flex: 1,
+    },
+  },
+}));
+
+export const ActionBarList = createSubcomponent('div')({
+  displayName: 'ActionBar.List',
+  modelHook: useActionBarModel,
+  elemPropsHook: useOverflowListMeasure,
+})<ActionBarListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <ResponsiveHStack
+      as={Element}
+      spacing="s"
+      depth={1}
+      background={commonColors.background}
+      borderTop={`solid 1px ${colors.soap400}`}
+      padding={`${space.s} ${space.xl} `}
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+      <ActionBar.OverflowButton />
+    </ResponsiveHStack>
+  );
+});

package/action-bar/lib/ActionBarOverflowButton.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {
+  createElemPropsHook,
+  composeHooks,
+  subModelHook,
+  createSubcomponent,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useActionBarModel} from './useActionBarModel';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
+export const useActionBarOverflowButton = composeHooks(
+  createElemPropsHook(useActionBarModel)(() => ({
+    'aria-haspopup': true,
+  })),
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useActionBarModel>) => m.menu, useMenuTarget)
+);
+
+const StyledSecondaryButton = styled(SecondaryButton)<StyledType>({
+  flex: 0,
+});
+
+export const ActionBarOverflowButton = createSubcomponent('button')({
+  displayName: 'ActionBar.OverflowButton',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarOverflowButton,
+})((elemProps, Element) => {
+  return <StyledSecondaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />;
+});

package/action-bar/lib/useActionBarModel.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
+
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+
+export const useActionBarModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * The default ActionBar sub-components only handle rendering of button group in a horizontal orientation,
+     * but the sub-components could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+  },
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+
+  const items = config.items;
+
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      shouldVirtualize: false,
+    })
+  );
+
+  let hiddenIds = model.state.hiddenIds;
+  let nonInteractiveIds = model.state.nonInteractiveIds;
+  const totalSize = model.state.items.length;
+
+  // Only show a maximum of 3 buttons
+  if (totalSize - hiddenIds.length >= 3) {
+    hiddenIds = items.slice(3, totalSize).map(getId);
+  }
+
+  // Always show the first button and make sure it is interactive
+  if (totalSize - hiddenIds.length === 0) {
+    hiddenIds = items.slice(1, totalSize).map(getId);
+  }
+
+  nonInteractiveIds = hiddenIds;
+
+  const state = {
+    ...model.state,
+    hiddenIds,
+    nonInteractiveIds,
+    orientation: config.orientation || 'horizontal',
+  };
+
+  const overflowItems = React.useMemo(
+    () => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]
+  );
+
+  const events = {
+    ...model.events,
+  };
+
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `act-bar-menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onSelect() {
+        menu.events.hide();
+      },
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/action-bar/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/action-bar",
   "module": "../dist/es6/action-bar",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/action-bar"
 }

package/avatar/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/avatar",
   "module": "../dist/es6/avatar",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/avatar"
 }

package/badge/README.md

@@ -32,15 +32,14 @@ const AccessibleHide = styled('div')({
 
 ...
 
-<IconButton
+<TertiaryButton
   style={{ position: "relative" }}
   aria-label={`Alerts ${count} new notifications`}
   size="medium"
-  variant="circle"
 >
   <SystemIcon icon={notificationsIcon} aria-hidden="true" />
   <Badge count={count} aria-hidden="true" />
-</IconButton>
+</TertiaryButton>
 <AccessibleHide role="status" aria-live="polite" aria-atomic="true">
   New notifications
 </AccessibleHide>

package/badge/lib/CountBadge.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 import {borderRadius, colors, fontFamily} from '@workday/canvas-kit-react/tokens';
 

package/badge/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/badge",
   "module": "../dist/es6/badge",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/badge"
 }

package/banner/index.ts

@@ -1,5 +1,2 @@
-import Banner from './lib/Banner';
-
-export default Banner;
-export {Banner};
 export * from './lib/Banner';
+export * from './lib/hooks/';

package/banner/lib/Banner.tsx

@@ -1,126 +1,92 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import {jsx} from '@emotion/react';
 import * as React from 'react';
-import {colors, space, borderRadius, type} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
-import {ErrorType, focusRing, styled, Themeable} from '@workday/canvas-kit-react/common';
 
-export enum BannerVariant {
-  Full,
-  Sticky,
-}
+import {borderRadius, CSSProperties, space, type} from '@workday/canvas-kit-react/tokens';
+import {
+  createContainer,
+  ExtractProps,
+  focusRing,
+  hideMouseFocus,
+  useIsRTL,
+} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The function called when the Banner is clicked.
-   */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  /**
-   * The label of the Banner.
-   */
-  label?: React.ReactNode;
-  /**
-   * The variant of the Banner. Accepts `Full` or `Sticky`.
-   * @default BannerVariant.Full
-   */
-  variant?: BannerVariant;
-  /**
-   * The type of error associated with the Banner (if applicable).
-   * @default ErrorType.Alert
-   */
-  error?: ErrorType;
+import {useBanner, useBannerModel, useThemedPalette} from './hooks';
+
+import {BannerIcon} from './BannerIcon';
+import {BannerLabel} from './BannerLabel';
+import {BannerActionText} from './BannerActionText';
+
+export interface BannerProps extends ExtractProps<typeof Flex, never> {
   /**
-   * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-   * @default 'View All'
+   * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
    */
-  actionText?: string;
+  children?: React.ReactNode;
 }
 
-const BannerWrapper = styled('button')<BannerProps>(
-  {
-    ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.medium,
-    backgroundColor: colors.cantaloupe400,
-    boxSizing: 'border-box',
-    color: colors.blackPepper400,
-    padding: `${space.xxs} ${space.s}`,
-    textAlign: 'left',
-    border: 0,
-    display: 'flex',
-    alignItems: 'center',
-    transition: 'background-color 120ms',
-    '&:focus': {
-      outline: 'none',
-      ...focusRing({separation: 2}),
-    },
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  ({error, variant}) => ({
-    backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
-    color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
-    borderRadius:
-      variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
-    width: variant === BannerVariant.Sticky ? '222px' : '328px',
-    '&:hover': {
-      backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
-    },
-  })
-);
-
-const BannerIcon = styled(SystemIcon)({
-  marginRight: space.xs,
-});
+// Remove color from our type since it is set on the Flex style attribute
+const {color: _color, ...typeLevelsSubtextLarge} = type.levels.subtext.large;
 
-const BannerLabel = styled('div')({
-  flex: 1,
-});
+const styles: CSSProperties = {
+  ...typeLevelsSubtextLarge,
+  cursor: 'pointer',
+  fontWeight: type.properties.fontWeights.medium,
+  textAlign: 'left',
+  transition: 'background-color 120ms',
+  '&:focus': {
+    outline: 'none',
+    ...focusRing({separation: 2}),
+  },
+  ...hideMouseFocus,
+};
 
-const BannerViewAll = styled('span')<BannerProps>(
-  {
-    textDecoration: 'underline',
+export const Banner = createContainer('button')({
+  displayName: 'Banner',
+  modelHook: useBannerModel,
+  elemPropsHook: useBanner,
+  subComponents: {
+    Icon: BannerIcon,
+    Label: BannerLabel,
+    ActionText: BannerActionText,
   },
-  ({variant}) => ({
-    display: variant === BannerVariant.Sticky ? 'none' : undefined,
-  })
-);
+})<BannerProps>(({children, ...elemProps}, Element, model) => {
+  const palette = useThemedPalette(model.state.hasError ? 'error' : 'alert');
+  const themedBackgroundStyles: CSSProperties = {
+    '&:hover': {
+      backgroundColor: palette.hover,
+    },
+  };
 
-const Banner = (React.forwardRef<HTMLButtonElement, BannerProps>((props, ref) => {
-  const {
-    actionText = 'View All',
-    variant = BannerVariant.Full,
-    error = ErrorType.Alert,
-    label,
-    onClick,
-    ...elemProps
-  } = props;
+  const isRTL = useIsRTL();
+  const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+  const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
+  const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+  const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
 
-  const bannerIcon = error === ErrorType.Error ? exclamationCircleIcon : exclamationTriangleIcon;
-  const iconColor = error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400;
-  const iconSize = 24;
+  const borderStyleProps = {
+    [borderBottomLeftRadius]: borderRadius.m,
+    [borderTopLeftRadius]: borderRadius.m,
+    [borderBottomRightRadius]: model.state.isSticky ? 0 : borderRadius.m,
+    [borderTopRightRadius]: model.state.isSticky ? 0 : borderRadius.m,
+  };
 
   return (
-    <BannerWrapper
-      aria-label={actionText + ': ' + label}
-      role="button"
-      variant={variant}
-      tabIndex={0}
-      onClick={onClick}
-      error={error}
-      ref={ref}
+    <Flex
+      as={Element}
+      width={model.state.isSticky ? '222px' : '328px'}
+      backgroundColor={palette.normal}
+      color={palette.contrast}
+      padding={`${space.xxs} ${space.s}`}
+      border="0"
+      display="flex"
+      alignItems="center"
+      {...borderStyleProps}
+      css={[styles, themedBackgroundStyles]}
       {...elemProps}
     >
-      <BannerIcon icon={bannerIcon} color={iconColor} colorHover={iconColor} size={iconSize} />
-      <BannerLabel>{label}</BannerLabel>
-      <BannerViewAll variant={variant}>{actionText}</BannerViewAll>
-    </BannerWrapper>
+      {children}
+    </Flex>
   );
-}) as any) as React.FC<BannerProps> & {
-  Variant: typeof BannerVariant;
-  ErrorType: typeof ErrorType;
-};
-
-Banner.Variant = BannerVariant;
-Banner.ErrorType = ErrorType;
-
-export default Banner;
+});