@workday/canvas-kit-preview-react 13.0.0-alpha.998-next.0 → 13.0.0

package/menu/lib/Menu.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {DeprecatedMenuItemProps} from './MenuItem';
 import {Card} from '@workday/canvas-kit-react/card';
 import {commonColors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {hideMouseFocus, GrowthBehavior, generateUniqueId} from '@workday/canvas-kit-react/common';
+import {GrowthBehavior, generateUniqueId} from '@workday/canvas-kit-react/common';
 
 /**
  * @deprecated ⚠️ `DeprecatedMenuProps` has been deprecated and will be removed in a future major version. Please use [Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic) instead.
@@ -62,10 +62,9 @@ const List = styled('ul')({
   borderRadius: borderRadius.m,
   padding: 0,
   margin: `${space.xxs} 0`,
-  '&:focus': {
+  '&:focus-visible, &.focus': {
     outline: 'none',
   },
-  ...hideMouseFocus,
 });
 
 /**

package/multi-select/lib/MultiSelectCard.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   createElemPropsHook,
   createSubcomponent,

package/multi-select/lib/MultiSelectInput.tsx

@@ -11,6 +11,7 @@ import {
 import {createStencil, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {getCursor} from '@workday/canvas-kit-react/collection';
 import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
 
 import {useMultiSelectModel} from './useMultiSelectModel';
@@ -90,7 +91,7 @@ export const useMultiSelectInput = composeHooks(
       onKeyDown(event: React.KeyboardEvent) {
         // Space bar key is hit and menu is open
         if (event.key === ' ' && model.state.visibility === 'visible') {
-          const id = model.state.cursorId;
+          const id = getCursor(model.state);
           // There are 2 modes. Search mode and navigation mode. Searching clears the cursor. Using
           // the down arrow enables the cursor and thus navigation mode.
           // - Navigation mode: toggle cursor item

package/multi-select/lib/MultiSelectItem.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {handleCsProp} from '@workday/canvas-kit-styling';
 
 import {

package/multi-select/lib/MultiSelectedItem.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   composeHooks,
   createElemPropsHook,
@@ -39,7 +37,7 @@ export const MultiSelectedItem = createSubcomponent('span')({
 })<MultiSelectedItemProps>(({children, removeLabel, ref, ...elemProps}, Element) => {
   return (
     <Pill as={Element} variant="removable">
-      {children}
+      <Pill.Label>{children}</Pill.Label>
       <Pill.IconButton aria-label={removeLabel} ref={ref} {...(elemProps as any)} />
     </Pill>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "13.0.0-alpha.998-next.0",
+  "version": "13.0.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,15 +41,15 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": ">=16.14"
+    "react": ">=17.0"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.998-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.998-next.0",
+    "@workday/canvas-kit-react": "^13.0.0",
+    "@workday/canvas-kit-styling": "^13.0.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.1.0",
+    "@workday/canvas-tokens-web": "^2.1.1",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "d95041596e2b948c0a371f4c763746a98c58b2da"
+  "gitHead": "3cb203410f3b0b8b912e6ec84a846d3108e4958f"
 }

package/pill/index.ts

@@ -1,2 +1,7 @@
 export * from './lib/Pill';
 export * from './lib/usePillModel';
+export {pillCountStencil} from './lib/PillCount';
+export {pillIconButtonStencil} from './lib/PillIconButton';
+export {pillIconStencil} from './lib/PillIcon';
+export {pillLabelStencil} from './lib/PillLabel';
+export {pillStencil, removeablePillStencil, readyOnlyPillStencil} from './lib/Pill';

package/pill/lib/Pill.tsx

@@ -1,19 +1,17 @@
-import React from 'react';
-
-import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
-import {createContainer, focusRing, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
-import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
-import {handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
+import {buttonStencil} from '@workday/canvas-kit-react/button';
+import {createContainer, focusRing} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {px2rem, createStencil, cssVar} from '@workday/canvas-kit-styling';
 
 import {usePillModel} from './usePillModel';
 
 import {PillIcon} from './PillIcon';
 import {PillIconButton} from './PillIconButton';
-import {PillCount} from './PillCount';
+import {PillCount, pillCountStencil} from './PillCount';
 import {PillAvatar} from './PillAvatar';
 import {PillLabel} from './PillLabel';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export interface PillProps extends BoxProps {
   /**
@@ -21,154 +19,133 @@ export interface PillProps extends BoxProps {
    * @default 'default'
    */
   variant?: 'default' | 'readOnly' | 'removable';
+  /**
+   * Determines the max width of the pill. If the pill text is longer than the max width,
+   * text will be truncated and a tooltip will show the rest of the content when hovered over
+   */
+  maxWidth?: string | number;
 }
 
-const StyledBasePill = styled(BaseButton)<StyledType & PillProps>(
-  {
-    display: 'inline-flex',
+export const pillStencil = createStencil({
+  extends: buttonStencil,
+  vars: {
+    maxWidth: '',
+  },
+  base: ({maxWidth}) => ({
+    display: 'initial',
+    flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: borderRadius.m,
-    flexShrink: 0,
-    ...type.levels.subtext.large,
-    color: colors.blackPepper400,
+    borderRadius: system.shape.x1,
+    ...system.type.subtext.large,
+    lineHeight: system.lineHeight.subtext.small, // ensure correct line height when there's no elements and just text
     boxShadow: 'none',
     outline: 'none',
-    fontWeight: type.properties.fontWeights.medium,
+    fontWeight: system.fontWeight.medium,
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
     width: 'fit-content',
-    padding: `2px ${space.xxs}`,
-    height: space.m,
+    padding: `${px2rem(2)} ${cssVar(system.space.x2)}`,
+    height: system.space.x6,
     position: 'relative',
-    'span[data-count="ck-pill-count"]': {
-      borderTop: `${px2rem(1)} solid transparent`,
-      borderBottom: `${px2rem(1)} solid transparent`,
-      borderRight: `${px2rem(1)} solid transparent`,
-    },
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: colors.licorice200,
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    [systemIconStencil.vars.color]: colors.licorice200,
-    // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
-    button: {
-      [systemIconStencil.vars.color]: colors.licorice200,
+    gap: system.space.x1,
+    maxWidth: maxWidth,
+    [buttonStencil.vars.background]: system.color.bg.alt.default,
+    [buttonStencil.vars.border]: system.color.border.input.default,
+    [buttonStencil.vars.label]: system.color.text.strong,
+    [systemIconStencil.vars.color]: system.color.icon.default,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    '&:has(span)': {
+      display: 'flex',
+      lineHeight: system.lineHeight.subtext.large, // ensure correct line height
     },
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: colors.soap300,
-      [buttonStencil.vars.border]: colors.blueberry400,
-      [buttonStencil.vars.label]: colors.blackPepper400,
-      [systemIconStencil.vars.color]: colors.licorice500,
-      button: {
-        [systemIconStencil.vars.color]: colors.licorice500,
-      },
-      'span[data-count="ck-pill-count"]': {
-        borderColor: colors.blueberry400,
-      },
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+      [buttonStencil.vars.border]: system.color.border.primary.default,
+      [buttonStencil.vars.label]: system.color.text.strong,
+      [systemIconStencil.vars.color]: system.color.icon.strong,
+      borderColor: system.color.border.primary.default,
+      [pillCountStencil.vars.borderColor]: system.color.border.primary.default,
+
+      ...focusRing({
+        width: 0,
+        inset: 'inner',
+        innerColor: system.color.border.primary.default,
+        outerColor: system.color.border.primary.default,
+        separation: 1,
+      }),
     },
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colors.soap400,
-      [buttonStencil.vars.border]: colors.licorice400,
-      [buttonStencil.vars.label]: colors.blackPepper400,
-      [systemIconStencil.vars.color]: colors.licorice500,
-      button: {
-        [systemIconStencil.vars.color]: colors.licorice500,
-      },
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.border]: system.color.border.input.strong,
+      [buttonStencil.vars.label]: system.color.text.strong,
+      [systemIconStencil.vars.color]: system.color.icon.strong,
     },
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colors.soap500,
-      [buttonStencil.vars.border]: colors.licorice500,
-      [buttonStencil.vars.label]: colors.blackPepper400,
-      [systemIconStencil.vars.color]: colors.licorice500,
-      button: {
-        [buttonStencil.vars.background]: colors.soap500,
-        [systemIconStencil.vars.color]: colors.licorice500,
-      },
-      'span[data-count="ck-pill-count"]': {
-        backgroundColor: colors.soap600,
-        borderColor: 'transparent',
-      },
+      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
+      [buttonStencil.vars.border]: system.color.border.input.strong,
+      [buttonStencil.vars.label]: system.color.text.strong,
+      [systemIconStencil.vars.color]: system.color.icon.strong,
+      [pillCountStencil.vars.backgroundColor]: base.soap600,
+      [pillCountStencil.vars.borderColor]: 'transparent',
     },
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: colors.soap100,
-      [buttonStencil.vars.border]: colors.licorice100,
-      [buttonStencil.vars.label]: colors.licorice100,
+      [buttonStencil.vars.background]: system.color.bg.alt.softer,
+      [buttonStencil.vars.border]: system.color.border.input.disabled,
+      [buttonStencil.vars.label]: system.color.text.disabled,
       [buttonStencil.vars.opacity]: '1',
-      [systemIconStencil.vars.color]: colors.licorice100,
-      button: {
-        [systemIconStencil.vars.color]: colors.licorice100,
-      },
+      [systemIconStencil.vars.color]: system.color.icon.soft,
+      [pillCountStencil.vars.backgroundColor]: system.color.bg.alt.default,
+      [pillCountStencil.vars.borderColor]: 'transparent',
     },
-  },
+  }),
+});
 
-  ({variant}) => ({
+export const removeablePillStencil = createStencil({
+  extends: pillStencil,
+  base: {
     '&:focus-visible, &.focus': {
-      borderColor: variant === 'removable' ? undefined : colors.blueberry400,
-      ...focusRing({
-        width: 0,
-        inset: 'inner',
-        innerColor: colors.blueberry400,
-        outerColor: colors.blueberry400,
-        separation: 1,
-      }),
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+      [buttonStencil.vars.border]: system.color.border.input.default,
+      [buttonStencil.vars.label]: system.color.text.strong,
+      boxShadow: 'none',
     },
-  }),
-  boxStyleFn
-);
-
-const StyledRemoveablePill = styled(StyledBasePill)<StyledType & CSProps>({
-  [buttonStencil.vars.background]: colors.soap300,
-  [buttonStencil.vars.border]: colors.licorice200,
-  [buttonStencil.vars.label]: colors.blackPepper400,
-  [systemIconStencil.vars.backgroundColor]: colors.soap100,
-
-  '&:focus-visible, &.focus': {
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: colors.licorice200,
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    [systemIconStencil.vars.backgroundColor]: colors.soap300,
-    boxShadow: 'none',
-  },
-
-  '&:hover, &.hover': {
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: colors.licorice200,
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    [systemIconStencil.vars.backgroundColor]: colors.soap300,
-  },
-
-  '&:active, &.active': {
-    [buttonStencil.vars.background]: colors.soap500,
-    [buttonStencil.vars.border]: colors.licorice500,
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    [systemIconStencil.vars.backgroundColor]: colors.soap500,
-  },
-
-  '&:disabled, &.disabled': {
-    [buttonStencil.vars.background]: colors.soap100,
-    [buttonStencil.vars.label]: colors.licorice100,
-    [buttonStencil.vars.border]: colors.licorice100,
-    [systemIconStencil.vars.backgroundColor]: colors.soap100,
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+    },
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: system.color.bg.alt.softer,
+      [systemIconStencil.vars.color]: system.color.icon.soft,
+    },
+    cursor: 'default',
+    overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
+    position: 'relative',
   },
-  cursor: 'default',
-  overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
-  position: 'relative',
 });
 
-const StyledReadOnlyPill = styled(StyledRemoveablePill)<StyledType>({
-  [buttonStencil.vars.background]: 'transparent',
-  '&:hover, &.hover': {
-    [buttonStencil.vars.background]: 'transparent',
-  },
-  '&:focus-visible, &.focus': {
-    [buttonStencil.vars.background]: 'transparent',
-  },
-  '&:active, &.active': {
-    [buttonStencil.vars.background]: 'transparent',
-  },
-  '&:disabled, &.disabled': {
+export const readyOnlyPillStencil = createStencil({
+  extends: pillStencil,
+  base: {
+    border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
+    cursor: 'default',
     [buttonStencil.vars.background]: 'transparent',
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: 'transparent',
+    },
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: 'transparent',
+    },
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: 'transparent',
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: 'transparent',
+    },
   },
-  border: `${px2rem(1)} solid ${colors.licorice200}`,
 });
 
 /**
@@ -199,7 +176,7 @@ const StyledReadOnlyPill = styled(StyledRemoveablePill)<StyledType>({
  * ```tsx
  * <Pill variant="removable">
  *   <Pill.Avatar /> Regina Skeltor
- *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
  * </Pill>
  * ```
  *
@@ -210,7 +187,7 @@ const StyledReadOnlyPill = styled(StyledRemoveablePill)<StyledType>({
  * ```tsx
  * <Pill variant="removable">
  *   Shoes
- *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
  * </Pill>
  * ```
  */
@@ -224,8 +201,8 @@ export const Pill = createContainer('button')({
      * ```tsx
      * <Pill variant="removable">
      *   <Pill.Avatar url={avatarUrl} />
-     *   Regina Skeltor
-     *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+     *    <Pill.Label>Regina Skeltor</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
      * </Pill>
      * ```
      */
@@ -235,20 +212,19 @@ export const Pill = createContainer('button')({
      *
      * ```tsx
      * <Pill onClick={() => console.warn('clicked')}>
-     *   Shoes
+     *    <Pill.Label>Shoes</Pill.Label>
      *   <Pill.Count>30</Pill.Count>
      * </Pill>
      * ```
      */
     Count: PillCount,
     /**
-     * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
-     * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
-     * providing an icon to the `icon` prop.
+     * This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
      *
      * ```tsx
      * <Pill onClick={() => console.warn('clicked')}>
-     *   <Pill.Icon />
+     *   <Pill.Icon aria-label='Add user' />
      *   <Pill.Label>Regina Skeltor</Pill.Label>
      * </Pill>
      * ```
@@ -261,15 +237,15 @@ export const Pill = createContainer('button')({
      *
      * ```tsx
      * <Pill variant="removable">
-     *   Pink Shirts
-     *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+     *   <Pill.Label>Pink Shirts</Pill.Label>
+     *   <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
      * </Pill>
      * ```
      */
     IconButton: PillIconButton,
     /**
      * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
-     * There's no need to use this component directly since the overflow is handled for you automatically.
+     * There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
      *
      * ```tsx
      * <Pill variant="readOnly">
@@ -279,51 +255,47 @@ export const Pill = createContainer('button')({
      */
     Label: PillLabel,
   },
-})<PillProps>(({variant = 'default', maxWidth, ...elemProps}, Element, model) => {
+})<PillProps>(({variant = 'default', maxWidth = 200, children, ...elemProps}, Element, model) => {
+  const maxWidthCSSValue = typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth;
   return (
     <>
       {variant === 'readOnly' && (
-        <StyledReadOnlyPill
+        <Box
           as={Element !== 'button' ? Element : 'span'}
           id={model.state.id}
-          maxWidth={model.state.maxWidth}
-          {...elemProps}
+          {...mergeStyles(
+            elemProps,
+            readyOnlyPillStencil({
+              maxWidth: maxWidthCSSValue,
+            })
+          )}
         >
-          <PillLabel>{elemProps.children}</PillLabel>
-        </StyledReadOnlyPill>
+          <PillLabel>{children}</PillLabel>
+        </Box>
       )}
       {variant === 'default' && (
-        <StyledBasePill as={Element} {...elemProps} disabled={model.state.disabled}>
-          <Flex gap="xxxs" display="inline-flex" alignItems="center">
-            {React.Children.map(elemProps.children, (child, index) => {
-              if (typeof child === 'string') {
-                return <PillLabel key={index}>{child}</PillLabel>;
-              }
-              return (
-                <Flex.Item key={index} display="inline-flex">
-                  {child}
-                </Flex.Item>
-              );
-            })}
-          </Flex>
-        </StyledBasePill>
+        <Element
+          disabled={model.state.disabled}
+          {...mergeStyles(elemProps, [
+            model.state.disabled ? 'disabled' : undefined,
+            pillStencil({
+              maxWidth: maxWidthCSSValue,
+            }),
+          ])}
+        >
+          {children}
+        </Element>
       )}
       {variant === 'removable' && (
-        <StyledRemoveablePill
+        <Box
           as={Element !== 'button' ? Element : 'span'}
-          variant={variant}
-          type={undefined}
-          {...handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])}
+          {...mergeStyles(elemProps, [
+            model.state.disabled ? 'disabled' : undefined,
+            removeablePillStencil({maxWidth: maxWidthCSSValue}),
+          ])}
         >
-          <Flex gap="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
-            {React.Children.map(elemProps.children, (child, index) => {
-              if (typeof child === 'string') {
-                return <PillLabel key={index}>{child}</PillLabel>;
-              }
-              return <Flex.Item key={index}>{child}</Flex.Item>;
-            })}
-          </Flex>
-        </StyledRemoveablePill>
+          {children}
+        </Box>
       )}
     </>
   );

package/pill/lib/PillAvatar.tsx

@@ -1,25 +1,31 @@
-import React from 'react';
-
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
-import {Avatar, AvatarProps} from '@workday/canvas-kit-react/avatar';
+import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-react/avatar';
 import {usePillModel} from './usePillModel';
-import {px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface PillAvatarProps extends AvatarProps {}
 
-// When the component is created, it needs to be a button element to match AvatarProps.
-// Once Avatar becomes a `createComponent` we can default the element type to a `div`
-// and the types should be properly extracted
+export const pillAvatarStencil = createStencil({
+  extends: avatarStencil,
+  base: {
+    cursor: 'pointer',
+    flex: '0 0 auto',
+  },
+});
+
 export const PillAvatar = createSubcomponent('div')({
   modelHook: usePillModel,
-})<PillAvatarProps>(({...elemProps}: PillAvatarProps, Element, model) => {
+})<PillAvatarProps>(({size, ...elemProps}: PillAvatarProps, Element, _model) => {
   return (
     <Avatar
-      style={{opacity: model.state.disabled ? '.7' : '1'}}
-      size={px2rem(18)}
+      aria-hidden={true}
       as={Element}
-      altText={undefined}
-      {...elemProps}
-    ></Avatar>
+      size={px2rem(18)}
+      {...mergeStyles(elemProps, [
+        pillAvatarStencil(),
+        _model.state.disabled ? 'disabled' : undefined,
+      ])}
+    />
   );
 });