@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/action-bar/lib/ActionBar.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+
 import {createContainer} from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
-import {useActionBarModel} from './useActionBarModel';
+
+import {ActionBarItem} from './ActionBarItem';
 import {ActionBarList} from './ActionBarList';
 import {ActionBarOverflowButton} from './ActionBarOverflowButton';
-import {ActionBarItem} from './ActionBarItem';
+import {useActionBarModel} from './useActionBarModel';
 
 export interface ActionBarProps {
   /**

package/action-bar/lib/ActionBarItem.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
-  useOverflowListItemMeasure,
   useListItemRegister,
+  useOverflowListItemMeasure,
 } from '@workday/canvas-kit-react/collection';
+import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 
 import {useActionBarModel} from './useActionBarModel';
 

package/action-bar/lib/ActionBarList.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import {system} from '@workday/canvas-tokens-web';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {useListRenderItems, useOverflowListMeasure} from '@workday/canvas-kit-react/collection';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useActionBarModel} from './useActionBarModel';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 
 export interface ActionBarListProps<T = any>
   extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
@@ -34,17 +34,16 @@ export interface ActionBarListProps<T = any>
 export const actionBarListStencil = createStencil({
   base: {
     display: 'flex',
-    boxShadow: system.depth[1],
-    gap: system.space.x4,
-    background: system.color.bg.default,
-    borderBlockStart: `solid 1px ${cssVar(system.color.border.divider)}`,
-    padding: `${cssVar(system.space.x4)} ${cssVar(system.space.x10)} `,
+    boxShadow: system.depth[2],
+    gap: system.legacy.gap.md,
+    background: system.legacy.color.surface.default,
+    borderBlockStart: `solid ${px2rem(1)}  ${system.legacy.color.border.default}`,
+    padding: `${system.legacy.padding.md} ${base.legacy.size500} `,
     position: 'fixed',
     insetBlockEnd: 0,
-    insetInlineStart: 0,
-    insetInlineEnd: 0,
+    insetInline: 0,
     '@media (max-width: 767.5px)': {
-      padding: system.space.x4,
+      padding: system.legacy.size.xxxs,
       '> *': {
         flex: 1,
       },

package/action-bar/lib/ActionBarOverflowButton.tsx

@@ -1,17 +1,17 @@
-import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {SecondaryButton, SecondaryButtonProps} from '@workday/canvas-kit-react/button';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 import {
-  createElemPropsHook,
   composeHooks,
-  createSubcomponent,
+  createElemPropsHook,
   createSubModelElemPropsHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
-
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {useMenuTarget} from '@workday/canvas-kit-react/menu';
-import {useActionBarModel} from './useActionBarModel';
-import {SecondaryButton, SecondaryButtonProps} from '@workday/canvas-kit-react/button';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
+
+import {useActionBarModel} from './useActionBarModel';
 
 export interface ActionBarOverflowButtonProps extends SecondaryButtonProps {
   'aria-label': string;

package/action-bar/lib/useActionBarModel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {createModelHook} from '@workday/canvas-kit-react/common';
-import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
 
+import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 import {useMenuModel} from '@workday/canvas-kit-react/menu';
 
 export const useActionBarModel = createModelHook({
@@ -49,8 +49,8 @@ export const useActionBarModel = createModelHook({
     !config.maximumVisible || config.maximumVisible < 1
       ? 3 // should fallback to default value
       : config.maximumVisible > totalSize
-      ? totalSize
-      : config.maximumVisible;
+        ? totalSize
+        : config.maximumVisible;
 
   if (totalSize - hiddenIds.length >= maximumVisible) {
     hiddenIds = items.slice(maximumVisible, totalSize).map(getId);

package/avatar/index.ts

@@ -1 +1,5 @@
 export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';

package/avatar/lib/Avatar.tsx

@@ -1,55 +1,14 @@
-import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {createStencil, calc, CSProps, px2rem} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, SystemIconCircleSize, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import React from 'react';
 
-import {userIcon} from '@workday/canvas-system-icons-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-/**
- * @deprecated ⚠️ `AvatarVariant` is deprecated and will be removed in a future major version. Update your types and values to use the string literal of either `light` or `dark`.
- */
-export enum AvatarVariant {
-  Light,
-  Dark,
-}
+import {AvatarNameProps} from './AvatarName';
+import {BaseAvatar, BaseAvatarProps, baseAvatarStencil} from './BaseAvatar';
 
-/**
- * @deprecated ⚠️ `AvatarProps` is deprecated and will be removed in a future major version. Please use the `Avatar` component from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
-export interface AvatarProps extends CSProps {
-  /**
-   * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
-   * @default "light"
-   */
-  variant?: 'light' | 'dark' | AvatarVariant;
-  /**
-   * The size of the Avatar.
-   * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
-   * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
-   * - `large`: 2.5rem x 2.5rem (40px x 40px)
-   * - `medium`: 2rem x 2rem (32px x 32px)
-   * - `small`: 1.5rem x 1.5rem (24px x 24px)
-   * - `small`: 1rem x 1rem (16px x 16px)
-   * @default "medium"
-   */
-  size?: /** size of small */
-  | 'extraSmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'extraLarge'
-    | 'extraExtraLarge'
-    | (string & {})
-    | SystemIconCircleSize
-    | number;
-  /**
-   * The alt text of the Avatar image. This prop is also used for the aria-label.
-   */
-  altText?: string;
+export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
   /**
    * The URL of the user's photo. For best fit, use square images.
    */
@@ -59,256 +18,139 @@ export interface AvatarProps extends CSProps {
    * @default "contain"
    */
   objectFit?: Property.ObjectFit;
+  /**
+   * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
+   */
+  isDecorative?: boolean;
 }
 
-/**
- * @deprecated `avatarStencil` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
- */
 export const avatarStencil = createStencil({
-  vars: {
-    size: '',
-  },
+  extends: baseAvatarStencil,
   parts: {
-    icon: 'avatar-icon',
-    image: 'avatar-image',
+    avatarImage: 'avatar-image',
+    avatarName: 'avatar-name',
   },
-  base: ({size, iconPart, imagePart}) => ({
-    background: system.color.bg.caution.default,
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    overflow: 'hidden',
-    cursor: 'default',
-    pointerEvents: 'none',
-    borderRadius: system.shape.round,
-    width: size,
-    height: size,
-    '&:focus-visible, &.focus': {
-      outline: 'none',
-      ...focusRing({separation: 2}),
-    },
-    ':is(button)': {
-      cursor: 'pointer',
-      pointerEvents: 'auto',
-    },
-    '&:disabled, &.disabled': {
-      opacity: system.opacity.disabled,
-    },
-    [iconPart]: {
-      transition: 'opacity 150ms linear',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      [systemIconStencil.vars.size]: calc.multiply(size, 0.625),
-      opacity: 1,
-    },
-    [imagePart]: {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      borderRadius: borderRadius.circle,
-      transition: 'opacity 150ms linear',
-      opacity: 0,
-    },
-  }),
+  base: {},
   modifiers: {
-    variant: {
-      light: ({iconPart}) => ({
-        backgroundColor: system.color.bg.alt.default,
-        [iconPart]: {
-          [systemIconStencil.vars.color]: system.color.fg.default,
-        },
-      }),
-      dark: ({iconPart}) => ({
-        backgroundColor: system.color.bg.primary.default,
-        [iconPart]: {
-          [systemIconStencil.vars.color]: system.color.fg.inverse,
-        },
-      }),
-    },
-    size: {
-      extraSmall: ({iconPart}) => ({
-        width: system.space.x4,
-        height: system.space.x4,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
-        },
-      }),
-      small: ({iconPart}) => ({
-        width: system.space.x6,
-        height: system.space.x6,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
-        },
-      }),
-      medium: ({iconPart}) => ({
-        width: system.space.x8,
-        height: system.space.x8,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
-        },
-      }),
-      large: ({iconPart}) => ({
-        width: system.space.x10,
-        height: system.space.x10,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
-        },
-      }),
-      extraLarge: ({iconPart}) => ({
-        width: system.space.x16,
-        height: system.space.x16,
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
-        },
-      }),
-      extraExtraLarge: ({iconPart}) => ({
-        width: calc.multiply(system.space.x10, 3),
-        height: calc.multiply(system.space.x10, 3),
-        [iconPart]: {
-          [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
+    imageLoaded: {
+      false: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          display: 'none',
         },
       }),
+      true: {
+        backgroundColor: system.color.bg.default,
+      },
     },
     objectFit: {
-      contain: ({imagePart}) => ({
-        [imagePart]: {
+      contain: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'contain',
         },
       }),
-      fill: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: 'fill',
-        },
-      }),
-      cover: ({imagePart}) => ({
-        [imagePart]: {
+      cover: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'cover',
         },
       }),
-      ['scale-down']: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: 'scale-down',
+      fill: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'fill',
         },
       }),
-      none: ({imagePart}) => ({
-        [imagePart]: {
+      none: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'none',
         },
       }),
-      ['-moz-initial']: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: '-moz-initial',
+      ['scale-down']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'scale-down',
         },
       }),
-      ['initial']: ({imagePart}) => ({
-        [imagePart]: {
+      initial: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'initial',
         },
       }),
-      ['inherit']: ({imagePart}) => ({
-        [imagePart]: {
+
+      inherit: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'inherit',
         },
       }),
-      ['revert']: ({imagePart}) => ({
-        [imagePart]: {
-          objectFit: 'revert',
-        },
-      }),
-      ['unset']: ({imagePart}) => ({
-        [imagePart]: {
+      unset: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
           objectFit: 'unset',
         },
       }),
-    },
-    isImageLoaded: {
-      true: ({iconPart, imagePart}) => ({
-        [iconPart]: {
-          opacity: 0,
+      ['-moz-initial']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: '-moz-initial',
         },
-        [imagePart]: {
-          opacity: 1,
+      }),
+      ['revert']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'revert',
         },
       }),
     },
   },
-  defaultModifiers: {
-    variant: 'light',
-    objectFit: 'contain',
-  },
 });
 
 /**
- * @deprecated ⚠️ `Avatar` is deprecated and will be removed in a future major version. Please use `Avatar` from the Preview package instead (@workday/canvas-kit-preview-react/avatar).
+ * JSDoc for Avatar. Will be part of the Component API docs
  */
-export const Avatar = createComponent('button')({
+export const Avatar = createComponent('div')({
   displayName: 'Avatar',
+
   Component: (
-    {variant, size = 'medium', altText, url, objectFit, ...elemProps}: AvatarProps,
+    {
+      url,
+      name,
+      variant,
+      objectFit = 'contain',
+      preferredInitials,
+      isDecorative,
+      size,
+      ...elemProps
+    }: AvatarProps,
     ref,
     Element
   ) => {
-    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageLoaded, setImageLoaded] = React.useState(false);
 
-    const loadImage = () => {
+    const handleImageLoad = () => {
       if (!imageLoaded) {
         setImageLoaded(true);
       }
     };
 
-    React.useLayoutEffect(() => {
-      setImageLoaded(false);
-    }, [url]);
-
-    // TODO: Remove this warning for a hard breaking change in v13
-    if (process.env.NODE_ENV === 'development') {
-      if (typeof variant === 'number') {
-        console.warn(
-          'Avatar: Avatar.Variant is deprecated and will be removed in v13. Please use a string literal of "light"  or "dark"'
-        );
-      }
-      if (typeof size === 'number') {
-        console.warn(
-          "Avatar: Avatar.Size is deprecated and will be removed in v13. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})"
-        );
-      }
-    }
-
     return (
-      <Element
+      <BaseAvatar
+        as={Element}
         ref={ref}
-        aria-label={Element === 'button' ? altText : undefined}
-        {...mergeStyles(elemProps, [
-          avatarStencil({
-            variant:
-              variant === AvatarVariant.Light
-                ? 'light'
-                : variant === AvatarVariant.Dark
-                ? 'dark'
-                : variant,
-            size: typeof size === 'number' ? px2rem(size) : size,
-            objectFit,
-            isImageLoaded: imageLoaded,
-          }),
-        ])}
+        {...handleCsProp(elemProps, avatarStencil({variant, size, imageLoaded, objectFit}))}
       >
-        <SystemIcon {...avatarStencil.parts.icon} icon={userIcon} />
-        {url && <img {...avatarStencil.parts.image} src={url} alt={altText} onLoad={loadImage} />}
-      </Element>
+        {url && (
+          <>
+            <BaseAvatar.Image
+              onLoad={handleImageLoad}
+              src={url}
+              alt={isDecorative ? undefined : name}
+              aria-hidden={isDecorative}
+              {...avatarStencil.parts.avatarImage}
+            />
+          </>
+        )}
+        {name && (!url || !imageLoaded) && (
+          <BaseAvatar.Name
+            name={name}
+            preferredInitials={preferredInitials}
+            {...avatarStencil.parts.avatarName}
+          />
+        )}
+      </BaseAvatar>
     );
   },
-  subComponents: {
-    /**
-     * @deprecated ⚠️ `Avatar.Variant` is deprecated and will be removed in a future major version. Use the string literal of `light` or `dark`.
-     */
-    Variant: AvatarVariant,
-    /**
-     * @deprecated ⚠️ `Avatar.Size` is deprecated and will be removed in a future major version. Use the string literal values for size: 'extraSmall' | 'small | 'medium' | 'large' | 'extraLarge | 'extraExtraLarge' | (string & {})
-     */
-    Size: SystemIconCircleSize,
-  },
 });

package/avatar/lib/AvatarImage.tsx

@@ -0,0 +1,19 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+
+export interface AvatarImageProps extends CSProps {}
+
+export const avatarImageStencil = createStencil({
+  base: {
+    height: '100%',
+    width: '100%',
+    objectFit: 'cover',
+  },
+});
+
+export const AvatarImage = createComponent('img')({
+  displayName: 'AvatarImage',
+  Component: ({...elemProps}: AvatarImageProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, avatarImageStencil())} />;
+  },
+});

package/avatar/lib/AvatarName.tsx

@@ -0,0 +1,33 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+
+import {getInitialsFromName} from './getInitialsFromName';
+
+export interface AvatarNameProps extends CSProps {
+  /**
+   * The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
+   */
+  name: string;
+  /**
+   * If you want full control over the initials, use `preferredInitials` instead.
+   */
+  preferredInitials?: string;
+}
+
+export const avatarNameStencil = createStencil({
+  base: {
+    textTransform: 'uppercase',
+    cursor: 'default',
+  },
+});
+
+export const AvatarName = createComponent('span')({
+  displayName: 'AvatarName',
+  Component: ({name, preferredInitials, ...elemProps}: AvatarNameProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, avatarNameStencil())}>
+        {preferredInitials || getInitialsFromName(name)}
+      </Element>
+    );
+  },
+});