chore!: Update Avatar to use createStencil and createComponent (#2793)

Fixes: [#1738](#1738) Refactored Avatar to use our new styling utilities and tokens. Also updated documentation to use MDX. [category:Components] Release Note: The Avatar component has been refactored to use our new tokens and styling utilities. The changes below highlight the breaking changes to the API. ### BREAKING CHANGES - 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`. Co-authored-by: krissy.conant <[email protected]> Co-authored-by: @mannycarrera4 <[email protected]> Co-authored-by: manuel.carrera <[email protected]>
Workday · Aug 7, 2024 · 3b7726a · 3b7726a
1 parent 06cee23
commit 3b7726a
Show file tree

Hide file tree

Showing 20 changed files with 603 additions and 413 deletions.
diff --git 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', () => {

diff --git 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)

diff --git 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="medium" {...elemProps} />;
   },
 });
diff --git 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={18}
+      size={px2rem(18)}
+      as={Element}
       altText={undefined}
       {...elemProps}
-      disabled={model.state.disabled}
-    >
-      {elemProps.children}
-    </Avatar>
+    ></Avatar>
   );
 });
diff --git 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
@@ -8,48 +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={Avatar.Size.xs}
-  variant={Avatar.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
 
 ### Required
@@ -58,39 +16,39 @@ 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 |
 
 ---
 
-#### `size: SystemIconCircleSize | number`
+#### `size: "extraSmall" | "small" | "medium" | "large" | "extraLarge" | "extraExtraLarge" | (string & {})`
 
-> The diameter of the avatar in pixels
+> The diameter of the avatar in pixels. Can be given custom size as a string in either px or rem.
 
-Default: `Avatar.Size.m`
+Default: "medium"
 
-| Name  | Size (px) |
-| ----- | --------- |
-| `xs`  | 16        |
-| `s`   | 24        |
-| `m`   | 32        |
-| `l`   | 40        |
-| `xl`  | 64        |
-| `xxl` | 120       |
+| Name              | Size (px) |
+| ----------------- | --------- |
+| "extraSmall"      | 16        |
+| "small"           | 24        |
+| "medium"          | 32        |
+| "large"           | 40        |
+| "extraLarge"      | 64        |
+| "extraExtraLarge" | 120       |
 
 ---
 
 #### `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.
 
 ---
 
@@ -100,6 +58,15 @@ Default: `Avatar.Size.m`
 
 ---
 
+
+---
+
+#### `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.
+
+---
+
 #### `ref: React.Ref<HTMLButtonElement>`
 
 > A ref to the underlying `<button>` or `<div>` element.