From a04e4767308dddee4e331b1756e0e6a0e37d535b Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Mon, 24 Jun 2024 17:57:57 -0400
Subject: [PATCH 01/31] Starting refactor of Avatar component using storybook -
 WIP as breaking build

---
 modules/react/avatar/lib/Avatar.tsx       | 293 ++++++++++++----------
 modules/react/avatar/spec/Avatar.spec.tsx |  45 +++-
 2 files changed, 202 insertions(+), 136 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 010886d5ea..0c643f9f18 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,49 +1,17 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {styled, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
-import isPropValid from '@emotion/is-prop-valid';
-import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
-import {SystemIconCircle, SystemIconCircleSize} from '@workday/canvas-kit-react/icon';
+import {
+  createComponent,
+  focusRing,
+  hideMouseFocus,
+  pickForegroundColor,
+} from '@workday/canvas-kit-react/common';
+import {cssVar, createStencil, px2rem, calc} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {SystemIconCircleSize, SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {userIcon} from '@workday/canvas-system-icons-web';
-
-export enum AvatarVariant {
-  Light,
-  Dark,
-}
-
-export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The variant of the Avatar default state. Accepts `Light` or `Dark`.
-   * @default AvatarVariant.Light
-   */
-  variant?: AvatarVariant;
-  /**
-   * The size of the Avatar.
-   * @default SystemIconCircleSize.m
-   */
-  size?: SystemIconCircleSize | number;
-  /**
-   * The alt text of the Avatar image. This prop is also used for the aria-label
-   * @default Avatar
-   */
-  altText?: string;
-  /**
-   * The url of the Avatar image.
-   */
-  url?: string;
-  /**
-   * The alternative container type for the button. Uses Emotion's special `as` prop.
-   * Will render an `div` tag instead of a `button` when defined.
-   */
-  as?: 'div';
-  /**
-   * The object-fit CSS property sets how the content of a replaced element,
-   * such as an `<img>` or `<video>`, should be resized to fit its container.
-   * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
-   * If your image is not a square, you can use this property to ensure the image is rendered properly.
-   */
-  objectFit?: Property.ObjectFit;
-}
+import {base, system} from '@workday/canvas-tokens-web';
 
 /**
  * Used to get the props of the div version of an avatar
@@ -57,26 +25,47 @@ type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLBut
 type AvatarOverload = {
   (props: {as: 'div'} & AvatarDivProps & {ref?: React.Ref<HTMLElement>}): React.ReactElement;
   (props: Omit<AvatarProps, 'as'> & {ref?: React.Ref<HTMLButtonElement>}): React.ReactElement;
-  Variant: typeof AvatarVariant;
+  Variant: 'light' | 'dark';
   Size: typeof SystemIconCircleSize;
 };
 
-const fadeTransition = 'opacity 150ms linear';
+export interface AvatarProps {
+  /**
+   * The variant of the Avatar default state. Accepts `Light` or `Dark`.
+   * @default 'light'
+   */
+  variant?: 'light' | 'dark';
+  /**
+   * The size of the Avatar.
+   * @default `system.space.x8`
+   */
+  size?: string | number;
+  /**
+   * The alt text of the Avatar image. This prop is also used for the aria-label
+   * @default Avatar
+   */
+  altText?: string;
+  background?: string;
+  url?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  objectFit?: Property.ObjectFit;
+}
 
-const StyledContainer = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<Pick<AvatarProps, 'size' | 'onClick'>>(
-  {
-    background: colors.soap200,
+const avatarContainerStencil = createStencil({
+  vars: {size: ''},
+  base: ({size}) => ({
+    background: base.soap200,
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     padding: 0,
     border: 0,
-    boxSizing: 'border-box',
     overflow: 'hidden',
-    borderRadius: borderRadius.circle,
+    cursor: 'default',
+    borderRadius: system.shape.round,
+    width: cssVar(size, system.space.x8),
+    height: cssVar(size, system.space.x8),
     '&:not([disabled])': {
       '&:focus': {
         outline: 'none',
@@ -84,62 +73,73 @@ const StyledContainer = styled('button', {
       },
     },
     ...hideMouseFocus,
-  },
-  ({size}) => ({
-    height: size,
-    width: size,
   }),
-  ({onClick}) => ({
-    cursor: onClick ? 'pointer' : 'default',
-  })
-);
-
-const StyledStack = styled('span')<Pick<AvatarProps, 'size'>>(
-  {
-    position: 'absolute',
-    top: 0,
-    left: 0,
+  modifiers: {
+    hasOnClick: {
+      true: {
+        cursor: 'pointer',
+      },
+    },
   },
-  ({size}) => ({
-    height: size,
-    width: size,
-  })
-);
+});
 
-const StyledIcon = styled(SystemIconCircle)<{isImageLoaded: boolean}>(
-  {
-    transition: fadeTransition,
+const avatarIconStencil = createStencil({
+  vars: {size: ''},
+  base: ({size}) => ({
+    transition: 'opacity 150ms linear',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: 1,
+    width: cssVar(size, system.space.x8),
+    height: cssVar(size, system.space.x8),
+  }),
+  modifiers: {
+    variant: {
+      light: {
+        backgroundColor: system.color.bg.alt.default,
+      },
+      dark: {
+        backgroundColor: system.color.bg.primary.default,
+        [systemIconStencil.vars.color]: system.color.fg.inverse,
+      },
+    },
+    isImageLoaded: {
+      true: {
+        opacity: 0,
+      },
+    },
   },
-  ({isImageLoaded}) => ({
-    opacity: isImageLoaded ? 0 : 1,
-  })
-);
+});
 
-const StyledImage = styled('img')<{isLoaded: boolean; objectFit?: Property.ObjectFit}>(
-  {
+const avatarImageStencil = createStencil({
+  vars: {objectFit: ''},
+  base: ({objectFit}) => ({
     width: '100%',
     height: '100%',
+    opacity: 1,
     borderRadius: borderRadius.circle,
-    transition: fadeTransition,
+    transition: 'opacity 150ms linear',
+    objectFit: cssVar(objectFit, 'container'),
+  }),
+  modifiers: {
+    isImageLoaded: {
+      true: {
+        opacity: 1,
+      },
+      false: {
+        opacity: 0,
+      },
+    },
   },
-  ({isLoaded, objectFit}) => ({
-    opacity: isLoaded ? 1 : 0,
-    objectFit,
-  })
-);
+});
 
-export const Avatar: AvatarOverload = React.forwardRef(
-  (
-    {
-      variant = AvatarVariant.Light,
-      size = SystemIconCircleSize.m,
-      altText = 'Avatar',
-      url,
-      onClick,
-      objectFit,
-      ...elemProps
-    }: AvatarProps,
-    ref: React.Ref<HTMLButtonElement>
+export const Avatar: AvatarOverload = createComponent('button')({
+  displayName: 'Avatar',
+  Component: (
+    {variant, size, altText, url, onClick, objectFit, background, ...elemProps}: AvatarProps,
+    ref,
+    Element
   ) => {
     const [imageLoaded, setImageLoaded] = useState(false);
 
@@ -153,40 +153,81 @@ export const Avatar: AvatarOverload = React.forwardRef(
       setImageLoaded(false);
     }, [url]);
 
-    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
+    const backgroundFallback = background && !background.startsWith('--') ? background : '#F0F1F2';
+    const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', '#fff');
 
     return (
-      <StyledContainer
-        size={size}
+      <Element
+        ref={ref}
         aria-label={altText}
         onClick={onClick}
-        disabled={onClick ? false : true}
-        ref={ref}
-        {...elemProps}
+        {...mergeStyles(elemProps, [
+          avatarContainerStencil({
+            size: typeof size === 'number' ? px2rem(size) : size,
+            hasOnClick: onClick !== undefined,
+          }),
+        ])}
       >
-        <StyledStack size={size}>
-          <StyledIcon
-            icon={userIcon}
-            background={background}
-            size={size}
-            isImageLoaded={imageLoaded}
-          />
-        </StyledStack>
-        {url && (
-          <StyledStack size={size}>
-            <StyledImage
-              src={url}
-              alt={altText}
-              onLoad={loadImage}
-              isLoaded={imageLoaded}
-              objectFit={objectFit}
+        {!imageLoaded && (
+          <div
+            {...systemIconCircleStencil({
+              containerSize: typeof size === 'number' ? px2rem(size) : size,
+              backgroundColor: background,
+              iconColor,
+            })}
+          >
+            <SystemIcon
+              icon={userIcon}
+              {...mergeStyles(elemProps, [
+                avatarIconStencil({
+                  variant,
+                  isImageLoaded: imageLoaded,
+                  size: typeof size === 'number' ? px2rem(size) : size,
+                }),
+              ])}
             />
-          </StyledStack>
+          </div>
+        )}
+        {url && (
+          <img
+            {...mergeStyles(elemProps, [
+              avatarImageStencil({
+                isImageLoaded: imageLoaded,
+                objectFit,
+              }),
+            ])}
+            src={url}
+            alt={altText}
+            onLoad={loadImage}
+          />
         )}
-      </StyledContainer>
+      </Element>
     );
-  }
-) as any; // AvatarProps and forwardRef signatures are incompatible, so we must force cast
+  },
+});
 
-Avatar.Variant = AvatarVariant;
-Avatar.Size = SystemIconCircleSize;
+const systemIconCircleStencil = createStencil({
+  vars: {
+    containerSize: '',
+    backgroundColor: '',
+    iconColor: '',
+  },
+  base: ({backgroundColor, containerSize, iconColor}) => ({
+    background: cssVar(backgroundColor, base.soap200),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: system.space.zero,
+    border: 'none',
+    borderRadius: system.shape.round,
+    overflow: 'hidden',
+    width: cssVar(containerSize, system.space.x10),
+    height: cssVar(containerSize, system.space.x10),
+    [systemIconStencil.vars.size]: calc.multiply(cssVar(containerSize, system.space.x10), 0.625),
+    [systemIconStencil.vars.color]: iconColor,
+    '& img': {
+      width: '100%',
+      height: '100%',
+    },
+  }),
+});
diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 41772d6ceb..36b5e62b93 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -1,29 +1,26 @@
 import * as React from 'react';
-import {Avatar} from '../lib/Avatar';
 import {render, fireEvent} from '@testing-library/react';
+import {Avatar} from '../lib/Avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 describe('Avatar', () => {
   it('should render a button element', () => {
     const screen = render(<Avatar data-testid="test" />);
-
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('should forward extra attributes to the container', () => {
-    const screen = render(<Avatar id="myAvatar" />);
-
-    expect(screen.getByRole('button')).toHaveAttribute('id', 'myAvatar');
+    const {getByRole} = render(<Avatar id="myAvatar" />);
+    expect(getByRole('button')).toHaveAttribute('id', 'myAvatar');
   });
 
   it('should set the aria-label of the button with the altText prop', () => {
     const screen = render(<Avatar altText="My alt text" />);
-
     expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'My alt text');
   });
 
   it('should set the url of the image when passed the url prop', () => {
     const screen = render(<Avatar url="https://example.com/image.png" altText="My alt text" />);
-
     expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.com/image.png');
     expect(screen.getByRole('img')).toHaveAttribute('alt', 'My alt text');
   });
@@ -31,21 +28,49 @@ describe('Avatar', () => {
   it('should forward ref to the button element', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const screen = render(<Avatar ref={ref} />);
-
     expect(ref.current).toEqual(screen.getByRole('button'));
   });
 
   it('should call onClick callback when clicked', () => {
     const fn = jest.fn();
     const screen = render(<Avatar onClick={fn} />);
-
     fireEvent.click(screen.getByRole('button'));
     expect(fn).toBeCalled();
   });
 
   it('should render a div when as prop is specified', () => {
     const screen = render(<Avatar as="div" data-testid="test" />);
-
     expect(screen.getByTestId('test').tagName.toLowerCase()).toEqual('div');
   });
+
+  it('should apply the variant class when variant prop is specified', () => {
+    const {container} = render(<Avatar variant="dark" />);
+    expect(container.firstChild).toHaveClass('dark');
+  });
+
+  it('should apply the size class when size prop is specified', () => {
+    const {container} = render(<Avatar size={40} />);
+    expect(container.firstChild).toHaveStyle(`width: ${px2rem(40)}`);
+  });
+
+  it('should set the background color when background prop is specified', () => {
+    const {container} = render(<Avatar background="red" />);
+    expect(container.firstChild).toHaveStyle('background: red');
+  });
+
+  it('should set the object fit of the image when objectFit prop is specified', () => {
+    const screen = render(<Avatar url="https://example.com/image.png" objectFit="cover" />);
+    expect(screen.getByRole('img')).toHaveStyle('object-fit: cover');
+  });
+
+  it('should hide the icon when the image is loaded', () => {
+    const screen = render(<Avatar url="https://example.com/image.png" />);
+    fireEvent.load(screen.getByRole('img'));
+    expect(screen.queryByRole('img')).toHaveStyle('opacity: 1');
+  });
+
+  it('should show the icon when the image is not loaded', () => {
+    const {container} = render(<Avatar url="https://example.com/image.png" />);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
 });

From 0cd1908b0409de8b7e31fe6e4ccab0e2b3c5dc79 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 26 Jun 2024 17:00:27 -0400
Subject: [PATCH 02/31] feature(Avatar): updated size prop, variant edits,
 opacity edits - still WIP and added notes

---
 modules/react/avatar/lib/Avatar.tsx       | 153 +++++++++++++---------
 modules/react/avatar/spec/Avatar.spec.tsx |  19 +--
 modules/react/avatar/stories/stories.tsx  | 104 ++++++---------
 3 files changed, 140 insertions(+), 136 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 0c643f9f18..3554405021 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,12 +1,7 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {
-  createComponent,
-  focusRing,
-  hideMouseFocus,
-  pickForegroundColor,
-} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, px2rem, calc} from '@workday/canvas-kit-styling';
+import {createComponent, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
+import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIconCircleSize, SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -37,9 +32,9 @@ export interface AvatarProps {
   variant?: 'light' | 'dark';
   /**
    * The size of the Avatar.
-   * @default `system.space.x8`
+   * @default `medium`
    */
-  size?: string | number;
+  size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge';
   /**
    * The alt text of the Avatar image. This prop is also used for the aria-label
    * @default Avatar
@@ -52,8 +47,7 @@ export interface AvatarProps {
 }
 
 const avatarContainerStencil = createStencil({
-  vars: {size: ''},
-  base: ({size}) => ({
+  base: {
     background: base.soap200,
     position: 'relative',
     display: 'flex',
@@ -64,8 +58,6 @@ const avatarContainerStencil = createStencil({
     overflow: 'hidden',
     cursor: 'default',
     borderRadius: system.shape.round,
-    width: cssVar(size, system.space.x8),
-    height: cssVar(size, system.space.x8),
     '&:not([disabled])': {
       '&:focus': {
         outline: 'none',
@@ -73,12 +65,50 @@ const avatarContainerStencil = createStencil({
       },
     },
     ...hideMouseFocus,
-  }),
+  },
   modifiers: {
+    variant: {
+      light: {
+        backgroundColor: system.color.bg.alt.default,
+      },
+      dark: {
+        backgroundColor: system.color.bg.primary.default,
+        [systemIconStencil.vars.color]: system.color.fg.inverse,
+      },
+    },
+    size: {
+      extraSmall: {
+        width: system.space.x4,
+        height: system.space.x4,
+      },
+      small: {
+        width: system.space.x6,
+        height: system.space.x6,
+      },
+      medium: {
+        width: system.space.x8,
+        height: system.space.x8,
+      },
+      large: {
+        width: system.space.x10,
+        height: system.space.x10,
+      },
+      extraLarge: {
+        width: system.space.x16,
+        height: system.space.x16,
+      },
+      extraExtraLarge: {
+        width: calc.multiply(system.space.x10, 3),
+        height: calc.multiply(system.space.x10, 3),
+      },
+    },
     hasOnClick: {
       true: {
         cursor: 'pointer',
       },
+      false: {
+        cursor: 'default',
+      },
     },
   },
 });
@@ -90,7 +120,6 @@ const avatarIconStencil = createStencil({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    opacity: 1,
     width: cssVar(size, system.space.x8),
     height: cssVar(size, system.space.x8),
   }),
@@ -104,20 +133,47 @@ const avatarIconStencil = createStencil({
         [systemIconStencil.vars.color]: system.color.fg.inverse,
       },
     },
+    size: {
+      extraSmall: {
+        [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
+      },
+      small: {
+        [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
+      },
+      medium: {
+        [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
+      },
+      large: {
+        [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
+      },
+      extraLarge: {
+        [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
+      },
+      extraExtraLarge: {
+        [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
+      },
+    },
     isImageLoaded: {
       true: {
         opacity: 0,
       },
+      false: {
+        opacity: 1,
+      },
     },
   },
+  defaultModifiers: {
+    isImageLoaded: 'false',
+  },
 });
 
+// NOTE: Objectfit not working
 const avatarImageStencil = createStencil({
   vars: {objectFit: ''},
   base: ({objectFit}) => ({
+    position: 'absolute',
     width: '100%',
     height: '100%',
-    opacity: 1,
     borderRadius: borderRadius.circle,
     transition: 'opacity 150ms linear',
     objectFit: cssVar(objectFit, 'container'),
@@ -132,6 +188,9 @@ const avatarImageStencil = createStencil({
       },
     },
   },
+  defaultModifiers: {
+    isImageLoaded: 'false',
+  },
 });
 
 export const Avatar: AvatarOverload = createComponent('button')({
@@ -153,8 +212,7 @@ export const Avatar: AvatarOverload = createComponent('button')({
       setImageLoaded(false);
     }, [url]);
 
-    const backgroundFallback = background && !background.startsWith('--') ? background : '#F0F1F2';
-    const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', '#fff');
+    // NOTE: Background color isn't dynamic - only default is variant light or dark
 
     return (
       <Element
@@ -163,31 +221,22 @@ export const Avatar: AvatarOverload = createComponent('button')({
         onClick={onClick}
         {...mergeStyles(elemProps, [
           avatarContainerStencil({
-            size: typeof size === 'number' ? px2rem(size) : size,
+            variant,
+            size,
             hasOnClick: onClick !== undefined,
           }),
         ])}
       >
-        {!imageLoaded && (
-          <div
-            {...systemIconCircleStencil({
-              containerSize: typeof size === 'number' ? px2rem(size) : size,
-              backgroundColor: background,
-              iconColor,
-            })}
-          >
-            <SystemIcon
-              icon={userIcon}
-              {...mergeStyles(elemProps, [
-                avatarIconStencil({
-                  variant,
-                  isImageLoaded: imageLoaded,
-                  size: typeof size === 'number' ? px2rem(size) : size,
-                }),
-              ])}
-            />
-          </div>
-        )}
+        <SystemIcon
+          icon={userIcon}
+          {...mergeStyles(elemProps, [
+            avatarIconStencil({
+              variant,
+              isImageLoaded: imageLoaded,
+              size,
+            }),
+          ])}
+        />
         {url && (
           <img
             {...mergeStyles(elemProps, [
@@ -205,29 +254,3 @@ export const Avatar: AvatarOverload = createComponent('button')({
     );
   },
 });
-
-const systemIconCircleStencil = createStencil({
-  vars: {
-    containerSize: '',
-    backgroundColor: '',
-    iconColor: '',
-  },
-  base: ({backgroundColor, containerSize, iconColor}) => ({
-    background: cssVar(backgroundColor, base.soap200),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: system.space.zero,
-    border: 'none',
-    borderRadius: system.shape.round,
-    overflow: 'hidden',
-    width: cssVar(containerSize, system.space.x10),
-    height: cssVar(containerSize, system.space.x10),
-    [systemIconStencil.vars.size]: calc.multiply(cssVar(containerSize, system.space.x10), 0.625),
-    [systemIconStencil.vars.color]: iconColor,
-    '& img': {
-      width: '100%',
-      height: '100%',
-    },
-  }),
-});
diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 36b5e62b93..1c2f49b925 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {render, fireEvent} from '@testing-library/react';
 import {Avatar} from '../lib/Avatar';
-import {px2rem} from '@workday/canvas-kit-styling';
 
 describe('Avatar', () => {
   it('should render a button element', () => {
@@ -9,10 +8,11 @@ describe('Avatar', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
-  it('should forward extra attributes to the container', () => {
-    const {getByRole} = render(<Avatar id="myAvatar" />);
-    expect(getByRole('button')).toHaveAttribute('id', 'myAvatar');
-  });
+  // NOTE: Property 'as' is missing in type '{ id: string; }' but required in type '{ as: "div"; }'.
+  // it('should forward extra attributes to the container', () => {
+  //   const {getByRole} = render(<Avatar id="myAvatar" />);
+  //   expect(getByRole('button')).toHaveAttribute('id', 'myAvatar');
+  // });
 
   it('should set the aria-label of the button with the altText prop', () => {
     const screen = render(<Avatar altText="My alt text" />);
@@ -48,10 +48,11 @@ describe('Avatar', () => {
     expect(container.firstChild).toHaveClass('dark');
   });
 
-  it('should apply the size class when size prop is specified', () => {
-    const {container} = render(<Avatar size={40} />);
-    expect(container.firstChild).toHaveStyle(`width: ${px2rem(40)}`);
-  });
+  // NOTE: Need to make size prop dynamic
+  // it('should apply the size class when size prop is specified', () => {
+  //   const {container} = render(<Avatar size={40} />);
+  //   expect(container.firstChild).toHaveStyle(`width: ${px2rem(40)}`);
+  // });
 
   it('should set the background color when background prop is specified', () => {
     const {container} = render(<Avatar background="red" />);
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 288a046109..33a97b82f0 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -13,49 +13,49 @@ storiesOf('Components/Indicators/Avatar', module)
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xxl} />
+      <Avatar as="div" size={'extraExtraLarge'} />
       <h3>Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xl} />
+      <Avatar as="div" size={'extraLarge'} />
       <h3>Large</h3>
-      <Avatar as="div" size={Avatar.Size.l} />
+      <Avatar as="div" size={'large'} />
       <h3>Medium</h3>
-      <Avatar as="div" size={Avatar.Size.m} />
+      <Avatar as="div" size={'medium'} />
       <h3>Small</h3>
-      <Avatar as="div" size={Avatar.Size.s} />
+      <Avatar as="div" size={'small'} />
       <h3>Extra Small</h3>
-      <Avatar as="div" size={Avatar.Size.xs} />
+      <Avatar as="div" size={'extraSmall'} />
     </div>
   ))
   .add('Dark', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xxl} variant={Avatar.Variant.Dark} />
+      <Avatar as="div" size={'extraExtraLarge'} variant={'dark'} />
       <h3>Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xl} variant={Avatar.Variant.Dark} />
+      <Avatar as="div" size={'extraLarge'} variant={'dark'} />
       <h3>Large</h3>
-      <Avatar as="div" size={Avatar.Size.l} variant={Avatar.Variant.Dark} />
+      <Avatar as="div" size={'large'} variant={'dark'} />
       <h3>Medium</h3>
-      <Avatar as="div" size={Avatar.Size.m} variant={Avatar.Variant.Dark} />
+      <Avatar as="div" size={'medium'} variant={'dark'} />
       <h3>Small</h3>
-      <Avatar as="div" size={Avatar.Size.s} variant={Avatar.Variant.Dark} />
+      <Avatar as="div" size={'small'} variant={'dark'} />
       <h3>Extra Small</h3>
-      <Avatar as="div" size={Avatar.Size.xs} variant={Avatar.Variant.Dark} />
+      <Avatar as="div" size={'extraSmall'} variant={'dark'} />
     </div>
   ))
   .add('Image', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xxl} url={testAvatar} />
+      <Avatar as="div" size={'extraExtraLarge'} url={testAvatar} />
       <h3>Extra Large</h3>
-      <Avatar as="div" size={Avatar.Size.xl} url={testAvatar} />
+      <Avatar as="div" size={'extraLarge'} url={testAvatar} />
       <h3>Large</h3>
-      <Avatar as="div" size={Avatar.Size.l} url={testAvatar} />
+      <Avatar as="div" size={'large'} url={testAvatar} />
       <h3>Medium</h3>
-      <Avatar as="div" size={Avatar.Size.m} url={testAvatar} />
+      <Avatar as="div" size={'medium'} url={testAvatar} />
       <h3>Small</h3>
-      <Avatar as="div" size={Avatar.Size.s} url={testAvatar} />
+      <Avatar as="div" size={'small'} url={testAvatar} />
       <h3>Extra Small</h3>
-      <Avatar as="div" size={Avatar.Size.xs} url={testAvatar} />
+      <Avatar as="div" size={'extraSmall'} url={testAvatar} />
     </div>
   ))
   .add('Non-Square Image', () => (
@@ -63,11 +63,15 @@ storiesOf('Components/Indicators/Avatar', module)
       <h3>Original Rectangle Image</h3>
       <img alt="" src="https://placekitten.com/g/450/200" />
       <h3>Using Object Fit on a Rectangle Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" />
+      <Avatar as="div" url="https://placekitten.com/g/450/200" objectFit="contain" />
+      {/* NOTE: Need to make size dynamic */}
+      {/* <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" /> */}
       <h3>Original Square Image</h3>
       <img alt="" src="https://placekitten.com/g/450/450" />
       <h3>Using a Square Image</h3>
-      <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" />
+      <Avatar as="div" url="https://placekitten.com/g/450/450" />
+      {/* NOTE: Need to make size dynamic */}
+      {/* <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" /> */}
     </div>
   ));
 
@@ -77,73 +81,49 @@ storiesOf('Components/Indicators/Avatar/Avatar Button', module)
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar size={Avatar.Size.xxl} onClick={handleAvatarButtonClick} />
+      <Avatar size={'extraExtraLarge'} onClick={handleAvatarButtonClick} />
       <h3>Extra Large</h3>
-      <Avatar size={Avatar.Size.xl} onClick={handleAvatarButtonClick} />
+      <Avatar size={'extraLarge'} onClick={handleAvatarButtonClick} />
       <h3>Large</h3>
-      <Avatar size={Avatar.Size.l} onClick={handleAvatarButtonClick} />
+      <Avatar size={'large'} onClick={handleAvatarButtonClick} />
       <h3>Medium</h3>
-      <Avatar size={Avatar.Size.m} onClick={handleAvatarButtonClick} />
+      <Avatar size={'medium'} onClick={handleAvatarButtonClick} />
       <h3>Small</h3>
-      <Avatar size={Avatar.Size.s} onClick={handleAvatarButtonClick} />
+      <Avatar size={'small'} onClick={handleAvatarButtonClick} />
       <h3>Extra Small</h3>
-      <Avatar size={Avatar.Size.xs} onClick={handleAvatarButtonClick} />
+      <Avatar size={'extraSmall'} onClick={handleAvatarButtonClick} />
     </div>
   ))
   .add('Dark', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar
-        size={Avatar.Size.xxl}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
+      <Avatar size={'extraExtraLarge'} variant={'dark'} onClick={handleAvatarButtonClick} />
       <h3>Extra Large</h3>
-      <Avatar
-        size={Avatar.Size.xl}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
+      <Avatar size={'extraLarge'} variant={'dark'} onClick={handleAvatarButtonClick} />
       <h3>Large</h3>
-      <Avatar
-        size={Avatar.Size.l}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
+      <Avatar size={'large'} variant={'dark'} onClick={handleAvatarButtonClick} />
       <h3>Medium</h3>
-      <Avatar
-        size={Avatar.Size.m}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
+      <Avatar size={'medium'} variant={'dark'} onClick={handleAvatarButtonClick} />
       <h3>Small</h3>
-      <Avatar
-        size={Avatar.Size.s}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
+      <Avatar size={'small'} variant={'dark'} onClick={handleAvatarButtonClick} />
       <h3>Extra Small</h3>
-      <Avatar
-        size={Avatar.Size.xs}
-        variant={Avatar.Variant.Dark}
-        onClick={handleAvatarButtonClick}
-      />
+      <Avatar size={'extraSmall'} variant={'dark'} onClick={handleAvatarButtonClick} />
     </div>
   ))
   .add('Image', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar size={Avatar.Size.xxl} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size={'extraExtraLarge'} url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Extra Large</h3>
-      <Avatar size={Avatar.Size.xl} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size={'extraLarge'} url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Large</h3>
-      <Avatar size={Avatar.Size.l} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size={'large'} url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Medium</h3>
-      <Avatar size={Avatar.Size.m} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size={'medium'} url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Small</h3>
-      <Avatar size={Avatar.Size.s} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size={'small'} url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Extra Small</h3>
-      <Avatar size={Avatar.Size.xs} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size={'extraSmall'} url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Broken Link</h3>
       <Avatar url="/fake/path/to/image.png" onClick={handleAvatarButtonClick} />
     </div>

From 222f48675be58670e00f2bcf90b54255db82ec9c Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Thu, 27 Jun 2024 10:11:08 -0400
Subject: [PATCH 03/31] fix: must remove hideMouseFocus or breaks build

---
 modules/react/avatar/lib/Avatar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 3554405021..6dff3e42dd 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -64,7 +64,8 @@ const avatarContainerStencil = createStencil({
         ...focusRing({separation: 2}),
       },
     },
-    ...hideMouseFocus,
+    // NOTE: Why does this break the build?
+    // ...hideMouseFocus,
   },
   modifiers: {
     variant: {

From 3693d05df1b8bfae80eee2a8d368d254a6f32ff7 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Fri, 28 Jun 2024 10:19:55 -0600
Subject: [PATCH 04/31] Update modules/react/avatar/lib/Avatar.tsx

---
 modules/react/avatar/lib/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 6dff3e42dd..f4ac1c6212 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {createComponent, focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
+import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
 import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';

From 184aea1770e3dea43e066c71d96797feb583996b Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Mon, 1 Jul 2024 13:08:03 -0600
Subject: [PATCH 05/31] fix: Update to clean up stencils

---
 modules/react/avatar/lib/Avatar.tsx | 111 ++++++++++++----------------
 1 file changed, 48 insertions(+), 63 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index f4ac1c6212..cd4c24c7a2 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -47,6 +47,9 @@ export interface AvatarProps {
 }
 
 const avatarContainerStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+  },
   base: {
     background: base.soap200,
     position: 'relative',
@@ -58,49 +61,77 @@ const avatarContainerStencil = createStencil({
     overflow: 'hidden',
     cursor: 'default',
     borderRadius: system.shape.round,
-    '&:not([disabled])': {
-      '&:focus': {
-        outline: 'none',
-        ...focusRing({separation: 2}),
-      },
+    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+      outline: 'none',
+      ...focusRing({separation: 2}),
+    },
+
+    ['& > [data-element-avatar-icon="true"]']: {
+      transition: 'opacity 150ms linear',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // width: system.space.x8,
+      // height: system.space.x8,
     },
-    // NOTE: Why does this break the build?
-    // ...hideMouseFocus,
   },
   modifiers: {
     variant: {
       light: {
         backgroundColor: system.color.bg.alt.default,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.color]: system.color.fg.default,
+        },
       },
       dark: {
         backgroundColor: system.color.bg.primary.default,
-        [systemIconStencil.vars.color]: system.color.fg.inverse,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.color]: system.color.fg.inverse,
+        },
       },
     },
     size: {
       extraSmall: {
         width: system.space.x4,
         height: system.space.x4,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
+        },
       },
       small: {
         width: system.space.x6,
         height: system.space.x6,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
+        },
       },
       medium: {
         width: system.space.x8,
         height: system.space.x8,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
+        },
       },
       large: {
         width: system.space.x10,
         height: system.space.x10,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
+        },
       },
       extraLarge: {
         width: system.space.x16,
         height: system.space.x16,
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
+        },
       },
       extraExtraLarge: {
         width: calc.multiply(system.space.x10, 3),
         height: calc.multiply(system.space.x10, 3),
+        ['& [data-element-avatar-icon="true"]']: {
+          [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
+        },
       },
     },
     hasOnClick: {
@@ -111,59 +142,22 @@ const avatarContainerStencil = createStencil({
         cursor: 'default',
       },
     },
-  },
-});
-
-const avatarIconStencil = createStencil({
-  vars: {size: ''},
-  base: ({size}) => ({
-    transition: 'opacity 150ms linear',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: cssVar(size, system.space.x8),
-    height: cssVar(size, system.space.x8),
-  }),
-  modifiers: {
-    variant: {
-      light: {
-        backgroundColor: system.color.bg.alt.default,
-      },
-      dark: {
-        backgroundColor: system.color.bg.primary.default,
-        [systemIconStencil.vars.color]: system.color.fg.inverse,
-      },
-    },
-    size: {
-      extraSmall: {
-        [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
-      },
-      small: {
-        [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
-      },
-      medium: {
-        [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
-      },
-      large: {
-        [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
-      },
-      extraLarge: {
-        [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
-      },
-      extraExtraLarge: {
-        [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
-      },
-    },
     isImageLoaded: {
       true: {
-        opacity: 0,
+        ['& [data-element-avatar-icon="true"]']: {
+          opacity: 0,
+        },
       },
       false: {
-        opacity: 1,
+        ['& [data-element-avatar-icon="true"]']: {
+          opacity: 1,
+        },
       },
     },
   },
   defaultModifiers: {
+    variant: 'light',
+    size: 'medium',
     isImageLoaded: 'false',
   },
 });
@@ -228,16 +222,7 @@ export const Avatar: AvatarOverload = createComponent('button')({
           }),
         ])}
       >
-        <SystemIcon
-          icon={userIcon}
-          {...mergeStyles(elemProps, [
-            avatarIconStencil({
-              variant,
-              isImageLoaded: imageLoaded,
-              size,
-            }),
-          ])}
-        />
+        <SystemIcon icon={userIcon} data-element-avatar-icon />
         {url && (
           <img
             {...mergeStyles(elemProps, [

From 68e2528c0bca01e1e1ebe2ffe58b3494ecd86b85 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Sun, 7 Jul 2024 17:21:35 -0400
Subject: [PATCH 06/31] fix: updated stencils to be in one main stencil +
 modified background color functionality

---
 modules/react/avatar/lib/Avatar.tsx      | 104 +++++++++++++----------
 modules/react/avatar/stories/stories.tsx |   3 +-
 2 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index cd4c24c7a2..1a204e134c 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
-import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createComponent, focusRing, pickForegroundColor} from '@workday/canvas-kit-react/common';
 import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
@@ -49,9 +49,11 @@ export interface AvatarProps {
 const avatarContainerStencil = createStencil({
   vars: {
     backgroundColor: '',
+    iconColor: '',
+    objectFit: '',
   },
-  base: {
-    background: base.soap200,
+  base: ({backgroundColor, objectFit}) => ({
+    background: backgroundColor,
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
@@ -65,7 +67,6 @@ const avatarContainerStencil = createStencil({
       outline: 'none',
       ...focusRing({separation: 2}),
     },
-
     ['& > [data-element-avatar-icon="true"]']: {
       transition: 'opacity 150ms linear',
       display: 'flex',
@@ -74,17 +75,28 @@ const avatarContainerStencil = createStencil({
       // width: system.space.x8,
       // height: system.space.x8,
     },
-  },
+    ['& > [data-element-avatar-image="true"]']: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      borderRadius: borderRadius.circle,
+      transition: 'opacity 150ms linear',
+      //NOTE: Cannot get typing to work with objectFit property.objectfit vs string
+      //objectFit: cssVar(objectFit, 'contain'),
+    },
+  }),
   modifiers: {
     variant: {
       light: {
-        backgroundColor: system.color.bg.alt.default,
+        // backgroundColor: system.color.bg.alt.default,
+        // NOTE: how to use iconColor for this color? needed for color contrast
         ['& [data-element-avatar-icon="true"]']: {
           [systemIconStencil.vars.color]: system.color.fg.default,
         },
       },
       dark: {
-        backgroundColor: system.color.bg.primary.default,
+        // backgroundColor: system.color.bg.primary.default,
+        // NOTE: how to use iconColor for this color? needed for color contrast
         ['& [data-element-avatar-icon="true"]']: {
           [systemIconStencil.vars.color]: system.color.fg.inverse,
         },
@@ -147,11 +159,17 @@ const avatarContainerStencil = createStencil({
         ['& [data-element-avatar-icon="true"]']: {
           opacity: 0,
         },
+        ['& [data-element-avatar-image="true"]']: {
+          opacity: 1,
+        },
       },
       false: {
         ['& [data-element-avatar-icon="true"]']: {
           opacity: 1,
         },
+        ['& [data-element-avatar-image="true"]']: {
+          opacity: 0,
+        },
       },
     },
   },
@@ -162,32 +180,6 @@ const avatarContainerStencil = createStencil({
   },
 });
 
-// NOTE: Objectfit not working
-const avatarImageStencil = createStencil({
-  vars: {objectFit: ''},
-  base: ({objectFit}) => ({
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius.circle,
-    transition: 'opacity 150ms linear',
-    objectFit: cssVar(objectFit, 'container'),
-  }),
-  modifiers: {
-    isImageLoaded: {
-      true: {
-        opacity: 1,
-      },
-      false: {
-        opacity: 0,
-      },
-    },
-  },
-  defaultModifiers: {
-    isImageLoaded: 'false',
-  },
-});
-
 export const Avatar: AvatarOverload = createComponent('button')({
   displayName: 'Avatar',
   Component: (
@@ -207,7 +199,33 @@ export const Avatar: AvatarOverload = createComponent('button')({
       setImageLoaded(false);
     }, [url]);
 
-    // NOTE: Background color isn't dynamic - only default is variant light or dark
+    const getVariantBackgroundColor = (variant: 'light' | 'dark' | undefined) => {
+      switch (variant) {
+        case 'light':
+          return system.color.bg.alt.default;
+        case 'dark':
+          return system.color.bg.primary.default;
+        default:
+          return base.soap200;
+      }
+    };
+
+    const getBackgroundColor = (
+      background?: Property.BackgroundColor,
+      variant?: 'light' | 'dark'
+    ) => {
+      if (background) {
+        return background;
+      }
+      return getVariantBackgroundColor(variant);
+    };
+
+    const backgroundColor = getBackgroundColor(background, variant);
+    const iconColor = pickForegroundColor(
+      backgroundColor,
+      system.color.fg.inverse,
+      system.color.fg.default
+    );
 
     return (
       <Element
@@ -218,24 +236,16 @@ export const Avatar: AvatarOverload = createComponent('button')({
           avatarContainerStencil({
             variant,
             size,
+            objectFit,
+            backgroundColor,
+            iconColor,
+            isImageLoaded: imageLoaded,
             hasOnClick: onClick !== undefined,
           }),
         ])}
       >
         <SystemIcon icon={userIcon} data-element-avatar-icon />
-        {url && (
-          <img
-            {...mergeStyles(elemProps, [
-              avatarImageStencil({
-                isImageLoaded: imageLoaded,
-                objectFit,
-              }),
-            ])}
-            src={url}
-            alt={altText}
-            onLoad={loadImage}
-          />
-        )}
+        {url && <img data-element-avatar-image src={url} alt={altText} onLoad={loadImage} />}
       </Element>
     );
   },
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 33a97b82f0..688973c1d6 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -13,7 +13,8 @@ storiesOf('Components/Indicators/Avatar', module)
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={'extraExtraLarge'} />
+      {/* NOTE: For testing using background here */}
+      <Avatar as="div" size={'extraExtraLarge'} background="black" />
       <h3>Extra Large</h3>
       <Avatar as="div" size={'extraLarge'} />
       <h3>Large</h3>

From 8a4ecd03c691c970827d1cfbd5af53420d591e9c Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Sun, 7 Jul 2024 17:24:02 -0400
Subject: [PATCH 07/31] fix: uncommented iconcolor to fix build

---
 modules/react/avatar/lib/Avatar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 1a204e134c..573bd080a6 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -221,11 +221,11 @@ export const Avatar: AvatarOverload = createComponent('button')({
     };
 
     const backgroundColor = getBackgroundColor(background, variant);
-    const iconColor = pickForegroundColor(
-      backgroundColor,
-      system.color.fg.inverse,
-      system.color.fg.default
-    );
+    // const iconColor = pickForegroundColor(
+    //   backgroundColor,
+    //   system.color.fg.inverse,
+    //   system.color.fg.default
+    // );
 
     return (
       <Element
@@ -238,7 +238,7 @@ export const Avatar: AvatarOverload = createComponent('button')({
             size,
             objectFit,
             backgroundColor,
-            iconColor,
+            // iconColor,
             isImageLoaded: imageLoaded,
             hasOnClick: onClick !== undefined,
           }),

From 9e2ad0e19c03f2b171ab763de347473004fd91ba Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Fri, 12 Jul 2024 14:41:00 -0600
Subject: [PATCH 08/31] fix: Get sizing working with number

---
 modules/react/avatar/lib/Avatar.tsx      | 102 ++++++++++++++---------
 modules/react/avatar/stories/stories.tsx |  14 +++-
 2 files changed, 76 insertions(+), 40 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 573bd080a6..2b60f0c3fd 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
 import {createComponent, focusRing, pickForegroundColor} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
+import {cssVar, createStencil, calc, createVars, px2rem} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIconCircleSize, SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -34,26 +34,27 @@ export interface AvatarProps {
    * The size of the Avatar.
    * @default `medium`
    */
-  size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge';
+  size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | number;
+  // size: SystemIconCircleSize | number;
   /**
    * The alt text of the Avatar image. This prop is also used for the aria-label
    * @default Avatar
    */
   altText?: string;
-  background?: string;
   url?: string;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   objectFit?: Property.ObjectFit;
 }
+export const avatarVars = createVars('background');
 
-const avatarContainerStencil = createStencil({
+export const avatarStencil = createStencil({
+  extends: systemIconStencil,
   vars: {
-    backgroundColor: '',
-    iconColor: '',
-    objectFit: '',
+    size: '',
+    objectFit: 'contain',
   },
-  base: ({backgroundColor, objectFit}) => ({
-    background: backgroundColor,
+  base: ({objectFit, size}) => ({
+    background: cssVar(avatarVars.background, system.color.bg.caution.default),
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
@@ -63,6 +64,8 @@ const avatarContainerStencil = createStencil({
     overflow: 'hidden',
     cursor: 'default',
     borderRadius: system.shape.round,
+    width: cssVar(size),
+    height: cssVar(size),
     '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
       outline: 'none',
       ...focusRing({separation: 2}),
@@ -81,21 +84,20 @@ const avatarContainerStencil = createStencil({
       height: '100%',
       borderRadius: borderRadius.circle,
       transition: 'opacity 150ms linear',
-      //NOTE: Cannot get typing to work with objectFit property.objectfit vs string
-      //objectFit: cssVar(objectFit, 'contain'),
+      objectFir: cssVar(objectFit),
     },
   }),
   modifiers: {
     variant: {
       light: {
-        // backgroundColor: system.color.bg.alt.default,
+        backgroundColor: system.color.bg.alt.default,
         // NOTE: how to use iconColor for this color? needed for color contrast
         ['& [data-element-avatar-icon="true"]']: {
           [systemIconStencil.vars.color]: system.color.fg.default,
         },
       },
       dark: {
-        // backgroundColor: system.color.bg.primary.default,
+        backgroundColor: system.color.bg.primary.default,
         // NOTE: how to use iconColor for this color? needed for color contrast
         ['& [data-element-avatar-icon="true"]']: {
           [systemIconStencil.vars.color]: system.color.fg.inverse,
@@ -172,18 +174,44 @@ const avatarContainerStencil = createStencil({
         },
       },
     },
+    // objectFit: {
+    //   contain: {
+    //     objectFit: 'contain',
+    //   },
+    //   fill: {
+    //     objectFit: 'fill',
+    //   },
+    //   cover: {
+    //     objectFit: 'cover',
+    //   },
+    //   ['scale-down']: {
+    //     objectFit: 'scale-down',
+    //   },
+    //   none: {
+    //     objectFit: 'none',
+    //   },
+    // },
   },
   defaultModifiers: {
     variant: 'light',
     size: 'medium',
     isImageLoaded: 'false',
+    objectFit: 'contain',
   },
 });
 
 export const Avatar: AvatarOverload = createComponent('button')({
   displayName: 'Avatar',
   Component: (
-    {variant, size, altText, url, onClick, objectFit, background, ...elemProps}: AvatarProps,
+    {
+      variant,
+      size = 'medium',
+      altText,
+      url,
+      onClick,
+      objectFit = 'contain',
+      ...elemProps
+    }: AvatarProps,
     ref,
     Element
   ) => {
@@ -199,28 +227,28 @@ export const Avatar: AvatarOverload = createComponent('button')({
       setImageLoaded(false);
     }, [url]);
 
-    const getVariantBackgroundColor = (variant: 'light' | 'dark' | undefined) => {
-      switch (variant) {
-        case 'light':
-          return system.color.bg.alt.default;
-        case 'dark':
-          return system.color.bg.primary.default;
-        default:
-          return base.soap200;
-      }
-    };
+    // const getVariantBackgroundColor = (variant: 'light' | 'dark' | undefined) => {
+    //   switch (variant) {
+    //     case 'light':
+    //       return system.color.bg.alt.default;
+    //     case 'dark':
+    //       return system.color.bg.primary.default;
+    //     default:
+    //       return base.soap200;
+    //   }
+    // };
 
-    const getBackgroundColor = (
-      background?: Property.BackgroundColor,
-      variant?: 'light' | 'dark'
-    ) => {
-      if (background) {
-        return background;
-      }
-      return getVariantBackgroundColor(variant);
-    };
+    // const getBackgroundColor = (
+    //   background?: Property.BackgroundColor,
+    //   variant?: 'light' | 'dark'
+    // ) => {
+    //   if (background) {
+    //     return background;
+    //   }
+    //   return getVariantBackgroundColor(variant);
+    // };
 
-    const backgroundColor = getBackgroundColor(background, variant);
+    // const backgroundColor = getBackgroundColor(background, variant);
     // const iconColor = pickForegroundColor(
     //   backgroundColor,
     //   system.color.fg.inverse,
@@ -233,12 +261,10 @@ export const Avatar: AvatarOverload = createComponent('button')({
         aria-label={altText}
         onClick={onClick}
         {...mergeStyles(elemProps, [
-          avatarContainerStencil({
+          avatarStencil({
             variant,
-            size,
+            size: typeof size === 'number' ? px2rem(size) : size,
             objectFit,
-            backgroundColor,
-            // iconColor,
             isImageLoaded: imageLoaded,
             hasOnClick: onClick !== undefined,
           }),
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 688973c1d6..c717b63741 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -1,20 +1,30 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 
-import {Avatar} from '../index';
+import {Avatar, avatarStencil} from '../index';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
 
+const customStyles = createStencil({
+  extends: avatarStencil,
+  base: {
+    [avatarStencil.vars.backgroundColor]: 'black',
+  },
+});
+
 storiesOf('Components/Indicators/Avatar', module)
   .addParameters({ReadmePath: 'react/avatar'})
   .addParameters({component: Avatar})
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
+      foo
       {/* NOTE: For testing using background here */}
-      <Avatar as="div" size={'extraExtraLarge'} background="black" />
+      <Avatar as="div" size={200} />
+      <Avatar as="div" size={'extraExtraLarge'} {...customStyles()} />
       <h3>Extra Large</h3>
       <Avatar as="div" size={'extraLarge'} />
       <h3>Large</h3>

From 6cf7f578f92a44e1288a816c54ffa3a038818dfb Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Tue, 23 Jul 2024 12:03:50 -0400
Subject: [PATCH 09/31] fix: updated dynamic sizing + objectFit + data-element
 naming

---
 modules/react/avatar/lib/Avatar.tsx      | 98 ++++++++++++++----------
 modules/react/avatar/stories/stories.tsx |  7 +-
 2 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index cd83cbada3..7a7e9c4789 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -35,7 +35,14 @@ export interface AvatarProps {
    * The size of the Avatar.
    * @default `medium`
    */
-  size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | number;
+  size?:
+    | 'extraSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extraLarge'
+    | 'extraExtraLarge'
+    | (string & {});
   // size: SystemIconCircleSize | number;
   /**
    * The alt text of the Avatar image. This prop is also used for the aria-label
@@ -49,7 +56,6 @@ export interface AvatarProps {
 export const avatarVars = createVars('background');
 
 export const avatarStencil = createStencil({
-  extends: systemIconStencil,
   vars: {
     size: '',
     objectFit: 'contain',
@@ -71,36 +77,33 @@ export const avatarStencil = createStencil({
       outline: 'none',
       ...focusRing({separation: 2}),
     },
-    ['& > [data-element-avatar-icon="true"]']: {
+    ['& > [data-slot="avatar-icon"]']: {
       transition: 'opacity 150ms linear',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      // width: system.space.x8,
-      // height: system.space.x8,
+      [systemIconStencil.vars.size]: calc.multiply(size, 0.625),
     },
-    ['& > [data-element-avatar-image="true"]']: {
+    ['& > [data-slot="avatar-image"]']: {
       position: 'absolute',
       width: '100%',
       height: '100%',
       borderRadius: borderRadius.circle,
       transition: 'opacity 150ms linear',
-      objectFir: cssVar(objectFit),
+      // objectFit: cssVar(objectFit),
     },
   }),
   modifiers: {
     variant: {
       light: {
         backgroundColor: system.color.bg.alt.default,
-        // NOTE: how to use iconColor for this color? needed for color contrast
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.color]: system.color.fg.default,
         },
       },
       dark: {
         backgroundColor: system.color.bg.primary.default,
-        // NOTE: how to use iconColor for this color? needed for color contrast
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.color]: system.color.fg.inverse,
         },
       },
@@ -109,46 +112,78 @@ export const avatarStencil = createStencil({
       extraSmall: {
         width: system.space.x4,
         height: system.space.x4,
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x4, 0.625),
         },
       },
       small: {
         width: system.space.x6,
         height: system.space.x6,
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x6, 0.625),
         },
       },
       medium: {
         width: system.space.x8,
         height: system.space.x8,
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x8, 0.625),
         },
       },
       large: {
         width: system.space.x10,
         height: system.space.x10,
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x10, 0.625),
         },
       },
       extraLarge: {
         width: system.space.x16,
         height: system.space.x16,
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(system.space.x16, 0.625),
         },
       },
       extraExtraLarge: {
         width: calc.multiply(system.space.x10, 3),
         height: calc.multiply(system.space.x10, 3),
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           [systemIconStencil.vars.size]: calc.multiply(calc.multiply(system.space.x10, 3), 0.625),
         },
       },
     },
+    objectFit: {
+      contain: {
+        objectFit: 'contain',
+      },
+      fill: {
+        objectFit: 'fill',
+      },
+      cover: {
+        objectFit: 'cover',
+      },
+      ['scale-down']: {
+        objectFit: 'scale-down',
+      },
+      none: {
+        objectFit: 'none',
+      },
+      ['-moz-initial']: {
+        objectFit: '-moz-initial',
+      },
+      ['initial']: {
+        objectFit: 'initial',
+      },
+      ['inherit']: {
+        objectFit: 'inherit',
+      },
+      ['revert']: {
+        objectFit: 'revert',
+      },
+      ['unset']: {
+        objectFit: 'unset',
+      },
+    },
     hasOnClick: {
       true: {
         cursor: 'pointer',
@@ -159,39 +194,22 @@ export const avatarStencil = createStencil({
     },
     isImageLoaded: {
       true: {
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           opacity: 0,
         },
-        ['& [data-element-avatar-image="true"]']: {
+        ['& [data-slot="avatar-image"]']: {
           opacity: 1,
         },
       },
       false: {
-        ['& [data-element-avatar-icon="true"]']: {
+        ['& [data-slot="avatar-icon"]']: {
           opacity: 1,
         },
-        ['& [data-element-avatar-image="true"]']: {
+        ['& [data-slot="avatar-image"]']: {
           opacity: 0,
         },
       },
     },
-    // objectFit: {
-    //   contain: {
-    //     objectFit: 'contain',
-    //   },
-    //   fill: {
-    //     objectFit: 'fill',
-    //   },
-    //   cover: {
-    //     objectFit: 'cover',
-    //   },
-    //   ['scale-down']: {
-    //     objectFit: 'scale-down',
-    //   },
-    //   none: {
-    //     objectFit: 'none',
-    //   },
-    // },
   },
   defaultModifiers: {
     variant: 'light',
@@ -271,8 +289,8 @@ export const Avatar: AvatarOverload = createComponent('button')({
           }),
         ])}
       >
-        <SystemIcon icon={userIcon} data-element-avatar-icon />
-        {url && <img data-element-avatar-image src={url} alt={altText} onLoad={loadImage} />}
+        <SystemIcon icon={userIcon} data-slot="avatar-icon" />
+        {url && <img data-slot="avatar-image" src={url} alt={altText} onLoad={loadImage} />}
       </Element>
     );
   },
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 7adffc3682..0992444d14 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -11,7 +11,7 @@ const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
 const customStyles = createStencil({
   extends: avatarStencil,
   base: {
-    [avatarStencil.vars.backgroundColor]: 'black',
+    background: 'black',
   },
 });
 
@@ -21,9 +21,10 @@ storiesOf('Components/Indicators/Avatar', module)
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      foo
       {/* NOTE: For testing using background here */}
-      <Avatar as="div" size={200} />
+      With Number
+      <Avatar as="div" size={300} />
+      With String
       <Avatar as="div" size={'extraExtraLarge'} {...customStyles()} />
       <h3>Extra Large</h3>
       <Avatar as="div" size={'extraLarge'} />

From fdd478c39b34c37915ff229ce95f9d428a01c7cc Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 24 Jul 2024 10:47:19 -0400
Subject: [PATCH 10/31] fix: update stories/spec + typing/overload

---
 modules/react/avatar/lib/Avatar.tsx       |  86 +++-----------
 modules/react/avatar/spec/Avatar.spec.tsx |  27 +++--
 modules/react/avatar/stories/stories.tsx  | 137 ++++++++++++----------
 3 files changed, 107 insertions(+), 143 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 7a7e9c4789..c230a7865f 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,30 +1,14 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, calc, createVars, px2rem} from '@workday/canvas-kit-styling';
+import {cssVar, createStencil, calc, createVars} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIconCircleSize, SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 import {userIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
-/**
- * Used to get the props of the div version of an avatar
- */
-type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> &
-  React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Returns an overloaded functional component that uses button props by default.
- */
-type AvatarOverload = {
-  (props: {as: 'div'} & AvatarDivProps & {ref?: React.Ref<HTMLElement>}): React.ReactElement;
-  (props: Omit<AvatarProps, 'as'> & {ref?: React.Ref<HTMLButtonElement>}): React.ReactElement;
-  Variant: 'light' | 'dark';
-  Size: typeof SystemIconCircleSize;
-};
-
 export interface AvatarProps {
   /**
    * The variant of the Avatar default state. Accepts `Light` or `Dark`.
@@ -43,7 +27,6 @@ export interface AvatarProps {
     | 'extraLarge'
     | 'extraExtraLarge'
     | (string & {});
-  // size: SystemIconCircleSize | number;
   /**
    * The alt text of the Avatar image. This prop is also used for the aria-label
    * @default Avatar
@@ -58,9 +41,8 @@ export const avatarVars = createVars('background');
 export const avatarStencil = createStencil({
   vars: {
     size: '',
-    objectFit: 'contain',
   },
-  base: ({objectFit, size}) => ({
+  base: ({size}) => ({
     background: cssVar(avatarVars.background, system.color.bg.caution.default),
     position: 'relative',
     display: 'flex',
@@ -69,7 +51,6 @@ export const avatarStencil = createStencil({
     padding: 0,
     border: 0,
     overflow: 'hidden',
-    cursor: 'default',
     borderRadius: system.shape.round,
     width: cssVar(size),
     height: cssVar(size),
@@ -90,7 +71,6 @@ export const avatarStencil = createStencil({
       height: '100%',
       borderRadius: borderRadius.circle,
       transition: 'opacity 150ms linear',
-      // objectFit: cssVar(objectFit),
     },
   }),
   modifiers: {
@@ -152,6 +132,14 @@ export const avatarStencil = createStencil({
         },
       },
     },
+    elementType: {
+      div: {
+        cursor: 'default',
+      },
+      button: {
+        cursor: 'pointer',
+      },
+    },
     objectFit: {
       contain: {
         objectFit: 'contain',
@@ -184,14 +172,6 @@ export const avatarStencil = createStencil({
         objectFit: 'unset',
       },
     },
-    hasOnClick: {
-      true: {
-        cursor: 'pointer',
-      },
-      false: {
-        cursor: 'default',
-      },
-    },
     isImageLoaded: {
       true: {
         ['& [data-slot="avatar-icon"]']: {
@@ -219,18 +199,10 @@ export const avatarStencil = createStencil({
   },
 });
 
-export const Avatar: AvatarOverload = createComponent('button')({
+export const Avatar = createComponent('button')({
   displayName: 'Avatar',
   Component: (
-    {
-      variant,
-      size = 'medium',
-      altText,
-      url,
-      onClick,
-      objectFit = 'contain',
-      ...elemProps
-    }: AvatarProps,
+    {variant, size, altText, url, onClick, objectFit, ...elemProps}: AvatarProps,
     ref,
     Element
   ) => {
@@ -246,34 +218,6 @@ export const Avatar: AvatarOverload = createComponent('button')({
       setImageLoaded(false);
     }, [url]);
 
-    // const getVariantBackgroundColor = (variant: 'light' | 'dark' | undefined) => {
-    //   switch (variant) {
-    //     case 'light':
-    //       return system.color.bg.alt.default;
-    //     case 'dark':
-    //       return system.color.bg.primary.default;
-    //     default:
-    //       return base.soap200;
-    //   }
-    // };
-
-    // const getBackgroundColor = (
-    //   background?: Property.BackgroundColor,
-    //   variant?: 'light' | 'dark'
-    // ) => {
-    //   if (background) {
-    //     return background;
-    //   }
-    //   return getVariantBackgroundColor(variant);
-    // };
-
-    // const backgroundColor = getBackgroundColor(background, variant);
-    // const iconColor = pickForegroundColor(
-    //   backgroundColor,
-    //   system.color.fg.inverse,
-    //   system.color.fg.default
-    // );
-
     return (
       <Element
         ref={ref}
@@ -282,10 +226,10 @@ export const Avatar: AvatarOverload = createComponent('button')({
         {...mergeStyles(elemProps, [
           avatarStencil({
             variant,
-            size: typeof size === 'number' ? px2rem(size) : size,
+            size,
             objectFit,
             isImageLoaded: imageLoaded,
-            hasOnClick: onClick !== undefined,
+            elementType: Element,
           }),
         ])}
       >
diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 1c2f49b925..4e9a063146 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {render, fireEvent} from '@testing-library/react';
 import {Avatar} from '../lib/Avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 describe('Avatar', () => {
   it('should render a button element', () => {
@@ -8,11 +9,10 @@ describe('Avatar', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
-  // NOTE: Property 'as' is missing in type '{ id: string; }' but required in type '{ as: "div"; }'.
-  // it('should forward extra attributes to the container', () => {
-  //   const {getByRole} = render(<Avatar id="myAvatar" />);
-  //   expect(getByRole('button')).toHaveAttribute('id', 'myAvatar');
-  // });
+  it('should forward extra attributes to the container', () => {
+    const {getByRole} = render(<Avatar id="myAvatar" />);
+    expect(getByRole('button')).toHaveAttribute('id', 'myAvatar');
+  });
 
   it('should set the aria-label of the button with the altText prop', () => {
     const screen = render(<Avatar altText="My alt text" />);
@@ -45,23 +45,24 @@ describe('Avatar', () => {
 
   it('should apply the variant class when variant prop is specified', () => {
     const {container} = render(<Avatar variant="dark" />);
-    expect(container.firstChild).toHaveClass('dark');
+    expect(container.firstChild).toHaveStyle(`backgroundColor: system.color.bg.primary.default}`);
   });
 
-  // NOTE: Need to make size prop dynamic
-  // it('should apply the size class when size prop is specified', () => {
-  //   const {container} = render(<Avatar size={40} />);
-  //   expect(container.firstChild).toHaveStyle(`width: ${px2rem(40)}`);
-  // });
+  // NOTE: DYNAMIC NOT WORKING
+  it('should apply the size class when size prop is specified', () => {
+    const {container} = render(<Avatar size="40" />);
+    expect(container.firstChild).toHaveStyle(`width: ${px2rem(40)}`);
+  });
 
+  // NOTE: WORKING BUT COMPLAINING
   it('should set the background color when background prop is specified', () => {
     const {container} = render(<Avatar background="red" />);
     expect(container.firstChild).toHaveStyle('background: red');
   });
 
   it('should set the object fit of the image when objectFit prop is specified', () => {
-    const screen = render(<Avatar url="https://example.com/image.png" objectFit="cover" />);
-    expect(screen.getByRole('img')).toHaveStyle('object-fit: cover');
+    const {container} = render(<Avatar url="https://example.com/image.png" objectFit="cover" />);
+    expect(container.firstChild).toHaveStyle('object-fit: cover');
   });
 
   it('should hide the icon when the image is loaded', () => {
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 0992444d14..73ddade7bd 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -1,96 +1,115 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 
-import {Avatar, avatarStencil} from '../index';
+import {Avatar} from '../index';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {createStencil} from '@workday/canvas-kit-styling';
 
 const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
 
-const customStyles = createStencil({
-  extends: avatarStencil,
-  base: {
-    background: 'black',
-  },
-});
-
 storiesOf('Components/Indicators/Avatar', module)
   .addParameters({ReadmePath: 'react/avatar'})
   .addParameters({component: Avatar})
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      {/* NOTE: For testing using background here */}
-      With Number
-      <Avatar as="div" size={300} />
-      With String
-      <Avatar as="div" size={'extraExtraLarge'} {...customStyles()} />
+      <Avatar as="div" size="extraExtraLarge" />
       <h3>Extra Large</h3>
-      <Avatar as="div" size={'extraLarge'} />
+      <Avatar as="div" size="extraLarge" />
       <h3>Large</h3>
-      <Avatar as="div" size={'large'} />
+      <Avatar as="div" size="large" />
       <h3>Medium</h3>
-      <Avatar as="div" size={'medium'} />
+      <Avatar as="div" size="medium" />
       <h3>Small</h3>
-      <Avatar as="div" size={'small'} />
+      <Avatar as="div" size="small" />
       <h3>Extra Small</h3>
-      <Avatar as="div" size={'extraSmall'} />
+      <Avatar as="div" size="extraSmall" />
     </div>
   ))
   .add('Dark', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={'extraExtraLarge'} variant={'dark'} />
+      <Avatar as="div" size="extraExtraLarge" variant="dark" />
       <h3>Extra Large</h3>
-      <Avatar as="div" size={'extraLarge'} variant={'dark'} />
+      <Avatar as="div" size="extraLarge" variant="dark" />
       <h3>Large</h3>
-      <Avatar as="div" size={'large'} variant={'dark'} />
+      <Avatar as="div" size="large" variant="dark" />
       <h3>Medium</h3>
-      <Avatar as="div" size={'medium'} variant={'dark'} />
+      <Avatar as="div" size="medium" variant="dark" />
       <h3>Small</h3>
-      <Avatar as="div" size={'small'} variant={'dark'} />
+      <Avatar as="div" size="small" variant="dark" />
       <h3>Extra Small</h3>
-      <Avatar as="div" size={'extraSmall'} variant={'dark'} />
+      <Avatar as="div" size="extraSmall" variant="dark" />
+    </div>
+  ))
+  .add('Dynamic Background', () => (
+    <div className="story">
+      <h3>Red</h3>
+      <Avatar as="div" size="extraExtraLarge" background="red" />
+      <h3>Orange</h3>
+      <Avatar as="div" size="extraLarge" background="orange" />
+      <h3>Yellow</h3>
+      <Avatar as="div" size="large" background="yellow" />
+      <h3>Green</h3>
+      <Avatar as="div" size="medium" background="green" />
+      <h3>Blue</h3>
+      <Avatar as="div" size="small" background="blue" />
+      <h3>Violet</h3>
+      <Avatar as="div" size="extraSmall" background="violet" />
     </div>
   ))
   .add('Image', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size={'extraExtraLarge'} url={testAvatar} />
+      <Avatar as="div" size="extraExtraLarge" url={testAvatar} />
       <h3>Extra Large</h3>
-      <Avatar as="div" size={'extraLarge'} url={testAvatar} />
+      <Avatar as="div" size="extraLarge" url={testAvatar} />
       <h3>Large</h3>
-      <Avatar as="div" size={'large'} url={testAvatar} />
+      <Avatar as="div" size="large" url={testAvatar} />
       <h3>Medium</h3>
-      <Avatar as="div" size={'medium'} url={testAvatar} />
+      <Avatar as="div" size="medium" url={testAvatar} />
       <h3>Small</h3>
-      <Avatar as="div" size={'small'} url={testAvatar} />
+      <Avatar as="div" size="small" url={testAvatar} />
       <h3>Extra Small</h3>
-      <Avatar as="div" size={'extraSmall'} url={testAvatar} />
+      <Avatar as="div" size="extraSmall" url={testAvatar} />
     </div>
   ))
-  .add('Non-Square Image', () => (
+  .add('ObjectFit / Non-Square Image', () => (
     <div className="story">
       <h3>Original Rectangle Image</h3>
-      <img alt="" src="https://placekitten.com/g/450/200" />
-      <h3>Using Object Fit on a Rectangle Image</h3>
-      <Avatar as="div" url="https://placekitten.com/g/450/200" objectFit="contain" />
+      <img alt="" src="https://placehold.co/450x200/png" />
+      <h3>Object fit on a Rectangle Image</h3>
+      <Avatar as="div" url="https://placehold.co/450x200/png" objectFit="contain" />
       {/* NOTE: Need to make size dynamic */}
-      {/* <Avatar as="div" size={200} url="https://placekitten.com/g/450/200" objectFit="contain" /> */}
+      <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
+      <Avatar as="div" size="200" url="https://placehold.co/450x200/png" objectFit="contain" />
       <h3>Original Square Image</h3>
-      <img alt="" src="https://placekitten.com/g/450/450" />
-      <h3>Using a Square Image</h3>
-      <Avatar as="div" url="https://placekitten.com/g/450/450" />
+      <img alt="" src="https://placehold.co/450x450/png" />
+      <h3>Object fit on a Square Image</h3>
+      <Avatar as="div" url="https://placehold.co/450x450/png" />
       {/* NOTE: Need to make size dynamic */}
-      {/* <Avatar as="div" size={200} url="https://placekitten.com/g/450/450" /> */}
+      <h3>Object fit on a Square Image using Dynamic Size</h3>
+      <Avatar as="div" size="200" url="https://placehold.co/450x450/png" />
+    </div>
+  ))
+  .add('Dynamic Size', () => (
+    <div className="story">
+      <h3>300px</h3>
+      <Avatar as="div" size="300" />
+      <h3>400px</h3>
+      <Avatar as="div" size="400" />
+      <h3>500px</h3>
+      <Avatar as="div" size="500" />
+      <h3>600px</h3>
+      <Avatar as="div" size="600" />
     </div>
   ))
   .add('Lazy Loading', () => (
     <div className="story">
+      <h3>Lazy Loading</h3>
       {Array.from({length: 100}, (v, index) => (
         <>
-          <Avatar as="div" size={Avatar.Size.xs} url={testAvatar + '?v=' + index} />
+          <Avatar as="div" size="large" url={testAvatar + '?v=' + index} />
           <br />
         </>
       ))}
@@ -103,49 +122,49 @@ storiesOf('Components/Indicators/Avatar/Avatar Button', module)
   .add('Light', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar size={'extraExtraLarge'} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraExtraLarge" onClick={handleAvatarButtonClick} />
       <h3>Extra Large</h3>
-      <Avatar size={'extraLarge'} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraLarge" onClick={handleAvatarButtonClick} />
       <h3>Large</h3>
-      <Avatar size={'large'} onClick={handleAvatarButtonClick} />
+      <Avatar size="large" onClick={handleAvatarButtonClick} />
       <h3>Medium</h3>
-      <Avatar size={'medium'} onClick={handleAvatarButtonClick} />
+      <Avatar size="medium" onClick={handleAvatarButtonClick} />
       <h3>Small</h3>
-      <Avatar size={'small'} onClick={handleAvatarButtonClick} />
+      <Avatar size="small" onClick={handleAvatarButtonClick} />
       <h3>Extra Small</h3>
-      <Avatar size={'extraSmall'} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraSmall" onClick={handleAvatarButtonClick} />
     </div>
   ))
   .add('Dark', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar size={'extraExtraLarge'} variant={'dark'} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraExtraLarge" variant="dark" onClick={handleAvatarButtonClick} />
       <h3>Extra Large</h3>
-      <Avatar size={'extraLarge'} variant={'dark'} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraLarge" variant="dark" onClick={handleAvatarButtonClick} />
       <h3>Large</h3>
-      <Avatar size={'large'} variant={'dark'} onClick={handleAvatarButtonClick} />
+      <Avatar size="large" variant="dark" onClick={handleAvatarButtonClick} />
       <h3>Medium</h3>
-      <Avatar size={'medium'} variant={'dark'} onClick={handleAvatarButtonClick} />
+      <Avatar size="medium" variant="dark" onClick={handleAvatarButtonClick} />
       <h3>Small</h3>
-      <Avatar size={'small'} variant={'dark'} onClick={handleAvatarButtonClick} />
+      <Avatar size="small" variant="dark" onClick={handleAvatarButtonClick} />
       <h3>Extra Small</h3>
-      <Avatar size={'extraSmall'} variant={'dark'} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraSmall" variant="dark" onClick={handleAvatarButtonClick} />
     </div>
   ))
   .add('Image', () => (
     <div className="story">
       <h3>Extra-Extra Large</h3>
-      <Avatar size={'extraExtraLarge'} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraExtraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Extra Large</h3>
-      <Avatar size={'extraLarge'} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Large</h3>
-      <Avatar size={'large'} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size="large" url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Medium</h3>
-      <Avatar size={'medium'} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size="medium" url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Small</h3>
-      <Avatar size={'small'} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size="small" url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Extra Small</h3>
-      <Avatar size={'extraSmall'} url={testAvatar} onClick={handleAvatarButtonClick} />
+      <Avatar size="extraSmall" url={testAvatar} onClick={handleAvatarButtonClick} />
       <h3>Broken Link</h3>
       <Avatar url="/fake/path/to/image.png" onClick={handleAvatarButtonClick} />
     </div>

From b71f22e07ab51a376477ce98623559200b289e79 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 24 Jul 2024 10:58:28 -0400
Subject: [PATCH 11/31] fix: updated dynamic size to include px/rem

---
 modules/react/avatar/spec/Avatar.spec.tsx |  7 ++++---
 modules/react/avatar/stories/stories.tsx  | 20 ++++++++++----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 4e9a063146..6e2596fb0f 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -48,10 +48,11 @@ describe('Avatar', () => {
     expect(container.firstChild).toHaveStyle(`backgroundColor: system.color.bg.primary.default}`);
   });
 
-  // NOTE: DYNAMIC NOT WORKING
   it('should apply the size class when size prop is specified', () => {
-    const {container} = render(<Avatar size="40" />);
-    expect(container.firstChild).toHaveStyle(`width: ${px2rem(40)}`);
+    const {container} = render(<Avatar size="40px" />);
+    expect(container.firstChild).toHaveStyle(
+      `width: calc.multiply(40px, 0.625); height: calc.multiply(40px, 0.625)}`
+    );
   });
 
   // NOTE: WORKING BUT COMPLAINING
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index 73ddade7bd..b988aea427 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -82,26 +82,26 @@ storiesOf('Components/Indicators/Avatar', module)
       <Avatar as="div" url="https://placehold.co/450x200/png" objectFit="contain" />
       {/* NOTE: Need to make size dynamic */}
       <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
-      <Avatar as="div" size="200" url="https://placehold.co/450x200/png" objectFit="contain" />
+      <Avatar as="div" size="200px" url="https://placehold.co/450x200/png" objectFit="contain" />
       <h3>Original Square Image</h3>
       <img alt="" src="https://placehold.co/450x450/png" />
       <h3>Object fit on a Square Image</h3>
       <Avatar as="div" url="https://placehold.co/450x450/png" />
       {/* NOTE: Need to make size dynamic */}
       <h3>Object fit on a Square Image using Dynamic Size</h3>
-      <Avatar as="div" size="200" url="https://placehold.co/450x450/png" />
+      <Avatar as="div" size="200px" url="https://placehold.co/450x450/png" />
     </div>
   ))
   .add('Dynamic Size', () => (
     <div className="story">
-      <h3>300px</h3>
-      <Avatar as="div" size="300" />
-      <h3>400px</h3>
-      <Avatar as="div" size="400" />
-      <h3>500px</h3>
-      <Avatar as="div" size="500" />
-      <h3>600px</h3>
-      <Avatar as="div" size="600" />
+      <h3>30px</h3>
+      <Avatar as="div" size="30px" />
+      <h3>40px</h3>
+      <Avatar as="div" size="40px" />
+      <h3>3rem</h3>
+      <Avatar as="div" size="3rem" />
+      <h3>4rem</h3>
+      <Avatar as="div" size="4rem" />
     </div>
   ))
   .add('Lazy Loading', () => (

From 90aef6651627b90ed90b9fd42686d8d53faa4554 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 24 Jul 2024 11:22:46 -0400
Subject: [PATCH 12/31] fix: modified background to be similar to old API

---
 modules/react/avatar/lib/Avatar.tsx       |  3 +-
 modules/react/avatar/spec/Avatar.spec.tsx | 18 +++++++++---
 modules/react/avatar/stories/stories.tsx  | 35 ++++++++++++++++-------
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index c230a7865f..37b5109a5d 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -36,14 +36,13 @@ export interface AvatarProps {
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   objectFit?: Property.ObjectFit;
 }
-export const avatarVars = createVars('background');
 
 export const avatarStencil = createStencil({
   vars: {
     size: '',
   },
   base: ({size}) => ({
-    background: cssVar(avatarVars.background, system.color.bg.caution.default),
+    background: system.color.bg.caution.default,
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 6e2596fb0f..9017bd0585 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import {render, fireEvent} from '@testing-library/react';
 import {Avatar} from '../lib/Avatar';
-import {px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../icon';
 
 describe('Avatar', () => {
   it('should render a button element', () => {
@@ -55,10 +57,18 @@ describe('Avatar', () => {
     );
   });
 
-  // NOTE: WORKING BUT COMPLAINING
   it('should set the background color when background prop is specified', () => {
-    const {container} = render(<Avatar background="red" />);
-    expect(container.firstChild).toHaveStyle('background: red');
+    const customGreenAvatarStencil = createStencil({
+      base: {
+        backgroundColor: base.watermelon400,
+        ['[data-slot="avatar-icon"]']: {
+          [systemIconStencil.vars.color]: base.watermelon100,
+        },
+      },
+    });
+
+    const {container} = render(<Avatar {...customGreenAvatarStencil()} />);
+    expect(container.firstChild).toHaveStyle(`background: ${cssVar(base.watermelon400)}`);
   });
 
   it('should set the object fit of the image when objectFit prop is specified', () => {
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index b988aea427..b6d6f7fe2f 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -4,9 +4,30 @@ import {storiesOf} from '@storybook/react';
 import {Avatar} from '../index';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../icon';
 
 const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
 
+const customBlueAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.berrySmoothie400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.berrySmoothie100,
+    },
+  },
+});
+
+const customGreenAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.watermelon400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.watermelon100,
+    },
+  },
+});
+
 storiesOf('Components/Indicators/Avatar', module)
   .addParameters({ReadmePath: 'react/avatar'})
   .addParameters({component: Avatar})
@@ -44,18 +65,10 @@ storiesOf('Components/Indicators/Avatar', module)
   ))
   .add('Dynamic Background', () => (
     <div className="story">
-      <h3>Red</h3>
-      <Avatar as="div" size="extraExtraLarge" background="red" />
-      <h3>Orange</h3>
-      <Avatar as="div" size="extraLarge" background="orange" />
-      <h3>Yellow</h3>
-      <Avatar as="div" size="large" background="yellow" />
-      <h3>Green</h3>
-      <Avatar as="div" size="medium" background="green" />
       <h3>Blue</h3>
-      <Avatar as="div" size="small" background="blue" />
-      <h3>Violet</h3>
-      <Avatar as="div" size="extraSmall" background="violet" />
+      <Avatar as="div" size="extraExtraLarge" {...customBlueAvatarStencil()} />
+      <h3>Green</h3>
+      <Avatar as="div" size="extraLarge" {...customGreenAvatarStencil()} />
     </div>
   ))
   .add('Image', () => (

From 2c2739b5b2831f1be48f76e03efdcdf2e7f66b1f Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 24 Jul 2024 15:36:21 -0400
Subject: [PATCH 13/31] fix: updated story for dynamic sizing to add px to rem
 conversion fnx

---
 modules/react/avatar/stories/stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
index b6d6f7fe2f..05ad903fd0 100644
--- a/modules/react/avatar/stories/stories.tsx
+++ b/modules/react/avatar/stories/stories.tsx
@@ -4,7 +4,7 @@ import {storiesOf} from '@storybook/react';
 import {Avatar} from '../index';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
 import {systemIconStencil} from '../../icon';
 
@@ -108,9 +108,9 @@ storiesOf('Components/Indicators/Avatar', module)
   .add('Dynamic Size', () => (
     <div className="story">
       <h3>30px</h3>
-      <Avatar as="div" size="30px" />
+      <Avatar as="div" size={px2rem(30)} />
       <h3>40px</h3>
-      <Avatar as="div" size="40px" />
+      <Avatar as="div" size={px2rem(40)} />
       <h3>3rem</h3>
       <Avatar as="div" size="3rem" />
       <h3>4rem</h3>

From a8513fe4ef0ee445e50c7db75ac66f3bb07ea8ec Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Fri, 26 Jul 2024 13:24:33 -0400
Subject: [PATCH 14/31] fix: update readme + use cases - OUTSTANDING:
 pillAvatar

---
 .../expandable/lib/ExpandableAvatar.tsx       |   2 +-
 modules/preview-react/pill/lib/PillAvatar.tsx |   2 +-
 .../stories/examples/GlobalHeader.tsx         |   2 +-
 modules/react/avatar/README.md                | 111 +++++++++++-------
 modules/react/avatar/lib/Avatar.tsx           |  22 +++-
 modules/react/side-panel/stories/stories.tsx  |   2 +-
 6 files changed, 89 insertions(+), 52 deletions(-)

diff --git a/modules/labs-react/expandable/lib/ExpandableAvatar.tsx b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
index d1c867aa4f..fd571ef7ba 100644
--- a/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
+++ b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
@@ -21,6 +21,6 @@ const StyledAvatar = styled(Avatar)<StyledType>({
 export const ExpandableAvatar = createComponent('button')({
   displayName: 'Expandable.Avatar',
   Component: ({altText, ...elemProps}: ExpandableAvatarProps, ref) => {
-    return <StyledAvatar altText="" as="div" ref={ref} size={32} {...elemProps} />;
+    return <StyledAvatar altText="" as="div" ref={ref} size="32px" {...elemProps} />;
   },
 });
diff --git a/modules/preview-react/pill/lib/PillAvatar.tsx b/modules/preview-react/pill/lib/PillAvatar.tsx
index ebd9e05866..f78cef54c8 100644
--- a/modules/preview-react/pill/lib/PillAvatar.tsx
+++ b/modules/preview-react/pill/lib/PillAvatar.tsx
@@ -16,7 +16,7 @@ export const PillAvatar = createSubcomponent('button')({
     <Avatar
       style={{opacity: model.state.disabled ? '.7' : '1'}}
       as="div"
-      size={18}
+      size="18px"
       altText={undefined}
       {...elemProps}
       disabled={model.state.disabled}
diff --git a/modules/react/_examples/stories/examples/GlobalHeader.tsx b/modules/react/_examples/stories/examples/GlobalHeader.tsx
index 2519a65018..4190644e66 100644
--- a/modules/react/_examples/stories/examples/GlobalHeader.tsx
+++ b/modules/react/_examples/stories/examples/GlobalHeader.tsx
@@ -31,7 +31,7 @@ export const Basic = () => (
       <TertiaryButton aria-label="messages" icon={assistantIcon} />
       <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
       <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+      <Avatar size="medium" variant="light" />
     </GlobalHeader.Item>
   </GlobalHeader>
 );
diff --git a/modules/react/avatar/README.md b/modules/react/avatar/README.md
index 6de1f0f22c..dbd2acab7a 100644
--- a/modules/react/avatar/README.md
+++ b/modules/react/avatar/README.md
@@ -22,32 +22,9 @@ import {Avatar, AvatarVariant} from '@workday/canvas-kit-react/avatar';
 
 // Using static properties on Avatar
 <Avatar
-  size={Avatar.Size.xs}
-  variant={Avatar.Variant.Dark}
+  size="extraSmall"
+  variant="dark"
 />
-
-// Using AvatarVariant import directly
-<Avatar size={Avatar.Size.xs} variant={AvatarVariant.Dark} />
-```
-
-## Static Properties
-
-#### `variant: AvatarVariant`
-
-```tsx
-<Avatar variant={Avatar.Variant.Dark} />
-```
-
----
-
-#### `Size: SystemIconCircleSize | number`
-
-```tsx
-<Avatar size={Avatar.Size.xs} />
-
-// Custom Size.
-// Note: Please use the predefined sizes as it works nicely with the Canvas Design System
-<Avatar size={48} />
 ```
 
 ## Component Props
@@ -58,39 +35,57 @@ import {Avatar, AvatarVariant} from '@workday/canvas-kit-react/avatar';
 
 ### Optional
 
-#### `variant: AvatarVariant`
+#### `variant: "light" | "dark"`
 
 > The variant of the avatar if using a default image.
 
-Default: `AvatarVariant.Light`
+Default: "light"
 
-| Variant | Description                      |
+| String  | Description                      |
 | ------- | -------------------------------- |
-| `Light` | Light grey background, dark icon |
-| `Dark`  | Dark blue background, white icon |
+| "light" | Light grey background, dark icon |
+| "dark"  | Dark blue background, white icon |
+
+```tsx
+<Avatar variant="dark" />
+```
 
 ---
 
-#### `size: SystemIconCircleSize | number`
+#### `size: "extraSmall" | "small" | "medium" | "large" | "extraLarge" | "extraExtraLarge" | (string & {})`
+
+> The diameter of the avatar in pixels. Can be given custom size as a string in either px or rem.
+
+Default: "medium"
 
-> The diameter of the avatar in pixels
+| Name              | Size (px) |
+| ----------------- | --------- |
+| "extraSmall"      | 16        |
+| "small"           | 24        |
+| "medium"          | 32        |
+| "large"           | 40        |
+| "extraLarge"      | 64        |
+| "extraExtraLarge" | 120       |
 
-Default: `Avatar.Size.m`
+```tsx
+<Avatar size="large" />
+
+// Custom Size.
+// Note: Please use the predefined sizes as it works nicely with the Canvas Design
+System
 
-| Name  | Size (px) |
-| ----- | --------- |
-| `xs`  | 16        |
-| `s`   | 24        |
-| `m`   | 32        |
-| `l`   | 40        |
-| `xl`  | 64        |
-| `xxl` | 120       |
+<Avatar size="48px"/>
+```
 
 ---
 
 #### `altText: string`
 
-> Text describing what the avatar is showing.
+> The alt text of the Avatar image. This prop is also used for the aria-label.
+
+```tsx
+<Avatar altText="User-Avatar-Button" />
+```
 
 ---
 
@@ -98,14 +93,46 @@ Default: `Avatar.Size.m`
 
 > The URL of the user's photo. Expects a square (1:1) photo.
 
+```tsx
+<Avatar url="https://example.com/image.png" />
+```
+
+---
+
+#### `onClick: (e: React.MouseEvent<HTMLButtonElement>) => void`
+
+> An onClick function to pass to the underlying `<button>` element.
+
+```tsx
+<Avatar onClick={fn} />
+```
+
+---
+
+#### `objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset"`
+
+> An objectFit property that can customize how to resize your image to fit its container.
+
+```tsx
+<Avatar url="https://example.com/image.png" objectFit="cover" />
+```
+
 ---
 
 #### `ref: React.Ref<HTMLButtonElement>`
 
 > A ref to the underlying `<button>` or `<div>` element.
 
+```tsx
+<Avatar ref={ref} />
+```
+
 ---
 
 #### `as: 'div'`
 
 > Option to display the avatar as a div instead of a button.
+
+```tsx
+<Avatar as="div" />
+```
diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 37b5109a5d..7ce1690854 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, calc, createVars} from '@workday/canvas-kit-styling';
+import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -11,13 +11,13 @@ import {system} from '@workday/canvas-tokens-web';
 
 export interface AvatarProps {
   /**
-   * The variant of the Avatar default state. Accepts `Light` or `Dark`.
-   * @default 'light'
+   * The variant of the avatar if using a default image. Accepts "light" or "dark."
+   * @default "light"
    */
   variant?: 'light' | 'dark';
   /**
    * The size of the Avatar.
-   * @default `medium`
+   * @default "medium"
    */
   size?:
     | 'extraSmall'
@@ -28,12 +28,22 @@ export interface AvatarProps {
     | 'extraExtraLarge'
     | (string & {});
   /**
-   * The alt text of the Avatar image. This prop is also used for the aria-label
+   * The alt text of the Avatar image. This prop is also used for the aria-label.
    * @default Avatar
    */
   altText?: string;
+  /**
+   * The URL of the user's photo. Expects a square (1:1) photo
+   */
   url?: string;
+  /**
+   * An onClick function to pass to the underlying `<button>` element.
+   */
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * An objectFit property that can customize how to resize your image to fit its container.
+   * @default "contain"
+   */
   objectFit?: Property.ObjectFit;
 }
 
@@ -201,7 +211,7 @@ export const avatarStencil = createStencil({
 export const Avatar = createComponent('button')({
   displayName: 'Avatar',
   Component: (
-    {variant, size, altText, url, onClick, objectFit, ...elemProps}: AvatarProps,
+    {variant, size, altText = 'Avatar', url, onClick, objectFit, ...elemProps}: AvatarProps,
     ref,
     Element
   ) => {
diff --git a/modules/react/side-panel/stories/stories.tsx b/modules/react/side-panel/stories/stories.tsx
index 2b69379321..663e582b1b 100644
--- a/modules/react/side-panel/stories/stories.tsx
+++ b/modules/react/side-panel/stories/stories.tsx
@@ -243,7 +243,7 @@ const Template = props => (
         <TertiaryButton aria-label="messages" icon={assistantIcon} />
         <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
         <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-        <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+        <Avatar size="medium" variant="light" />
       </GlobalHeader.Item>
     </GlobalHeader>
     <SidePanelWrapper {...props} />

From 025af9bbde5c4b5bce617d60fededdbbd141ca7c Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Fri, 26 Jul 2024 14:00:51 -0400
Subject: [PATCH 15/31] fix: remove elementType and replace with css is(button)

---
 modules/react/avatar/lib/Avatar.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 7ce1690854..434ceb7390 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -60,6 +60,7 @@ export const avatarStencil = createStencil({
     padding: 0,
     border: 0,
     overflow: 'hidden',
+    cursor: 'default',
     borderRadius: system.shape.round,
     width: cssVar(size),
     height: cssVar(size),
@@ -67,6 +68,9 @@ export const avatarStencil = createStencil({
       outline: 'none',
       ...focusRing({separation: 2}),
     },
+    ':is(button)': {
+      cursor: 'pointer',
+    },
     ['& > [data-slot="avatar-icon"]']: {
       transition: 'opacity 150ms linear',
       display: 'flex',
@@ -141,14 +145,6 @@ export const avatarStencil = createStencil({
         },
       },
     },
-    elementType: {
-      div: {
-        cursor: 'default',
-      },
-      button: {
-        cursor: 'pointer',
-      },
-    },
     objectFit: {
       contain: {
         objectFit: 'contain',
@@ -238,7 +234,6 @@ export const Avatar = createComponent('button')({
             size,
             objectFit,
             isImageLoaded: imageLoaded,
-            elementType: Element,
           }),
         ])}
       >

From cd12461afac4f38754ecf87cd1430a2c32ad630f Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Fri, 26 Jul 2024 16:05:18 -0400
Subject: [PATCH 16/31] fix: updated story to match mdx

---
 modules/preview-react/pill/lib/PillAvatar.tsx |  14 +-
 modules/react/avatar/README.md                |  57 ------
 .../avatar/stories/avatar/Avatar.stories.mdx  | 103 ++++++++++
 .../examples/button/DarkVariantButton.tsx     |  21 ++
 .../avatar/examples/button/ImageButton.tsx    |  25 +++
 .../examples/button/LightVariantButton.tsx    |  21 ++
 .../avatar/examples/div/DarkVariantDiv.tsx    |  19 ++
 .../div/DynamicBackgroundColorDiv.tsx         |  32 +++
 .../avatar/examples/div/DynamicSizeDiv.tsx    |  16 ++
 .../stories/avatar/examples/div/ImageDiv.tsx  |  21 ++
 .../avatar/examples/div/LazyLoadDiv.tsx       |  15 ++
 .../avatar/examples/div/LightVariantDiv.tsx   |  19 ++
 .../avatar/examples/div/ObjectFitDiv.tsx      |  25 +++
 modules/react/avatar/stories/stories.tsx      | 184 ------------------
 .../stories_visualTesting.tsx                 |  39 ++--
 15 files changed, 343 insertions(+), 268 deletions(-)
 create mode 100644 modules/react/avatar/stories/avatar/Avatar.stories.mdx
 create mode 100644 modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx
 create mode 100644 modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx
 delete mode 100644 modules/react/avatar/stories/stories.tsx
 rename modules/react/avatar/stories/{ => visual-testing}/stories_visualTesting.tsx (69%)

diff --git a/modules/preview-react/pill/lib/PillAvatar.tsx b/modules/preview-react/pill/lib/PillAvatar.tsx
index f78cef54c8..d309c60ead 100644
--- a/modules/preview-react/pill/lib/PillAvatar.tsx
+++ b/modules/preview-react/pill/lib/PillAvatar.tsx
@@ -3,25 +3,23 @@ import React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Avatar, AvatarProps} from '@workday/canvas-kit-react/avatar';
 import {usePillModel} from './usePillModel';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 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 PillAvatar = createSubcomponent('button')({
+export const PillAvatar = createSubcomponent('div')({
   modelHook: usePillModel,
-})<PillAvatarProps>((elemProps, Element, model) => {
+})<PillAvatarProps>(({...elemProps}: PillAvatarProps, Element, model) => {
   return (
     <Avatar
       style={{opacity: model.state.disabled ? '.7' : '1'}}
-      as="div"
-      size="18px"
+      size={px2rem(18)}
+      as={Element}
       altText={undefined}
       {...elemProps}
-      disabled={model.state.disabled}
-    >
-      {elemProps.children}
-    </Avatar>
+    ></Avatar>
   );
 });
diff --git a/modules/react/avatar/README.md b/modules/react/avatar/README.md
index dbd2acab7a..0899a48c48 100644
--- a/modules/react/avatar/README.md
+++ b/modules/react/avatar/README.md
@@ -8,25 +8,6 @@ A component showing a user's photo with a circular crop.
 yarn add @workday/canvas-kit-react
 ```
 
-## Usage
-
-```tsx
-import * as React from 'react';
-import {Avatar, AvatarVariant} from '@workday/canvas-kit-react/avatar';
-
-// Basic button with click handler
-<Avatar onClick={someFunction} />
-
-// Rendering as a div instead of a button
-<Avatar as="div" />
-
-// Using static properties on Avatar
-<Avatar
-  size="extraSmall"
-  variant="dark"
-/>
-```
-
 ## Component Props
 
 ### Required
@@ -46,10 +27,6 @@ Default: "light"
 | "light" | Light grey background, dark icon |
 | "dark"  | Dark blue background, white icon |
 
-```tsx
-<Avatar variant="dark" />
-```
-
 ---
 
 #### `size: "extraSmall" | "small" | "medium" | "large" | "extraLarge" | "extraExtraLarge" | (string & {})`
@@ -67,72 +44,38 @@ Default: "medium"
 | "extraLarge"      | 64        |
 | "extraExtraLarge" | 120       |
 
-```tsx
-<Avatar size="large" />
-
-// Custom Size.
-// Note: Please use the predefined sizes as it works nicely with the Canvas Design
-System
-
-<Avatar size="48px"/>
-```
-
 ---
 
 #### `altText: string`
 
 > The alt text of the Avatar image. This prop is also used for the aria-label.
 
-```tsx
-<Avatar altText="User-Avatar-Button" />
-```
-
 ---
 
 #### `url: string`
 
 > The URL of the user's photo. Expects a square (1:1) photo.
 
-```tsx
-<Avatar url="https://example.com/image.png" />
-```
-
 ---
 
 #### `onClick: (e: React.MouseEvent<HTMLButtonElement>) => void`
 
 > An onClick function to pass to the underlying `<button>` element.
 
-```tsx
-<Avatar onClick={fn} />
-```
-
 ---
 
 #### `objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset"`
 
 > An objectFit property that can customize how to resize your image to fit its container.
 
-```tsx
-<Avatar url="https://example.com/image.png" objectFit="cover" />
-```
-
 ---
 
 #### `ref: React.Ref<HTMLButtonElement>`
 
 > A ref to the underlying `<button>` or `<div>` element.
 
-```tsx
-<Avatar ref={ref} />
-```
-
 ---
 
 #### `as: 'div'`
 
 > Option to display the avatar as a div instead of a button.
-
-```tsx
-<Avatar as="div" />
-```
diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
new file mode 100644
index 0000000000..dd850984ad
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -0,0 +1,103 @@
+import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
+
+import {DarkVariantDiv} from './examples/div/DarkVariantDiv';
+import {DynamicBackgroundColorDiv} from './examples/div/DynamicBackgroundColorDiv';
+import {DynamicSizeDiv} from './examples/div/DynamicSizeDiv';
+import {ImageDiv} from './examples/div/ImageDiv';
+import {LazyLoadDiv} from './examples/div/LazyLoadDiv';
+import {LightVariantDiv} from './examples/div/LightVariantDiv';
+import {ObjectFitDiv} from './examples/div/ObjectFitDiv';
+
+import {DarkVariantButton} from './examples/button/DarkVariantButton';
+import {ImageButton} from './examples/button/ImageButton.tsx';
+import {LightVariantButton} from './examples/button/LightVariantButton';
+
+<Meta title="Components/Avatar" />
+
+# Canvas Kit Avatar
+
+A component showing a user's photo with a circular crop.
+
+[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+<SymbolDescription name="Avatar" fileName="/react/" />
+
+The example below shows multiple instances of a `Avatar` with various configurations. Like many of
+our components, Avatar accepts an `as` prop, which lets you change the underlying semantic element
+to a `<div>`. This should be done with caution to ensure the best accessibility. Generally,
+`<button>` elements should be used for actions.
+
+### Variant and Size
+
+Avatar defaults to using a "light" `variant` property. You can change the `variant` prop to "dark"
+by including `variant="dark"`.
+
+Avatar defaults to using a "medium" `size` property. You can change the `size` prop to various
+sizing options. See Component API for more details.
+
+#### As a `<div>`
+
+<ExampleCodeBlock code={LightVariantDiv} />
+
+<ExampleCodeBlock code={DarkVariantDiv} />
+
+#### As a `<button>`
+
+<ExampleCodeBlock code={LightVariantButton} />
+
+<ExampleCodeBlock code={DarkVariantButton} />
+
+### Image
+
+Avatar will convert to an image avatar when the `url` prop is included with acceptable url.
+
+#### As a `<div>`
+
+<ExampleCodeBlock code={ImageDiv} />
+
+#### As a `<button>`
+
+<ExampleCodeBlock code={ImageButton} />
+
+### Object Fit
+
+Avatar defaults to using `contain` for object-fit. You can change this property to any other
+acceptable object-fit properties.
+
+<ExampleCodeBlock code={ObjectFitDiv} />
+
+### Lazy Load
+
+Example of implementing lazy load behavior with Avatar.
+
+<ExampleCodeBlock code={LazyLoadDiv} />
+
+### Dynamic Behavior
+
+#### Dynamic Size
+
+For the `size` prop, you can explicitly specify the size you want for the Avatar.
+
+<ExampleCodeBlock code={DynamicSizeDiv} />
+
+#### Dynamic Color
+
+To change the background color of the Avatar, you can use our createStencil functionality.
+
+<ExampleCodeBlock code={DynamicBackgroundColorDiv} />
+
+## Component API
+
+<SymbolDoc name="Avatar" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="Avatar.spec.ts" name="Avatar" />
diff --git a/modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx b/modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx
new file mode 100644
index 0000000000..4c4645fe5e
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+export const DarkVariantButton = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar size="extraExtraLarge" variant="dark" onClick={handleAvatarButtonClick} />
+    <h3>Extra Large</h3>
+    <Avatar size="extraLarge" variant="dark" onClick={handleAvatarButtonClick} />
+    <h3>Large</h3>
+    <Avatar size="large" variant="dark" onClick={handleAvatarButtonClick} />
+    <h3>Medium</h3>
+    <Avatar size="medium" variant="dark" onClick={handleAvatarButtonClick} />
+    <h3>Small</h3>
+    <Avatar size="small" variant="dark" onClick={handleAvatarButtonClick} />
+    <h3>Extra Small</h3>
+    <Avatar size="extraSmall" variant="dark" onClick={handleAvatarButtonClick} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx b/modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx
new file mode 100644
index 0000000000..d50c58303f
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../../test-avatar.png';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+export const ImageButton = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar size="extraExtraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
+    <h3>Extra Large</h3>
+    <Avatar size="extraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
+    <h3>Large</h3>
+    <Avatar size="large" url={testAvatar} onClick={handleAvatarButtonClick} />
+    <h3>Medium</h3>
+    <Avatar size="medium" url={testAvatar} onClick={handleAvatarButtonClick} />
+    <h3>Small</h3>
+    <Avatar size="small" url={testAvatar} onClick={handleAvatarButtonClick} />
+    <h3>Extra Small</h3>
+    <Avatar size="extraSmall" url={testAvatar} onClick={handleAvatarButtonClick} />
+    <h3>Broken Link</h3>
+    <Avatar url="/fake/path/to/image.png" onClick={handleAvatarButtonClick} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx b/modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx
new file mode 100644
index 0000000000..f763f26bf9
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+export const LightVariantButton = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar size="extraExtraLarge" onClick={handleAvatarButtonClick} />
+    <h3>Extra Large</h3>
+    <Avatar size="extraLarge" onClick={handleAvatarButtonClick} />
+    <h3>Large</h3>
+    <Avatar size="large" onClick={handleAvatarButtonClick} />
+    <h3>Medium</h3>
+    <Avatar size="medium" onClick={handleAvatarButtonClick} />
+    <h3>Small</h3>
+    <Avatar size="small" onClick={handleAvatarButtonClick} />
+    <h3>Extra Small</h3>
+    <Avatar size="extraSmall" onClick={handleAvatarButtonClick} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx
new file mode 100644
index 0000000000..a396fc32b8
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export const DarkVariantDiv = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar as="div" size="extraExtraLarge" variant="dark" />
+    <h3>Extra Large</h3>
+    <Avatar as="div" size="extraLarge" variant="dark" />
+    <h3>Large</h3>
+    <Avatar as="div" size="large" variant="dark" />
+    <h3>Medium</h3>
+    <Avatar as="div" size="medium" variant="dark" />
+    <h3>Small</h3>
+    <Avatar as="div" size="small" variant="dark" />
+    <h3>Extra Small</h3>
+    <Avatar as="div" size="extraSmall" variant="dark" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx
new file mode 100644
index 0000000000..777b21d125
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../../../../icon';
+
+const customBlueAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.berrySmoothie400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.berrySmoothie100,
+    },
+  },
+});
+
+const customGreenAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.watermelon400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.watermelon100,
+    },
+  },
+});
+
+export const DynamicBackgroundColorDiv = () => (
+  <div className="story">
+    <h3>Blue</h3>
+    <Avatar as="div" size="extraExtraLarge" {...customBlueAvatarStencil()} />
+    <h3>Green</h3>
+    <Avatar as="div" size="extraLarge" {...customGreenAvatarStencil()} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx
new file mode 100644
index 0000000000..5ecc208a68
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export const DynamicSizeDiv = () => (
+  <div className="story">
+    <h3>30px</h3>
+    <Avatar as="div" size={px2rem(30)} />
+    <h3>40px</h3>
+    <Avatar as="div" size={px2rem(40)} />
+    <h3>3rem</h3>
+    <Avatar as="div" size="3rem" />
+    <h3>4rem</h3>
+    <Avatar as="div" size="4rem" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx
new file mode 100644
index 0000000000..d5bb294576
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../../test-avatar.png';
+
+export const ImageDiv = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar as="div" size="extraExtraLarge" url={testAvatar} />
+    <h3>Extra Large</h3>
+    <Avatar as="div" size="extraLarge" url={testAvatar} />
+    <h3>Large</h3>
+    <Avatar as="div" size="large" url={testAvatar} />
+    <h3>Medium</h3>
+    <Avatar as="div" size="medium" url={testAvatar} />
+    <h3>Small</h3>
+    <Avatar as="div" size="small" url={testAvatar} />
+    <h3>Extra Small</h3>
+    <Avatar as="div" size="extraSmall" url={testAvatar} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx
new file mode 100644
index 0000000000..8176cda99d
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../../test-avatar.png';
+
+export const LazyLoadDiv = () => (
+  <div className="story">
+    {Array.from({length: 5}, (v, index) => (
+      <>
+        <Avatar as="div" size="large" url={testAvatar + '?v=' + index} />
+        <br />
+      </>
+    ))}
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx
new file mode 100644
index 0000000000..94241df8e9
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export const LightVariantDiv = () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar as="div" size="extraExtraLarge" />
+    <h3>Extra Large</h3>
+    <Avatar as="div" size="extraLarge" />
+    <h3>Large</h3>
+    <Avatar as="div" size="large" />
+    <h3>Medium</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Small</h3>
+    <Avatar as="div" size="small" />
+    <h3>Extra Small</h3>
+    <Avatar as="div" size="extraSmall" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx
new file mode 100644
index 0000000000..384fc8f0c1
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export const ObjectFitDiv = () => (
+  <div className="story">
+    <h3>Original Rectangle Image</h3>
+    <img alt="" src="https://placehold.co/450x200/png" />
+    <h3>Object fit on a Rectangle Image</h3>
+    <Avatar as="div" url="https://placehold.co/450x200/png" objectFit="contain" />
+    <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
+    <Avatar
+      as="div"
+      size={px2rem(200)}
+      url="https://placehold.co/450x200/png"
+      objectFit="contain"
+    />
+    <h3>Original Square Image</h3>
+    <img alt="" src="https://placehold.co/450x450/png" />
+    <h3>Object fit on a Square Image</h3>
+    <Avatar as="div" url="https://placehold.co/450x450/png" />
+    <h3>Object fit on a Square Image using Dynamic Size</h3>
+    <Avatar as="div" size={px2rem(200)} url="https://placehold.co/450x450/png" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/stories.tsx b/modules/react/avatar/stories/stories.tsx
deleted file mode 100644
index 05ad903fd0..0000000000
--- a/modules/react/avatar/stories/stories.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import * as React from 'react';
-import {storiesOf} from '@storybook/react';
-
-import {Avatar} from '../index';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '../../icon';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-const customBlueAvatarStencil = createStencil({
-  base: {
-    backgroundColor: base.berrySmoothie400,
-    ['[data-slot="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: base.berrySmoothie100,
-    },
-  },
-});
-
-const customGreenAvatarStencil = createStencil({
-  base: {
-    backgroundColor: base.watermelon400,
-    ['[data-slot="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: base.watermelon100,
-    },
-  },
-});
-
-storiesOf('Components/Indicators/Avatar', module)
-  .addParameters({ReadmePath: 'react/avatar'})
-  .addParameters({component: Avatar})
-  .add('Light', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size="extraExtraLarge" />
-      <h3>Extra Large</h3>
-      <Avatar as="div" size="extraLarge" />
-      <h3>Large</h3>
-      <Avatar as="div" size="large" />
-      <h3>Medium</h3>
-      <Avatar as="div" size="medium" />
-      <h3>Small</h3>
-      <Avatar as="div" size="small" />
-      <h3>Extra Small</h3>
-      <Avatar as="div" size="extraSmall" />
-    </div>
-  ))
-  .add('Dark', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size="extraExtraLarge" variant="dark" />
-      <h3>Extra Large</h3>
-      <Avatar as="div" size="extraLarge" variant="dark" />
-      <h3>Large</h3>
-      <Avatar as="div" size="large" variant="dark" />
-      <h3>Medium</h3>
-      <Avatar as="div" size="medium" variant="dark" />
-      <h3>Small</h3>
-      <Avatar as="div" size="small" variant="dark" />
-      <h3>Extra Small</h3>
-      <Avatar as="div" size="extraSmall" variant="dark" />
-    </div>
-  ))
-  .add('Dynamic Background', () => (
-    <div className="story">
-      <h3>Blue</h3>
-      <Avatar as="div" size="extraExtraLarge" {...customBlueAvatarStencil()} />
-      <h3>Green</h3>
-      <Avatar as="div" size="extraLarge" {...customGreenAvatarStencil()} />
-    </div>
-  ))
-  .add('Image', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar as="div" size="extraExtraLarge" url={testAvatar} />
-      <h3>Extra Large</h3>
-      <Avatar as="div" size="extraLarge" url={testAvatar} />
-      <h3>Large</h3>
-      <Avatar as="div" size="large" url={testAvatar} />
-      <h3>Medium</h3>
-      <Avatar as="div" size="medium" url={testAvatar} />
-      <h3>Small</h3>
-      <Avatar as="div" size="small" url={testAvatar} />
-      <h3>Extra Small</h3>
-      <Avatar as="div" size="extraSmall" url={testAvatar} />
-    </div>
-  ))
-  .add('ObjectFit / Non-Square Image', () => (
-    <div className="story">
-      <h3>Original Rectangle Image</h3>
-      <img alt="" src="https://placehold.co/450x200/png" />
-      <h3>Object fit on a Rectangle Image</h3>
-      <Avatar as="div" url="https://placehold.co/450x200/png" objectFit="contain" />
-      {/* NOTE: Need to make size dynamic */}
-      <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
-      <Avatar as="div" size="200px" url="https://placehold.co/450x200/png" objectFit="contain" />
-      <h3>Original Square Image</h3>
-      <img alt="" src="https://placehold.co/450x450/png" />
-      <h3>Object fit on a Square Image</h3>
-      <Avatar as="div" url="https://placehold.co/450x450/png" />
-      {/* NOTE: Need to make size dynamic */}
-      <h3>Object fit on a Square Image using Dynamic Size</h3>
-      <Avatar as="div" size="200px" url="https://placehold.co/450x450/png" />
-    </div>
-  ))
-  .add('Dynamic Size', () => (
-    <div className="story">
-      <h3>30px</h3>
-      <Avatar as="div" size={px2rem(30)} />
-      <h3>40px</h3>
-      <Avatar as="div" size={px2rem(40)} />
-      <h3>3rem</h3>
-      <Avatar as="div" size="3rem" />
-      <h3>4rem</h3>
-      <Avatar as="div" size="4rem" />
-    </div>
-  ))
-  .add('Lazy Loading', () => (
-    <div className="story">
-      <h3>Lazy Loading</h3>
-      {Array.from({length: 100}, (v, index) => (
-        <>
-          <Avatar as="div" size="large" url={testAvatar + '?v=' + index} />
-          <br />
-        </>
-      ))}
-    </div>
-  ));
-
-storiesOf('Components/Indicators/Avatar/Avatar Button', module)
-  .addParameters({ReadmePath: 'react/avatar'})
-  .addParameters({component: Avatar})
-  .add('Light', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar size="extraExtraLarge" onClick={handleAvatarButtonClick} />
-      <h3>Extra Large</h3>
-      <Avatar size="extraLarge" onClick={handleAvatarButtonClick} />
-      <h3>Large</h3>
-      <Avatar size="large" onClick={handleAvatarButtonClick} />
-      <h3>Medium</h3>
-      <Avatar size="medium" onClick={handleAvatarButtonClick} />
-      <h3>Small</h3>
-      <Avatar size="small" onClick={handleAvatarButtonClick} />
-      <h3>Extra Small</h3>
-      <Avatar size="extraSmall" onClick={handleAvatarButtonClick} />
-    </div>
-  ))
-  .add('Dark', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar size="extraExtraLarge" variant="dark" onClick={handleAvatarButtonClick} />
-      <h3>Extra Large</h3>
-      <Avatar size="extraLarge" variant="dark" onClick={handleAvatarButtonClick} />
-      <h3>Large</h3>
-      <Avatar size="large" variant="dark" onClick={handleAvatarButtonClick} />
-      <h3>Medium</h3>
-      <Avatar size="medium" variant="dark" onClick={handleAvatarButtonClick} />
-      <h3>Small</h3>
-      <Avatar size="small" variant="dark" onClick={handleAvatarButtonClick} />
-      <h3>Extra Small</h3>
-      <Avatar size="extraSmall" variant="dark" onClick={handleAvatarButtonClick} />
-    </div>
-  ))
-  .add('Image', () => (
-    <div className="story">
-      <h3>Extra-Extra Large</h3>
-      <Avatar size="extraExtraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Extra Large</h3>
-      <Avatar size="extraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Large</h3>
-      <Avatar size="large" url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Medium</h3>
-      <Avatar size="medium" url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Small</h3>
-      <Avatar size="small" url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Extra Small</h3>
-      <Avatar size="extraSmall" url={testAvatar} onClick={handleAvatarButtonClick} />
-      <h3>Broken Link</h3>
-      <Avatar url="/fake/path/to/image.png" onClick={handleAvatarButtonClick} />
-    </div>
-  ));
diff --git a/modules/react/avatar/stories/stories_visualTesting.tsx b/modules/react/avatar/stories/visual-testing/stories_visualTesting.tsx
similarity index 69%
rename from modules/react/avatar/stories/stories_visualTesting.tsx
rename to modules/react/avatar/stories/visual-testing/stories_visualTesting.tsx
index 9ca068d51d..6ddb4eca81 100644
--- a/modules/react/avatar/stories/stories_visualTesting.tsx
+++ b/modules/react/avatar/stories/visual-testing/stories_visualTesting.tsx
@@ -5,11 +5,12 @@ import {
   permutateProps,
   StaticStates,
 } from '@workday/canvas-kit-react/testing';
-import {withSnapshotsEnabled} from '../../../../utils/storybook';
-import {Avatar} from '../index';
+import {withSnapshotsEnabled} from '../../../../../utils/storybook';
+import {Avatar} from '../../index';
 
 // @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
+import testAvatar from '../test-avatar.png';
+
 // eslint-disable-next-line no-empty-function
 const noop = () => {};
 
@@ -39,16 +40,16 @@ export const AvatarStates = () => (
       })}
       rowProps={permutateProps({
         variant: [
-          {value: Avatar.Variant.Light, label: 'Light'},
-          {value: Avatar.Variant.Dark, label: 'Dark'},
+          {label: 'Light', value: 'light'},
+          {label: 'Dark', value: 'dark'},
         ],
         size: [
-          {label: 'XS', value: Avatar.Size.xs},
-          {label: 'S', value: Avatar.Size.s},
-          {label: 'M', value: Avatar.Size.m},
-          {label: 'L', value: Avatar.Size.l},
-          {label: 'XL', value: Avatar.Size.xl},
-          {label: 'XXL', value: Avatar.Size.xxl},
+          {label: 'XS', value: 'extraSmall'},
+          {label: 'S', value: 'small'},
+          {label: 'M', value: 'medium'},
+          {label: 'L', value: 'large'},
+          {label: 'XL', value: 'extraLarge'},
+          {label: 'XXL', value: 'extraExtraLarge'},
         ],
         url: [
           {value: undefined, label: 'Placeholder'},
@@ -76,16 +77,16 @@ export const AvatarButtonStates = () => (
       })}
       rowProps={permutateProps({
         variant: [
-          {value: Avatar.Variant.Light, label: 'Light'},
-          {value: Avatar.Variant.Dark, label: 'Dark'},
+          {label: 'Light', value: 'light'},
+          {label: 'Dark', value: 'dark'},
         ],
         size: [
-          {label: 'XS', value: Avatar.Size.xs},
-          {label: 'S', value: Avatar.Size.s},
-          {label: 'M', value: Avatar.Size.m},
-          {label: 'L', value: Avatar.Size.l},
-          {label: 'XL', value: Avatar.Size.xl},
-          {label: 'XXL', value: Avatar.Size.xxl},
+          {label: 'XS', value: 'extraSmall'},
+          {label: 'S', value: 'small'},
+          {label: 'M', value: 'medium'},
+          {label: 'L', value: 'large'},
+          {label: 'XL', value: 'extraLarge'},
+          {label: 'XXL', value: 'extraExtraLarge'},
         ],
         url: [
           {value: undefined, label: 'Placeholder'},

From 9bf8b2a849e816125b34b95ea20897546b7b2fef Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Mon, 29 Jul 2024 11:57:37 -0400
Subject: [PATCH 17/31] fix: updated docs to match other components

---
 .../avatar/stories/avatar/Avatar.stories.mdx  | 73 +++++++------------
 .../avatar/stories/avatar/examples/Button.tsx | 14 ++++
 ...oundColorDiv.tsx => DynamicBackground.tsx} |  8 +-
 .../avatar/stories/avatar/examples/Image.tsx  | 18 +++++
 .../{div/LazyLoadDiv.tsx => LazyLoad.tsx}     |  6 +-
 .../{div/ObjectFitDiv.tsx => ObjectFit.tsx}   |  2 +-
 .../{div/LightVariantDiv.tsx => Size.tsx}     | 11 ++-
 .../stories/avatar/examples/Variant.tsx       | 11 +++
 .../examples/button/DarkVariantButton.tsx     | 21 ------
 .../avatar/examples/button/ImageButton.tsx    | 25 -------
 .../examples/button/LightVariantButton.tsx    | 21 ------
 .../avatar/examples/div/DarkVariantDiv.tsx    | 19 -----
 .../avatar/examples/div/DynamicSizeDiv.tsx    | 16 ----
 .../stories/avatar/examples/div/ImageDiv.tsx  | 21 ------
 14 files changed, 88 insertions(+), 178 deletions(-)
 create mode 100644 modules/react/avatar/stories/avatar/examples/Button.tsx
 rename modules/react/avatar/stories/avatar/examples/{div/DynamicBackgroundColorDiv.tsx => DynamicBackground.tsx} (77%)
 create mode 100644 modules/react/avatar/stories/avatar/examples/Image.tsx
 rename modules/react/avatar/stories/avatar/examples/{div/LazyLoadDiv.tsx => LazyLoad.tsx} (60%)
 rename modules/react/avatar/stories/avatar/examples/{div/ObjectFitDiv.tsx => ObjectFit.tsx} (96%)
 rename modules/react/avatar/stories/avatar/examples/{div/LightVariantDiv.tsx => Size.tsx} (62%)
 create mode 100644 modules/react/avatar/stories/avatar/examples/Variant.tsx
 delete mode 100644 modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx
 delete mode 100644 modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx
 delete mode 100644 modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx
 delete mode 100644 modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx
 delete mode 100644 modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx
 delete mode 100644 modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx

diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index dd850984ad..b3ef198443 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -1,16 +1,12 @@
 import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
 
-import {DarkVariantDiv} from './examples/div/DarkVariantDiv';
-import {DynamicBackgroundColorDiv} from './examples/div/DynamicBackgroundColorDiv';
-import {DynamicSizeDiv} from './examples/div/DynamicSizeDiv';
-import {ImageDiv} from './examples/div/ImageDiv';
-import {LazyLoadDiv} from './examples/div/LazyLoadDiv';
-import {LightVariantDiv} from './examples/div/LightVariantDiv';
-import {ObjectFitDiv} from './examples/div/ObjectFitDiv';
-
-import {DarkVariantButton} from './examples/button/DarkVariantButton';
-import {ImageButton} from './examples/button/ImageButton.tsx';
-import {LightVariantButton} from './examples/button/LightVariantButton';
+import {Button} from '../avatar/examples/Button';
+import {Image} from '../avatar/examples/Image';
+import {LazyLoad} from '../avatar/examples/LazyLoad';
+import {ObjectFit} from '../avatar/examples/ObjectFit';
+import {Size} from '../avatar/examples/Size';
+import {Variant} from '../avatar/examples/Variant';
+import {DynamicBackground} from '../avatar/examples/DynamicBackground';
 
 <Meta title="Components/Avatar" />
 
@@ -30,69 +26,56 @@ yarn add @workday/canvas-kit-react
 
 <SymbolDescription name="Avatar" fileName="/react/" />
 
-The example below shows multiple instances of a `Avatar` with various configurations. Like many of
-our components, Avatar accepts an `as` prop, which lets you change the underlying semantic element
-to a `<div>`. This should be done with caution to ensure the best accessibility. Generally,
-`<button>` elements should be used for actions.
+The example below shows multiple instances of a `Avatar` with various configurations.
 
-### Variant and Size
+### Button
 
-Avatar defaults to using a "light" `variant` property. You can change the `variant` prop to "dark"
-by including `variant="dark"`.
+Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
+semantic element to a `<div>`. This should be done with caution to ensure the best accessibility.
+Generally, `<button>` elements should be used for actions.
 
-Avatar defaults to using a "medium" `size` property. You can change the `size` prop to various
-sizing options. See Component API for more details.
+<ExampleCodeBlock code={Button} />
 
-#### As a `<div>`
+### Variant
 
-<ExampleCodeBlock code={LightVariantDiv} />
+Avatar defaults to using a "light" `variant` property. You can change the `variant` prop to "dark"
+by including `variant="dark"`.
 
-<ExampleCodeBlock code={DarkVariantDiv} />
+<ExampleCodeBlock code={Variant} />
 
-#### As a `<button>`
+### Size
+
+Avatar defaults to using a "medium" `size` property. You can change the `size` prop to various
+sizing options. See Component API for more details.
 
-<ExampleCodeBlock code={LightVariantButton} />
+Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
 
-<ExampleCodeBlock code={DarkVariantButton} />
+<ExampleCodeBlock code={Size} />
 
 ### Image
 
 Avatar will convert to an image avatar when the `url` prop is included with acceptable url.
 
-#### As a `<div>`
-
-<ExampleCodeBlock code={ImageDiv} />
-
-#### As a `<button>`
-
-<ExampleCodeBlock code={ImageButton} />
+<ExampleCodeBlock code={Image} />
 
 ### Object Fit
 
 Avatar defaults to using `contain` for object-fit. You can change this property to any other
 acceptable object-fit properties.
 
-<ExampleCodeBlock code={ObjectFitDiv} />
+<ExampleCodeBlock code={ObjectFit} />
 
 ### Lazy Load
 
 Example of implementing lazy load behavior with Avatar.
 
-<ExampleCodeBlock code={LazyLoadDiv} />
-
-### Dynamic Behavior
-
-#### Dynamic Size
-
-For the `size` prop, you can explicitly specify the size you want for the Avatar.
-
-<ExampleCodeBlock code={DynamicSizeDiv} />
+<ExampleCodeBlock code={LazyLoad} />
 
-#### Dynamic Color
+### Dynamic Color
 
 To change the background color of the Avatar, you can use our createStencil functionality.
 
-<ExampleCodeBlock code={DynamicBackgroundColorDiv} />
+<ExampleCodeBlock code={DynamicBackground} />
 
 ## Component API
 
diff --git a/modules/react/avatar/stories/avatar/examples/Button.tsx b/modules/react/avatar/stories/avatar/examples/Button.tsx
new file mode 100644
index 0000000000..6f29af77aa
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Button.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+export const Button = () => (
+  <div className="story">
+    <Avatar size="extraLarge" variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar size="extraLarge" onClick={handleAvatarButtonClick} />
+    <Avatar size="extraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx b/modules/react/avatar/stories/avatar/examples/DynamicBackground.tsx
similarity index 77%
rename from modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx
rename to modules/react/avatar/stories/avatar/examples/DynamicBackground.tsx
index 777b21d125..53046aa4fd 100644
--- a/modules/react/avatar/stories/avatar/examples/div/DynamicBackgroundColorDiv.tsx
+++ b/modules/react/avatar/stories/avatar/examples/DynamicBackground.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {base} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '../../../../../icon';
+import {systemIconStencil} from '../../../../icon';
 
 const customBlueAvatarStencil = createStencil({
   base: {
@@ -22,11 +22,9 @@ const customGreenAvatarStencil = createStencil({
   },
 });
 
-export const DynamicBackgroundColorDiv = () => (
+export const DynamicBackground = () => (
   <div className="story">
-    <h3>Blue</h3>
-    <Avatar as="div" size="extraExtraLarge" {...customBlueAvatarStencil()} />
-    <h3>Green</h3>
+    <Avatar as="div" size="extraLarge" {...customBlueAvatarStencil()} />
     <Avatar as="div" size="extraLarge" {...customGreenAvatarStencil()} />
   </div>
 );
diff --git a/modules/react/avatar/stories/avatar/examples/Image.tsx b/modules/react/avatar/stories/avatar/examples/Image.tsx
new file mode 100644
index 0000000000..7390851afd
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Image.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+export const Image = () => (
+  <div className="story">
+    <h3>Working Images</h3>
+    <Avatar size="extraExtraLarge" as="div" url={testAvatar} />
+    <Avatar size="extraLarge" as="div" url={testAvatar} />
+    <Avatar size="large" as="div" url={testAvatar} />
+    <Avatar size="medium" as="div" url={testAvatar} />
+    <Avatar size="small" as="div" url={testAvatar} />
+    <Avatar size="extraSmall" as="div" url={testAvatar} />
+    <h3>Broken Image</h3>
+    <Avatar url="/fake/path/to/image.png" as="div" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx b/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
similarity index 60%
rename from modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx
rename to modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
index 8176cda99d..415bb7c52b 100644
--- a/modules/react/avatar/stories/avatar/examples/div/LazyLoadDiv.tsx
+++ b/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore: Cannot find module error
-import testAvatar from '../../../test-avatar.png';
+import testAvatar from '../../test-avatar.png';
 
-export const LazyLoadDiv = () => (
+export const LazyLoad = () => (
   <div className="story">
     {Array.from({length: 5}, (v, index) => (
       <>
-        <Avatar as="div" size="large" url={testAvatar + '?v=' + index} />
+        <Avatar as="div" size="medium" url={testAvatar + '?v=' + index} />
         <br />
       </>
     ))}
diff --git a/modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
similarity index 96%
rename from modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx
rename to modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
index 384fc8f0c1..263a5e163f 100644
--- a/modules/react/avatar/stories/avatar/examples/div/ObjectFitDiv.tsx
+++ b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {px2rem} from '@workday/canvas-kit-styling';
 
-export const ObjectFitDiv = () => (
+export const ObjectFit = () => (
   <div className="story">
     <h3>Original Rectangle Image</h3>
     <img alt="" src="https://placehold.co/450x200/png" />
diff --git a/modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx b/modules/react/avatar/stories/avatar/examples/Size.tsx
similarity index 62%
rename from modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx
rename to modules/react/avatar/stories/avatar/examples/Size.tsx
index 94241df8e9..1aaaa7989f 100644
--- a/modules/react/avatar/stories/avatar/examples/div/LightVariantDiv.tsx
+++ b/modules/react/avatar/stories/avatar/examples/Size.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
 
-export const LightVariantDiv = () => (
+export const Size = () => (
   <div className="story">
     <h3>Extra-Extra Large</h3>
     <Avatar as="div" size="extraExtraLarge" />
@@ -15,5 +16,13 @@ export const LightVariantDiv = () => (
     <Avatar as="div" size="small" />
     <h3>Extra Small</h3>
     <Avatar as="div" size="extraSmall" />
+    <h3>30px</h3>
+    <Avatar as="div" size={px2rem(30)} />
+    <h3>40px</h3>
+    <Avatar as="div" size={px2rem(40)} />
+    <h3>3rem</h3>
+    <Avatar as="div" size="3rem" />
+    <h3>4rem</h3>
+    <Avatar as="div" size="4rem" />
   </div>
 );
diff --git a/modules/react/avatar/stories/avatar/examples/Variant.tsx b/modules/react/avatar/stories/avatar/examples/Variant.tsx
new file mode 100644
index 0000000000..6804fb6ad2
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Variant.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export const Variant = () => (
+  <div className="story">
+    <h3>Light</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Dark</h3>
+    <Avatar as="div" size="medium" variant="dark" />
+  </div>
+);
diff --git a/modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx b/modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx
deleted file mode 100644
index 4c4645fe5e..0000000000
--- a/modules/react/avatar/stories/avatar/examples/button/DarkVariantButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-export const DarkVariantButton = () => (
-  <div className="story">
-    <h3>Extra-Extra Large</h3>
-    <Avatar size="extraExtraLarge" variant="dark" onClick={handleAvatarButtonClick} />
-    <h3>Extra Large</h3>
-    <Avatar size="extraLarge" variant="dark" onClick={handleAvatarButtonClick} />
-    <h3>Large</h3>
-    <Avatar size="large" variant="dark" onClick={handleAvatarButtonClick} />
-    <h3>Medium</h3>
-    <Avatar size="medium" variant="dark" onClick={handleAvatarButtonClick} />
-    <h3>Small</h3>
-    <Avatar size="small" variant="dark" onClick={handleAvatarButtonClick} />
-    <h3>Extra Small</h3>
-    <Avatar size="extraSmall" variant="dark" onClick={handleAvatarButtonClick} />
-  </div>
-);
diff --git a/modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx b/modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx
deleted file mode 100644
index d50c58303f..0000000000
--- a/modules/react/avatar/stories/avatar/examples/button/ImageButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-// @ts-ignore: Cannot find module error
-import testAvatar from '../../../test-avatar.png';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-export const ImageButton = () => (
-  <div className="story">
-    <h3>Extra-Extra Large</h3>
-    <Avatar size="extraExtraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
-    <h3>Extra Large</h3>
-    <Avatar size="extraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
-    <h3>Large</h3>
-    <Avatar size="large" url={testAvatar} onClick={handleAvatarButtonClick} />
-    <h3>Medium</h3>
-    <Avatar size="medium" url={testAvatar} onClick={handleAvatarButtonClick} />
-    <h3>Small</h3>
-    <Avatar size="small" url={testAvatar} onClick={handleAvatarButtonClick} />
-    <h3>Extra Small</h3>
-    <Avatar size="extraSmall" url={testAvatar} onClick={handleAvatarButtonClick} />
-    <h3>Broken Link</h3>
-    <Avatar url="/fake/path/to/image.png" onClick={handleAvatarButtonClick} />
-  </div>
-);
diff --git a/modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx b/modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx
deleted file mode 100644
index f763f26bf9..0000000000
--- a/modules/react/avatar/stories/avatar/examples/button/LightVariantButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-export const LightVariantButton = () => (
-  <div className="story">
-    <h3>Extra-Extra Large</h3>
-    <Avatar size="extraExtraLarge" onClick={handleAvatarButtonClick} />
-    <h3>Extra Large</h3>
-    <Avatar size="extraLarge" onClick={handleAvatarButtonClick} />
-    <h3>Large</h3>
-    <Avatar size="large" onClick={handleAvatarButtonClick} />
-    <h3>Medium</h3>
-    <Avatar size="medium" onClick={handleAvatarButtonClick} />
-    <h3>Small</h3>
-    <Avatar size="small" onClick={handleAvatarButtonClick} />
-    <h3>Extra Small</h3>
-    <Avatar size="extraSmall" onClick={handleAvatarButtonClick} />
-  </div>
-);
diff --git a/modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx
deleted file mode 100644
index a396fc32b8..0000000000
--- a/modules/react/avatar/stories/avatar/examples/div/DarkVariantDiv.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-
-export const DarkVariantDiv = () => (
-  <div className="story">
-    <h3>Extra-Extra Large</h3>
-    <Avatar as="div" size="extraExtraLarge" variant="dark" />
-    <h3>Extra Large</h3>
-    <Avatar as="div" size="extraLarge" variant="dark" />
-    <h3>Large</h3>
-    <Avatar as="div" size="large" variant="dark" />
-    <h3>Medium</h3>
-    <Avatar as="div" size="medium" variant="dark" />
-    <h3>Small</h3>
-    <Avatar as="div" size="small" variant="dark" />
-    <h3>Extra Small</h3>
-    <Avatar as="div" size="extraSmall" variant="dark" />
-  </div>
-);
diff --git a/modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx
deleted file mode 100644
index 5ecc208a68..0000000000
--- a/modules/react/avatar/stories/avatar/examples/div/DynamicSizeDiv.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {px2rem} from '@workday/canvas-kit-styling';
-
-export const DynamicSizeDiv = () => (
-  <div className="story">
-    <h3>30px</h3>
-    <Avatar as="div" size={px2rem(30)} />
-    <h3>40px</h3>
-    <Avatar as="div" size={px2rem(40)} />
-    <h3>3rem</h3>
-    <Avatar as="div" size="3rem" />
-    <h3>4rem</h3>
-    <Avatar as="div" size="4rem" />
-  </div>
-);
diff --git a/modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx b/modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx
deleted file mode 100644
index d5bb294576..0000000000
--- a/modules/react/avatar/stories/avatar/examples/div/ImageDiv.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-// @ts-ignore: Cannot find module error
-import testAvatar from '../../../test-avatar.png';
-
-export const ImageDiv = () => (
-  <div className="story">
-    <h3>Extra-Extra Large</h3>
-    <Avatar as="div" size="extraExtraLarge" url={testAvatar} />
-    <h3>Extra Large</h3>
-    <Avatar as="div" size="extraLarge" url={testAvatar} />
-    <h3>Large</h3>
-    <Avatar as="div" size="large" url={testAvatar} />
-    <h3>Medium</h3>
-    <Avatar as="div" size="medium" url={testAvatar} />
-    <h3>Small</h3>
-    <Avatar as="div" size="small" url={testAvatar} />
-    <h3>Extra Small</h3>
-    <Avatar as="div" size="extraSmall" url={testAvatar} />
-  </div>
-);

From ef3912f14ebb0f5338f2daa7e867693f77055a16 Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:37:16 -0600
Subject: [PATCH 18/31] Apply suggestions from code review

---
 modules/labs-react/expandable/lib/ExpandableAvatar.tsx | 2 +-
 modules/react/avatar/lib/Avatar.tsx                    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/modules/labs-react/expandable/lib/ExpandableAvatar.tsx b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
index fd571ef7ba..7ef10c871f 100644
--- a/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
+++ b/modules/labs-react/expandable/lib/ExpandableAvatar.tsx
@@ -21,6 +21,6 @@ const StyledAvatar = styled(Avatar)<StyledType>({
 export const ExpandableAvatar = createComponent('button')({
   displayName: 'Expandable.Avatar',
   Component: ({altText, ...elemProps}: ExpandableAvatarProps, ref) => {
-    return <StyledAvatar altText="" as="div" ref={ref} size="32px" {...elemProps} />;
+    return <StyledAvatar altText="" as="div" ref={ref} size="medium" {...elemProps} />;
   },
 });
diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 434ceb7390..2a5f491e0e 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -227,7 +227,6 @@ export const Avatar = createComponent('button')({
       <Element
         ref={ref}
         aria-label={altText}
-        onClick={onClick}
         {...mergeStyles(elemProps, [
           avatarStencil({
             variant,

From a9a650b8762bcc5743c5701fef8a6cce72fe1be7 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Mon, 29 Jul 2024 13:03:48 -0400
Subject: [PATCH 19/31] fix: onClick removal + size update

---
 modules/react/avatar/lib/Avatar.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 434ceb7390..1c72ab44d2 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
+import {createStencil, calc} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -36,10 +36,6 @@ export interface AvatarProps {
    * The URL of the user's photo. Expects a square (1:1) photo
    */
   url?: string;
-  /**
-   * An onClick function to pass to the underlying `<button>` element.
-   */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * An objectFit property that can customize how to resize your image to fit its container.
    * @default "contain"
@@ -62,8 +58,8 @@ export const avatarStencil = createStencil({
     overflow: 'hidden',
     cursor: 'default',
     borderRadius: system.shape.round,
-    width: cssVar(size),
-    height: cssVar(size),
+    width: size,
+    height: size,
     '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
       outline: 'none',
       ...focusRing({separation: 2}),
@@ -207,7 +203,7 @@ export const avatarStencil = createStencil({
 export const Avatar = createComponent('button')({
   displayName: 'Avatar',
   Component: (
-    {variant, size, altText = 'Avatar', url, onClick, objectFit, ...elemProps}: AvatarProps,
+    {variant, size, altText = 'Avatar', url, objectFit, ...elemProps}: AvatarProps,
     ref,
     Element
   ) => {
@@ -227,7 +223,6 @@ export const Avatar = createComponent('button')({
       <Element
         ref={ref}
         aria-label={altText}
-        onClick={onClick}
         {...mergeStyles(elemProps, [
           avatarStencil({
             variant,

From ebee18f25e5386ecb207516581a12ee8cca2225a Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Mon, 29 Jul 2024 12:32:03 -0600
Subject: [PATCH 20/31] fix: Clean up docs and code

---
 modules/react/avatar/lib/Avatar.tsx           | 52 ++++++++++++-------
 .../avatar/stories/avatar/Avatar.stories.mdx  | 16 +++---
 .../avatar/stories/avatar/examples/Button.tsx | 15 ++++--
 ...DynamicBackground.tsx => CustomStyles.tsx} | 17 +++---
 .../avatar/stories/avatar/examples/Image.tsx  | 10 +++-
 .../stories/avatar/examples/LazyLoad.tsx      |  2 +-
 .../stories/avatar/examples/ObjectFit.tsx     | 10 +++-
 7 files changed, 82 insertions(+), 40 deletions(-)
 rename modules/react/avatar/stories/avatar/examples/{DynamicBackground.tsx => CustomStyles.tsx} (58%)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 2a5f491e0e..1a4953a536 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {Property} from 'csstype';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, calc} from '@workday/canvas-kit-styling';
+import {createStencil, calc} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -36,10 +36,6 @@ export interface AvatarProps {
    * The URL of the user's photo. Expects a square (1:1) photo
    */
   url?: string;
-  /**
-   * An onClick function to pass to the underlying `<button>` element.
-   */
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   /**
    * An objectFit property that can customize how to resize your image to fit its container.
    * @default "contain"
@@ -62,8 +58,8 @@ export const avatarStencil = createStencil({
     overflow: 'hidden',
     cursor: 'default',
     borderRadius: system.shape.round,
-    width: cssVar(size),
-    height: cssVar(size),
+    width: size,
+    height: size,
     '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
       outline: 'none',
       ...focusRing({separation: 2}),
@@ -147,34 +143,54 @@ export const avatarStencil = createStencil({
     },
     objectFit: {
       contain: {
-        objectFit: 'contain',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'contain',
+        },
       },
       fill: {
-        objectFit: 'fill',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'fill',
+        },
       },
       cover: {
-        objectFit: 'cover',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'cover',
+        },
       },
       ['scale-down']: {
-        objectFit: 'scale-down',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'scale-down',
+        },
       },
       none: {
-        objectFit: 'none',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'none',
+        },
       },
       ['-moz-initial']: {
-        objectFit: '-moz-initial',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: '-moz-initial',
+        },
       },
       ['initial']: {
-        objectFit: 'initial',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'initial',
+        },
       },
       ['inherit']: {
-        objectFit: 'inherit',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'inherit',
+        },
       },
       ['revert']: {
-        objectFit: 'revert',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'revert',
+        },
       },
       ['unset']: {
-        objectFit: 'unset',
+        ['& [data-slot="avatar-image"]']: {
+          objectFit: 'unset',
+        },
       },
     },
     isImageLoaded: {
@@ -207,7 +223,7 @@ export const avatarStencil = createStencil({
 export const Avatar = createComponent('button')({
   displayName: 'Avatar',
   Component: (
-    {variant, size, altText = 'Avatar', url, onClick, objectFit, ...elemProps}: AvatarProps,
+    {variant, size, altText = 'Avatar', url, objectFit, ...elemProps}: AvatarProps,
     ref,
     Element
   ) => {
diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index b3ef198443..e5cf630fe8 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -6,13 +6,13 @@ import {LazyLoad} from '../avatar/examples/LazyLoad';
 import {ObjectFit} from '../avatar/examples/ObjectFit';
 import {Size} from '../avatar/examples/Size';
 import {Variant} from '../avatar/examples/Variant';
-import {DynamicBackground} from '../avatar/examples/DynamicBackground';
+import {CustomStyles} from '../avatar/examples/CustomStyles';
 
-<Meta title="Components/Avatar" />
+<Meta title="Components/Indicators/Avatar" />
 
 # Canvas Kit Avatar
 
-A component showing a user's photo with a circular crop.
+Represents a person's profile.
 
 [> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
 
@@ -45,7 +45,7 @@ by including `variant="dark"`.
 
 ### Size
 
-Avatar defaults to using a "medium" `size` property. You can change the `size` prop to various
+Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
 sizing options. See Component API for more details.
 
 Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
@@ -61,7 +61,7 @@ Avatar will convert to an image avatar when the `url` prop is included with acce
 ### Object Fit
 
 Avatar defaults to using `contain` for object-fit. You can change this property to any other
-acceptable object-fit properties.
+acceptable `object-fit` properties.
 
 <ExampleCodeBlock code={ObjectFit} />
 
@@ -71,11 +71,11 @@ Example of implementing lazy load behavior with Avatar.
 
 <ExampleCodeBlock code={LazyLoad} />
 
-### Dynamic Color
+### Custom Styling
 
-To change the background color of the Avatar, you can use our createStencil functionality.
+To change the background color of the Avatar, you can use our `createStencil` functionality.
 
-<ExampleCodeBlock code={DynamicBackground} />
+<ExampleCodeBlock code={CustomStyles} />
 
 ## Component API
 
diff --git a/modules/react/avatar/stories/avatar/examples/Button.tsx b/modules/react/avatar/stories/avatar/examples/Button.tsx
index 6f29af77aa..9a555a5bb0 100644
--- a/modules/react/avatar/stories/avatar/examples/Button.tsx
+++ b/modules/react/avatar/stories/avatar/examples/Button.tsx
@@ -1,14 +1,21 @@
 import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 // @ts-ignore: Cannot find module error
 import testAvatar from '../../test-avatar.png';
 
 const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
 
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
 export const Button = () => (
-  <div className="story">
-    <Avatar size="extraLarge" variant="dark" onClick={handleAvatarButtonClick} />
-    <Avatar size="extraLarge" onClick={handleAvatarButtonClick} />
-    <Avatar size="extraLarge" url={testAvatar} onClick={handleAvatarButtonClick} />
+  <div className={containerStyles}>
+    <Avatar variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
   </div>
 );
diff --git a/modules/react/avatar/stories/avatar/examples/DynamicBackground.tsx b/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx
similarity index 58%
rename from modules/react/avatar/stories/avatar/examples/DynamicBackground.tsx
rename to modules/react/avatar/stories/avatar/examples/CustomStyles.tsx
index 53046aa4fd..59c72837dd 100644
--- a/modules/react/avatar/stories/avatar/examples/DynamicBackground.tsx
+++ b/modules/react/avatar/stories/avatar/examples/CustomStyles.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 import {systemIconStencil} from '../../../../icon';
 
 const customBlueAvatarStencil = createStencil({
@@ -22,9 +22,14 @@ const customGreenAvatarStencil = createStencil({
   },
 });
 
-export const DynamicBackground = () => (
-  <div className="story">
-    <Avatar as="div" size="extraLarge" {...customBlueAvatarStencil()} />
-    <Avatar as="div" size="extraLarge" {...customGreenAvatarStencil()} />
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export const CustomStyles = () => (
+  <div className={containerStyles}>
+    <Avatar as="div" {...customBlueAvatarStencil()} />
+    <Avatar as="div" {...customGreenAvatarStencil()} />
   </div>
 );
diff --git a/modules/react/avatar/stories/avatar/examples/Image.tsx b/modules/react/avatar/stories/avatar/examples/Image.tsx
index 7390851afd..2bfc51d6ee 100644
--- a/modules/react/avatar/stories/avatar/examples/Image.tsx
+++ b/modules/react/avatar/stories/avatar/examples/Image.tsx
@@ -2,9 +2,17 @@ import React from 'react';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 // @ts-ignore: Cannot find module error
 import testAvatar from '../../test-avatar.png';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x2,
+});
 
 export const Image = () => (
-  <div className="story">
+  <div className={containerStyles}>
     <h3>Working Images</h3>
     <Avatar size="extraExtraLarge" as="div" url={testAvatar} />
     <Avatar size="extraLarge" as="div" url={testAvatar} />
diff --git a/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx b/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
index 415bb7c52b..a80e46a07c 100644
--- a/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
+++ b/modules/react/avatar/stories/avatar/examples/LazyLoad.tsx
@@ -7,7 +7,7 @@ export const LazyLoad = () => (
   <div className="story">
     {Array.from({length: 5}, (v, index) => (
       <>
-        <Avatar as="div" size="medium" url={testAvatar + '?v=' + index} />
+        <Avatar key={index} as="div" size="medium" url={testAvatar + '?v=' + index} />
         <br />
       </>
     ))}
diff --git a/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
index 263a5e163f..18cae8fead 100644
--- a/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
+++ b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
@@ -5,9 +5,15 @@ import {px2rem} from '@workday/canvas-kit-styling';
 export const ObjectFit = () => (
   <div className="story">
     <h3>Original Rectangle Image</h3>
-    <img alt="" src="https://placehold.co/450x200/png" />
+    <img
+      alt=""
+      src="https://loremflickr.com/cache/resized/65535_53325191273_373deb18ee_n_320_200_nofilter.jpg?lock=1"
+    />
     <h3>Object fit on a Rectangle Image</h3>
-    <Avatar as="div" url="https://placehold.co/450x200/png" objectFit="contain" />
+    <Avatar
+      as="div"
+      url="https://loremflickr.com/cache/resized/65535_53325191273_373deb18ee_n_320_200_nofilter.jpg?lock=1"
+    />
     <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
     <Avatar
       as="div"

From 178811002ed124a365f029767602100d7cb7a6e2 Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Mon, 29 Jul 2024 16:38:21 -0600
Subject: [PATCH 21/31] fix: Clean up examples

---
 modules/react/avatar/lib/Avatar.tsx           | 20 +++++++++----------
 .../avatar/stories/avatar/Avatar.stories.mdx  |  8 ++++++++
 .../avatar/stories/avatar/examples/Basic.tsx  | 18 +++++++++++++++++
 3 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 modules/react/avatar/stories/avatar/examples/Basic.tsx

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 1a4953a536..361d251f38 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -11,29 +11,29 @@ import {system} from '@workday/canvas-tokens-web';
 
 export interface AvatarProps {
   /**
-   * The variant of the avatar if using a default image. Accepts "light" or "dark."
+   * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
    * @default "light"
    */
   variant?: 'light' | 'dark';
   /**
    * The size of the Avatar.
+   * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
+   * - `extraLarge`: 4.5rem x 4.5 (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?:
-    | 'extraSmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'extraLarge'
-    | 'extraExtraLarge'
-    | (string & {});
+  size?: /** size of small */
+  'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
   /**
    * The alt text of the Avatar image. This prop is also used for the aria-label.
    * @default Avatar
    */
   altText?: string;
   /**
-   * The URL of the user's photo. Expects a square (1:1) photo
+   * The URL of the user's photo. For best fit, use square images.
    */
   url?: string;
   /**
diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index e5cf630fe8..ef4a201894 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -1,5 +1,6 @@
 import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
 
+import {Basic} from '../avatar/examples/Basic';
 import {Button} from '../avatar/examples/Button';
 import {Image} from '../avatar/examples/Image';
 import {LazyLoad} from '../avatar/examples/LazyLoad';
@@ -28,6 +29,13 @@ yarn add @workday/canvas-kit-react
 
 The example below shows multiple instances of a `Avatar` with various configurations.
 
+### Basic
+
+By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
+the `as` prop.
+
+<ExampleCodeBlock code={Basic} />
+
 ### Button
 
 Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
diff --git a/modules/react/avatar/stories/avatar/examples/Basic.tsx b/modules/react/avatar/stories/avatar/examples/Basic.tsx
new file mode 100644
index 0000000000..2069694ed9
--- /dev/null
+++ b/modules/react/avatar/stories/avatar/examples/Basic.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export const Basic = () => (
+  <div className={containerStyles}>
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar as="div" />
+  </div>
+);

From a5571f9214a6481c8c5595a6128d91eac7e2ce3a Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Tue, 30 Jul 2024 13:58:34 -0600
Subject: [PATCH 22/31] test: Update selector in test

---
 modules/react/avatar/spec/Avatar.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/spec/Avatar.spec.tsx b/modules/react/avatar/spec/Avatar.spec.tsx
index 9017bd0585..4195453d5b 100644
--- a/modules/react/avatar/spec/Avatar.spec.tsx
+++ b/modules/react/avatar/spec/Avatar.spec.tsx
@@ -73,7 +73,7 @@ describe('Avatar', () => {
 
   it('should set the object fit of the image when objectFit prop is specified', () => {
     const {container} = render(<Avatar url="https://example.com/image.png" objectFit="cover" />);
-    expect(container.firstChild).toHaveStyle('object-fit: cover');
+    expect(container.querySelector('[data-slot="avatar-image"]')).toHaveStyle('object-fit: cover');
   });
 
   it('should hide the icon when the image is loaded', () => {

From 9dcfa13c93e9acf73d6bd8d5d138726a648dc9aa Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Wed, 31 Jul 2024 09:07:07 -0600
Subject: [PATCH 23/31] test: Update test to go to correct story

---
 cypress/integration/Avatar.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/Avatar.spec.ts b/cypress/integration/Avatar.spec.ts
index fd15abe0b6..787a353e15 100644
--- a/cypress/integration/Avatar.spec.ts
+++ b/cypress/integration/Avatar.spec.ts
@@ -5,9 +5,9 @@ describe('Avatar', () => {
     h.stories.visit();
   });
 
-  context('given default avatar light is rendered', () => {
+  context('given default avatar is rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components/Indicators/Avatar/Default', 'Light');
+      h.stories.load('Components/Indicators/Avatar', 'Basic');
     });
 
     it('should not have any axe errors', () => {
@@ -17,7 +17,7 @@ describe('Avatar', () => {
 
   context('given avatar button light is rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components/Indicators/Avatar Button/Default', 'Light');
+      h.stories.load('Components/Indicators/Avatar', 'Button');
     });
 
     it('should not have any axe errors', () => {
@@ -27,7 +27,7 @@ describe('Avatar', () => {
 
   context('given avatar button image is rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components/Indicators/Avatar/Avatar Button', 'Image');
+      h.stories.load('Components/Indicators/Avatar/Avatar', 'Image');
     });
 
     it('should not have any axe errors', () => {

From 3877318f54a7ea590a563aef71c78986b41d311e Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Thu, 1 Aug 2024 10:25:41 -0600
Subject: [PATCH 24/31] docs: Add info to upgrade guide for avatar

---
 modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
index ba636a7f20..37ebc92973 100644
--- a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
@@ -45,9 +45,8 @@ A note to the reader:
   - [Select (Preview)](#select-preview)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Avatar](#avatar)
   - [Text Area](#text-area)
-- [Style Utility Updates](#style-utility-updates)
-  - [createStencil](#createstencil)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -96,7 +95,8 @@ from Main instead.
 ### Styling API and CSS Tokens
 
 **PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825),
-[#2795](https://github.com/Workday/canvas-kit/pull/2795)
+[#2795](https://github.com/Workday/canvas-kit/pull/2795),
+[#2793](https://github.com/Workday/canvas-kit/pull/2793)
 
 Several components have been refactored to use our new
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
@@ -105,6 +105,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 
 The following components are affected:
 
+- `Avatar`
 - `Dialog`
 - `Modal`
 - `Popup`
@@ -116,6 +117,15 @@ The following components are affected:
 > with `cs` in our
 > [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
 
+### Avatar
+
+- Avatar no longer uses `SystemIconCircle` for sizing.
+- `Avatar.Size` is no longer supported. The `size` prop type has change to accept the following:
+  `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})`
+- `Avatar.Variant` is no longer supported. Enum `AvatarVariant` has been removed. The `variant` type
+  prop now accepts `"dark" | "light"`
+- The `as` prop now accepts any element, not just `div`.
+
 ### Text Area
 
 **PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)

From a23e1a8d9e357a8f0b30afcec0830567669d99c3 Mon Sep 17 00:00:00 2001
From: Krissy Conant <33133887+kaconant@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:28:31 -0400
Subject: [PATCH 25/31] Update modules/react/avatar/README.md

Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
---
 modules/react/avatar/README.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/modules/react/avatar/README.md b/modules/react/avatar/README.md
index 0899a48c48..17674166d2 100644
--- a/modules/react/avatar/README.md
+++ b/modules/react/avatar/README.md
@@ -58,9 +58,6 @@ Default: "medium"
 
 ---
 
-#### `onClick: (e: React.MouseEvent<HTMLButtonElement>) => void`
-
-> An onClick function to pass to the underlying `<button>` element.
 
 ---
 

From a56df73c4d1e89049b0f4f696786ec593dabd85d Mon Sep 17 00:00:00 2001
From: Krissy Conant <33133887+kaconant@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:28:41 -0400
Subject: [PATCH 26/31] Update
 modules/react/avatar/stories/avatar/Avatar.stories.mdx

Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
---
 modules/react/avatar/stories/avatar/Avatar.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index ef4a201894..916d25547c 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -46,7 +46,7 @@ Generally, `<button>` elements should be used for actions.
 
 ### Variant
 
-Avatar defaults to using a "light" `variant` property. You can change the `variant` prop to "dark"
+Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
 by including `variant="dark"`.
 
 <ExampleCodeBlock code={Variant} />

From 76834139fb67e84c9a079d5b97a80eb6e6a0f4da Mon Sep 17 00:00:00 2001
From: Krissy Conant <33133887+kaconant@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:28:55 -0400
Subject: [PATCH 27/31] Update
 modules/react/avatar/stories/avatar/Avatar.stories.mdx

Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
---
 modules/react/avatar/stories/avatar/Avatar.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index 916d25547c..1cfe2ac8bb 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -69,7 +69,7 @@ Avatar will convert to an image avatar when the `url` prop is included with acce
 ### Object Fit
 
 Avatar defaults to using `contain` for object-fit. You can change this property to any other
-acceptable `object-fit` properties.
+acceptable `object-fit` properties. For best fit, try to use square images.
 
 <ExampleCodeBlock code={ObjectFit} />
 

From 12ffabf74152436bd992a85f13c9a5e756a2fadd Mon Sep 17 00:00:00 2001
From: Krissy Conant <33133887+kaconant@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:29:23 -0400
Subject: [PATCH 28/31] Update
 modules/react/avatar/stories/avatar/Avatar.stories.mdx

Co-authored-by: Manuel Carrera <mannycarrera4@users.noreply.github.com>
---
 modules/react/avatar/stories/avatar/Avatar.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index 1cfe2ac8bb..c229d5cdd7 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -39,7 +39,7 @@ the `as` prop.
 ### Button
 
 Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
-semantic element to a `<div>`. This should be done with caution to ensure the best accessibility.
+semantic element to a `div`. This should be done with caution to ensure the best accessibility.
 Generally, `<button>` elements should be used for actions.
 
 <ExampleCodeBlock code={Button} />

From 54d4c68157fa81637f108d7358b81ce12528ce50 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Tue, 6 Aug 2024 11:32:52 -0400
Subject: [PATCH 29/31] chore: update story for image

---
 modules/react/avatar/stories/avatar/Avatar.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/stories/avatar/Avatar.stories.mdx b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
index c229d5cdd7..9fe4a0d514 100644
--- a/modules/react/avatar/stories/avatar/Avatar.stories.mdx
+++ b/modules/react/avatar/stories/avatar/Avatar.stories.mdx
@@ -62,7 +62,7 @@ Additionally, you can explicitly specify the size you want for the Avatar in pix
 
 ### Image
 
-Avatar will convert to an image avatar when the `url` prop is included with acceptable url.
+Avatar renders an image when the `url` prop is defined.
 
 <ExampleCodeBlock code={Image} />
 

From e41df0cfa5abc2c6650bb5118ca700a174949bb3 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 7 Aug 2024 11:23:52 -0400
Subject: [PATCH 30/31] fix: updated links for objectfit

---
 .../stories/avatar/examples/ObjectFit.tsx      | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
index 18cae8fead..0b6f504782 100644
--- a/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
+++ b/modules/react/avatar/stories/avatar/examples/ObjectFit.tsx
@@ -5,27 +5,21 @@ import {px2rem} from '@workday/canvas-kit-styling';
 export const ObjectFit = () => (
   <div className="story">
     <h3>Original Rectangle Image</h3>
-    <img
-      alt=""
-      src="https://loremflickr.com/cache/resized/65535_53325191273_373deb18ee_n_320_200_nofilter.jpg?lock=1"
-    />
+    <img alt="" src="https://picsum.photos/id/237/300/200" />
     <h3>Object fit on a Rectangle Image</h3>
-    <Avatar
-      as="div"
-      url="https://loremflickr.com/cache/resized/65535_53325191273_373deb18ee_n_320_200_nofilter.jpg?lock=1"
-    />
+    <Avatar as="div" url="https://picsum.photos/id/237/300/200" />
     <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
     <Avatar
       as="div"
       size={px2rem(200)}
-      url="https://placehold.co/450x200/png"
+      url="https://picsum.photos/id/237/300/200"
       objectFit="contain"
     />
     <h3>Original Square Image</h3>
-    <img alt="" src="https://placehold.co/450x450/png" />
+    <img alt="" src="https://picsum.photos/id/237/300/300" />
     <h3>Object fit on a Square Image</h3>
-    <Avatar as="div" url="https://placehold.co/450x450/png" />
+    <Avatar as="div" url="https://picsum.photos/id/237/300/300" />
     <h3>Object fit on a Square Image using Dynamic Size</h3>
-    <Avatar as="div" size={px2rem(200)} url="https://placehold.co/450x450/png" />
+    <Avatar as="div" size={px2rem(200)} url="https://picsum.photos/id/237/300/300" />
   </div>
 );

From e116f278dcb7e147cabbc136d54107745c0ecf69 Mon Sep 17 00:00:00 2001
From: "krissy.conant" <krissy.conant@workday.com>
Date: Wed, 7 Aug 2024 11:28:21 -0400
Subject: [PATCH 31/31] fix: missing word in avatar interface

---
 modules/react/avatar/lib/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/avatar/lib/Avatar.tsx b/modules/react/avatar/lib/Avatar.tsx
index 361d251f38..4ed96e0502 100644
--- a/modules/react/avatar/lib/Avatar.tsx
+++ b/modules/react/avatar/lib/Avatar.tsx
@@ -18,7 +18,7 @@ export interface AvatarProps {
   /**
    * The size of the Avatar.
    * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
-   * - `extraLarge`: 4.5rem x 4.5 (64px x 64px)
+   * - `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)