@workday/canvas-kit-mcp 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0077-next.0

package/dist/lib/upgrade-guides/15.0-UPGRADE-GUIDE.md

@@ -17,6 +17,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Promotions](#component-promotions)
+  - [Avatar](#avatar-)
   - [Pill](#pill-)
   - [Segmented Control](#segmented-control-)
   - [Information Highlight](#information-highlight-)
@@ -30,6 +31,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
 - [Removals](#removals)
+  - [Avatar (Deprecated)](#avatar-deprecated)
   - [Segmented Control (Deprecated)](#segmented-control-deprecated)
   - [Select (Deprecated)](#select-deprecated)
   - [Search Form (Labs)](#search-form-labs)
@@ -103,6 +105,121 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Promotions
 
+### Avatar ⚡️
+
+**PR:** [](https://github.com/Workday/canvas-kit/issues/3659)
+
+We've promoted `Avatar` from [Preview](#preview) to [Main](#main). This replaces the deprecated `Avatar` that was previously in Main.
+
+**Before in v14**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+```
+
+**After in v15**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+```
+
+> 🤖 The codemod will handle the change of imports as shown above.
+
+#### API Differences
+
+The new `Avatar` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+with a different API than the deprecated version.
+
+##### Structure Changes
+
+| Deprecated (Old Main) | New (Promoted from Preview)         |
+| --------------------- | ----------------------------------- |
+| `Avatar`              | `Avatar`                            |
+| -                     | `BaseAvatar`                        |
+| -                     | `BaseAvatar.Image` / `AvatarImage`  |
+| -                     | `BaseAvatar.Name` / `AvatarName`    |
+
+##### Prop Changes
+
+| Feature              | Deprecated (Old Main)                      | New (Promoted from Preview)                      |
+| -------------------- | ------------------------------------------ | ------------------------------------------------ |
+| Variant              | `variant` (`light`, `dark`)                | `variant` (`blue`, `amber`, `teal`, `purple`)    |
+| Size                 | `size` (extraSmall=16px to extraExtraLarge=120px) | `size` (extraExtraSmall=24px to extraExtraLarge=120px) |
+| User identifier      | `altText` prop                             | `name` prop                                      |
+| Custom initials      | Not supported                              | `preferredInitials` prop                         |
+| Decorative mode      | Not supported                              | `isDecorative` prop                              |
+| Image URL            | `url` prop                                 | `url` prop                                       |
+| Object fit           | `objectFit` prop                           | `objectFit` prop                                 |
+| Initials display     | Not supported (shows user icon)            | Shows initials from `name` when no image         |
+
+##### Size Mapping
+
+| Size Name        | Deprecated (Old Main) | New (Promoted from Preview) |
+| ---------------- | --------------------- | --------------------------- |
+| extraExtraSmall  | -                     | 24px                        |
+| extraSmall       | 16px                  | 32px                        |
+| small            | 24px                  | 40px                        |
+| medium           | 32px                  | 48px                        |
+| large            | 40px                  | 72px                        |
+| extraLarge       | 64px                  | 96px                        |
+| extraExtraLarge  | 120px                 | 120px                       |
+
+##### Code Migration
+
+**Deprecated API (Old Main)**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+<Avatar
+  size="medium"
+  variant="light"
+  url="https://example.com/photo.jpg"
+  altText="John Doe"
+/>
+```
+
+**New API (v15)**
+
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+<Avatar
+  size="medium"
+  variant="blue"
+  url="https://example.com/photo.jpg"
+  name="John Doe"
+/>
+```
+
+##### New Features
+
+The promoted `Avatar` includes several new features:
+
+- **Initials display**: Automatically shows initials from the `name` prop when no image URL is provided
+- **Color variants**: Four color variants (`blue`, `amber`, `teal`, `purple`) instead of light/dark
+- **Custom initials**: Use `preferredInitials` for full control over displayed initials
+- **Decorative mode**: Use `isDecorative` when Avatar is purely decorative (rendered next to a name)
+- **Compound components**: Build custom avatars using `BaseAvatar`, `BaseAvatar.Image`, and `BaseAvatar.Name`
+- **Utility function**: Use `getInitialsFromName` to extract initials from a name string
+
+```tsx
+// With initials (no image)
+<Avatar name="John Doe" variant="blue" />
+
+// Custom initials
+<Avatar name="John Doe" preferredInitials="JD" />
+
+// Decorative (next to text name)
+<Avatar name="John Doe" url="..." isDecorative />
+
+// Using compound components for custom layouts
+<BaseAvatar variant="teal" size="large">
+  <BaseAvatar.Image src="..." alt="John Doe" />
+  <BaseAvatar.Name name="John Doe" />
+</BaseAvatar>
+```
+
 ### Pill ⚡️
 
 **PR** [#3634](https://github.com/Workday/canvas-kit/pull/3634)
@@ -261,6 +378,16 @@ tokens. These changes are **only visual**.
 
 ## Removals
 
+### Avatar (Deprecated)
+
+The deprecated `Avatar` that was previously in `@workday/canvas-kit-react/avatar`
+has been removed. This was the older implementation that showed a user icon placeholder
+and supported `light`/`dark` variants.
+
+Please migrate to the new `Avatar` component (promoted from Preview) which uses initials
+display, color variants (`blue`, `amber`, `teal`, `purple`), and supports compound components.
+See the [API Differences](#api-differences) section above for migration guidance.
+
 ### Segmented Control (Deprecated)
 
 The deprecated `SegmentedControl` that was previously in `@workday/canvas-kit-react/segmented-control`
@@ -492,6 +619,7 @@ yarn remove @workday/canvas-kit-codemod
 
 The following automated transformations are available for upgrading to v15:
 
+- **Promote Avatar**: promoteAvatar
 - **Promote Information Highlight**: promoteInformationHighlight
 - **Promote Pill**: promotePill
 - **Promote Segmented Control**: promoteSegmentedControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-mcp",
-  "version": "15.0.0-alpha.0076-next.0",
+  "version": "15.0.0-alpha.0077-next.0",
   "description": "MCP package for Canvas Kit",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,5 +53,5 @@
     "tsx": "^4.7.0",
     "typescript": "5.0"
   },
-  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
+  "gitHead": "6944d028b6f1250481ad8c4f8d5f817bea4e01a1"
 }