@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

package/tabs/lib/useTabsModel.tsx

@@ -1,125 +1,77 @@
 import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
-  createEventMap,
-  ToModelConfig,
-  useEventMap,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {Orientation} from './cursor';
-import {defaultGetId, ListEvents, ListState, useListModel} from './list';
-import {MenuModel, MenuModelConfig, useMenuModel} from './menu';
-import {
-  overflowEventMap,
-  OverflowEvents,
-  OverflowState,
-  OverflowModelConfig,
-  BaseOverflowModelConfig,
-  useOverflowModel,
-  OverflowModel,
-} from './overflow';
-
-export type TabsState<T> = OverflowState<T> & {
-  /** IDREF of the list. Children ids can be derived from this id */
-  id: string;
-  /**
-   * A list of panels. Uses `ListModel`
-   */
-  panels: T[];
-  /**
-   * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
-   * React state cycle to ensure accurate index tracking as items are registered within the same
-   * state setting phase.
-   */
-  panelIndexRef: ListState<T>['indexRef'];
-  orientation: Orientation;
-  getId: (item: T) => string;
-};
+  defaultGetId,
+  useListModel,
+  useOverflowListModel,
+} from '@workday/canvas-kit-react/collection';
 
-export type TabsEvents<T = unknown> = OverflowEvents<T> & {
-  /**
-   * This event registers panels with state.panels. Called when a panel is mounted.
-   */
-  registerPanel: ListEvents<T>['registerItem'];
-  /**
-   * This event unregisters panels with state.panels. Called when a panel is unmounted.
-   */
-  unregisterPanel: ListEvents<T>['unregisterItem'];
-};
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
 
-export interface TabsModel<T = unknown> extends OverflowModel<T> {
-  state: TabsState<T>;
-  events: TabsEvents<T>;
-  menu: MenuModel<T>;
-}
-
-export const tabEventMap = createEventMap<TabsEvents>()({
-  guards: {
-    ...overflowEventMap.guards,
-  },
-  callbacks: {
-    ...overflowEventMap.callbacks,
+export const useTabsModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
+     * `Tab.Panel` will automatically derived from this id. If not provided, a unique id will be
+     * created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * An initially selected tab. This value must match the `name` of the `Tab.Item` component. If
+     * not provided, the first tab will be selected.
+     */
+    initialTab: '',
+    /**
+     * The default Tabs sub-components only handle rendering of tabs 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>,
   },
-});
-
-export type BaseTabsModelConfig<T> = Omit<BaseOverflowModelConfig<T>, 'orientation'> & {
-  /**
-   * Optional id for the whole `Tabs` group. The `aria-controls` of the `Tab.Item` and `id` of the
-   * `Tab.Panel` will automatically derived from this id. If not provided, a unique id will be
-   * created.
-   * @default useUniqueId()
-   */
-  id?: string;
-  /**
-   * An initially selected tab. This value must match the `name` of the `Tab.Item` component. If
-   * not provided, the first tab will be selected.
-   */
-  initialTab?: string;
-  /**
-   * The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
-   * the sub-components could be replaced to handle vertical orientations.
-   * @default 'horizontal'
-   */
-  orientation?: Orientation;
-  menuConfig?: MenuModelConfig<T>;
-};
-
-export type TabsModelConfig<T> = BaseTabsModelConfig<T> &
-  Partial<ToModelConfig<TabsState<T>, TabsEvents<T>, typeof tabEventMap>>;
-
-export const useTabsModel = <T extends unknown>(config: TabsModelConfig<T> = {}): TabsModel<T> => {
-  const id = useUniqueId(config.id);
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
   const initialSelectedRef = React.useRef(config.initialTab);
   const getId = config.getId || defaultGetId;
 
-  const items = config.items; // || (emptyItems as T[]);
+  const items = config.items;
 
-  const model = useOverflowModel<T>({
-    ...(config as OverflowModelConfig<T>),
-    id: `${id}-tabs`,
-    orientation: config.orientation || 'horizontal',
-    items,
-    onRegisterItem({data, prevState}) {
-      config?.onRegisterItem?.({data, prevState: prevState as TabsState<T>});
-      if (!initialSelectedRef.current) {
-        initialSelectedRef.current = getId(data.item);
-        events.select({id: initialSelectedRef.current});
-      }
-    },
-    initialSelectedIds: config.initialTab
-      ? [config.initialTab]
-      : config.items?.length
-      ? [getId(config.items![0])]
-      : [],
-  });
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = getId(data.item);
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialTab
+        ? [config.initialTab]
+        : config.items?.length
+        ? [getId(config.items![0])]
+        : [],
+      shouldVirtualize: false,
+    })
+  );
 
-  const panels = useListModel<T>();
+  const panels = useListModel();
 
-  const state: TabsState<T> = {
+  const state = {
     ...model.state,
-    id,
     getId,
     orientation: config.orientation || 'horizontal',
+    /**
+     * A list of panels. Uses `ListModel`
+     */
     panels: panels.state.items,
+    /**
+     * A React.Ref of the current item index. A ref is used to allow for updating outside the normal
+     * React state cycle to ensure accurate index tracking as items are registered within the same
+     * state setting phase.
+     */
     panelIndexRef: panels.state.indexRef,
   };
 
@@ -129,33 +81,38 @@ export const useTabsModel = <T extends unknown>(config: TabsModelConfig<T> = {})
     [state.hiddenIds, items]
   );
 
-  const events = useEventMap(tabEventMap, state, config, {
+  const events = {
     ...model.events,
+    /**
+     * This event registers panels with state.panels. Called when a panel is mounted.
+     */
     registerPanel: panels.events.registerItem,
+    /**
+     * This event unregisters panels with state.panels. Called when a panel is unmounted.
+     */
     unregisterPanel: panels.events.unregisterItem,
-  } as TabsEvents<T>);
+  };
 
-  const menu = useMenuModel({
-    id: `${id}-menu`,
-    items: overflowItems,
-    nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
-    onSelect({data, prevState}) {
-      menu.events.hide();
-      events.select(data);
-      config.menuConfig?.onSelect?.({data, prevState});
-    },
-    onShow({data, prevState}) {
-      // Always select the first item when the menu is opened
-      menu.events.first();
-      config.menuConfig?.onShow?.({data, prevState});
-    },
-  });
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onSelect(data) {
+        menu.events.hide();
+        events.select(data);
+      },
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
 
   return {
+    ...model,
     state,
     events,
     menu,
-    getId: model.getId,
-    selection: model.selection,
   };
-};
+});

package/text-input/lib/InputIconContainer.tsx

@@ -5,7 +5,7 @@ import {space} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
 export interface InputIconContainerProps extends GrowthBehavior {
-  icon?: React.ReactElement<SystemIcon>;
+  icon?: React.ReactElement<typeof SystemIcon>;
 }
 
 const Container = styled('div')<InputIconContainerProps>(({grow}) => ({

package/toast/lib/Toast.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {space, colors, type, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {checkIcon} from '@workday/canvas-system-icons-web';
+import {checkIcon, exclamationCircleIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {createComponent, ExtractProps, styled, StyledType} from '@workday/canvas-kit-react/common';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
@@ -85,6 +85,7 @@ export const Toast = createComponent('div')({
     Element
   ) => {
     const isInteractive = onClose || onActionClick;
+    const isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
 
     return (
       <Popup.Card
@@ -92,8 +93,9 @@ export const Toast = createComponent('div')({
         as={Element}
         width={toastWidth}
         padding="s"
-        role={isInteractive ? 'dialog' : 'status'}
-        aria-live={isInteractive ? 'off' : 'polite'}
+        depth={5}
+        role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
+        aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
         aria-atomic={!isInteractive}
         {...elemProps}
       >

package/tokens/README.md

@@ -174,16 +174,19 @@ const buttonSyles = {
 
 ## Depth
 
-Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and priority with shadows and layering. There are five depth levels, `inset`, `1`, `2`, `3`, and `4`. Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and
+priority with shadows and layering. There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5`
+and `6`. `none` is a special value to remove depth styles. All other levels only apply box-shadow
+styles.
 
 ### Usage
 
 ```tsx
-import { depth } from '@workday/canvas-kit-react/tokens';
+import {depth} from '@workday/canvas-kit-react/tokens';
 
 const CustomCard = () => {
-  return <div css={depth[2]}>A standard-depth card</div>;
-}
+  return <div css={depth[1]}>A standard-depth card</div>;
+};
 ```
 
 ## Type
@@ -211,8 +214,8 @@ To use the Canvas Kit font
 
 Canvas Kit v5 introduced `rem` units (instead of `px`) to our type tokens. This update follows the
 guidance [from the WCAG spec](https://www.w3.org/TR/WCAG21/#resize-text) and provides better support
-for users who change their browser's default font size. If you'd like to learn more about `rem` and relative units, you can
-review this
+for users who change their browser's default font size. If you'd like to learn more about `rem` and
+relative units, you can review this
 [documentation](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems).
 
 > **Note:** We are using `16px` as our base font-size for these values. This is a browser standard
@@ -299,8 +302,8 @@ _Intended for standard body text_
 
 _Intended for small subtext content or in tight spaces_
 
-| Size     | Properties                                            |
-| -------- | ----------------------------------------------------- |
+| Size     | Properties                                                   |
+| -------- | ------------------------------------------------------------ |
 | `large`  | fontSize: `14px` (`0.875rem`), fontWeight: `regular` (`400`) |
 | `medium` | fontSize: `12px` (`0.75rem`), fontWeight: `regular` (`400`)  |
 | `small`  | fontSize: `10px` (`0.625rem`), fontWeight: `regular` (`400`) |

package/tokens/lib/depth.ts

@@ -1,23 +1,23 @@
 export type CanvasDepth = {
   /**
-   * ### Depth Inset
-   * 	Used for inset containers
+   * ### Depth None
+   * 	Used for removing existing depth
    *
    * @example
    * ```ts
    * import { depth } from '@workday/canvas-kit-react/tokens';
    *
-   * const insetCardStyles = {
-   *   ...depth.inset,
+   * const noDepthCardStyles = {
+   *   ...depth.none,
    * };
    * ```
    */
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+  none: {
+    boxShadow: 'none';
   };
   /**
    * ### Depth 1
-   * Used for minimal offset
+   * Used for minimal offset and Cards
    *
    * @example
    * ```ts
@@ -29,11 +29,11 @@ export type CanvasDepth = {
    * ```
    */
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 2
-   * Used for Cards, Popups, and Menus — our most common depth
+   * Used for Top navigation, Bottom navigation
    *
    * @example
    * ```ts
@@ -45,11 +45,11 @@ export type CanvasDepth = {
    * ```
    */
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 3
-   * Used for interactive Cards on hover
+   * Used for FABs, Menus
    *
    * @example
    * ```ts
@@ -61,11 +61,11 @@ export type CanvasDepth = {
    * ```
    */
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)';
   };
   /**
    * ### Depth 4
-   * Used for Cards on white backgrounds — adds border styles for more contrast
+   *
    *
    * @example
    * ```ts
@@ -77,8 +77,39 @@ export type CanvasDepth = {
    * ```
    */
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)';
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 5
+   * Used for Popups, Toast Messages, Dialogs, Side Panels without opacity overlay behavior
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[5],
+   * };
+   * ```
+   */
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)';
+  };
+  /**
+   * ### Depth 6
+   * Used for components with opacity overlay behavior such as Modal or Side Panels
+   *
+   * @example
+   * ```ts
+   * import { depth } from '@workday/canvas-kit-react/tokens';
+   *
+   * const cardStyles = {
+   *   ...depth[6],
+   * };
+   * ```
+   */
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)';
   };
 };
 
@@ -90,8 +121,8 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  * Depth is the relative distance between surfaces in the z-axis.
  * It provides delineation, focus, and priority with shadows and layering.
- * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
- * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ * There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
+ * `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
  *
  * @example
  * ```tsx
@@ -108,20 +139,25 @@ export type CanvasDepthValues = ValueOf<CanvasDepth>;
  *
  */
 export const depth: CanvasDepth = {
-  inset: {
-    boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
+  none: {
+    boxShadow: 'none',
   },
   1: {
-    boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
+    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.16)',
   },
   2: {
-    boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
+    boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 4px 16px rgba(0, 0, 0, 0.16)',
   },
   3: {
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 3px 12px rgba(0, 0, 0, 0.2), 0px 6px 24px rgba(0, 0, 0, 0.16)',
   },
   4: {
-    border: '1px solid rgba(218, 226, 230, 1)',
-    boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2), 0px 8px 32px rgba(0, 0, 0, 0.16)',
+  },
+  5: {
+    boxShadow: '0px 5px 20px rgba(0, 0, 0, 0.2), 0px 10px 40px rgba(0, 0, 0, 0.16)',
+  },
+  6: {
+    boxShadow: '0px 6px 24px rgba(0, 0, 0, 0.2), 0px 12px 48px rgba(0, 0, 0, 0.16)',
   },
 };

package/tooltip/README.md

@@ -2,7 +2,8 @@
 
 A Tooltip component that renders information/text when the user hovers over an element. A tooltip is
 used to label or describe an element. By default, a tooltip will label an element. This is useful
-for IconButtons. A tooltip can also be used to describe additional information about an element
+for TertiaryButtons that render just an icon. A tooltip can also be used to describe additional
+information about an element
 
 [> Workday Design Reference](https://design.workday.com/components/popups/tooltips)
 
@@ -18,12 +19,12 @@ yarn add @workday/canvas-kit-react
 import * as React from 'react';
 
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 
 const TooltipExample = () => {
   return (
     <Tooltip title="Close">
-      <IconButton variant="circle" icon={xIcon} aria-label="Close" />
+      <TertiaryButton icon={xIcon} aria-label="Close" />
     </Tooltip>
   );
 };
@@ -60,8 +61,8 @@ const TooltipExample = () => {
 > Determines the tooltip type for accessibility.
 >
 > - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip `title`
->   prop is the same as the text content of the wrapped element. E.g. IconButtons or Ellipsis
->   tooltips.
+>   prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an
+>   icon or Ellipsis tooltips.
 > - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
 >   information about the target. **Note**: Assistive technology may ignore `describe` techniques
 >   based on verbosity settings. Consider an alternate way to inform a user of additional important

package/tooltip/lib/Tooltip.tsx

@@ -31,7 +31,7 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
    * Determines the tooltip type for accessibility.
    *
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-   *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+   *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButtons that render an icon or
    *   Ellipsis tooltips.
    * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.

package/tooltip/lib/useTooltip.tsx

@@ -62,7 +62,7 @@ export function useTooltip<T extends Element = Element>({
    * Determines the tooltip type for accessibility.
    *
    * - `label`: Sets the accessible name for the wrapped element. Use for icons or if tooltip
-   *   `title` prop is the same as the text content of the wrapped element. E.g. IconButtons or
+   *   `title` prop is the same as the text content of the wrapped element. E.g. TertiaryButton that renders an icon or
    *   Ellipsis tooltips.
    * - `describe`: Sets `aria-describedby` of the wrapped element. Use if the tooltip has additional
    *   information about the target.