@workday/canvas-kit-mcp 15.0.0-alpha.0075-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,7 +31,9 @@ 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)
   - [Combobox (Labs)](#combobox-labs)
 - [Glossary](#glossary)
@@ -102,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)
@@ -126,6 +244,8 @@ import {Pill} from '@workday/canvas-kit-react/pill';
 
 ### Segmented Control ⚡️
 
+**PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
+
 We've promoted `SegmentedControl` from [Preview](#preview) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
 
 **Before in v14**
@@ -226,6 +346,8 @@ The promoted `SegmentedControl` includes several new features:
 
 ### Information Highlight ⚡️
 
+**PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
+
 We've promoted `InformationHighlight` from [Preview](#preview) to [Main](#main). There are no changes to the functionality or styling of the component. The only change required is updating the import statement.
 
 **Before in v14**
@@ -256,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`
@@ -265,6 +397,124 @@ Please migrate to the new `SegmentedControl` component (promoted from Preview) w
 component pattern with `SegmentedControl.List` and `SegmentedControl.Item`. See the
 [API Differences](#api-differences) section above for migration guidance.
 
+### Select (Deprecated)
+
+**PR:** [#3658](https://github.com/Workday/canvas-kit/pull/3658)
+
+The `Select` component in `@workday/canvas-kit-preview-react/select` has been removed. Please use the
+`Select` component from `@workday/canvas-kit-react/select` instead.
+
+**Before in v14**
+
+```tsx
+import {Select} from '@workday/canvas-kit-preview-react/select';
+```
+
+**After in v15**
+
+```tsx
+import {Select} from '@workday/canvas-kit-react/select';
+```
+
+#### API Differences
+
+The Main `Select` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+built on top of the Combobox component with a composition-based API, whereas the Preview Select was a
+monolithic class-based component.
+
+##### Structure Changes
+
+| Preview (Removed)           | Main                                                          |
+| --------------------------- | ------------------------------------------------------------- |
+| `Select` (single component) | `Select` + `Select.Input` + `Select.Popper` + `Select.Card` + `Select.List` + `Select.Item` |
+
+##### Prop Changes
+
+| Feature          | Preview (Removed)                          | Main                                             |
+| ---------------- | ------------------------------------------ | ------------------------------------------------ |
+| Options          | `options` prop (array of Option objects)   | `items` prop (array of any type)                 |
+| Selected value   | `value` prop                               | Managed via model (`useSelectModel`)             |
+| Change handler   | `onChange={(e) => {}}`                     | `onChange` on `Select.Input`                     |
+| Error state      | `error={Select.ErrorType.Error}`           | `error="error"` or `error="caution"`             |
+| Custom rendering | `renderOption` / `renderSelected` props    | Composition via `Select.Item` children           |
+| Form integration | Manual                                     | Built-in with `FormField` wrapper                |
+| Accessibility    | Manual ARIA                                | Built-in via Combobox foundation                 |
+
+##### Code Migration
+
+**Preview API (Removed)**
+
+```tsx
+import {Select} from '@workday/canvas-kit-preview-react/select';
+
+const options = [
+  {label: 'Small', value: 'small'},
+  {label: 'Medium', value: 'medium'},
+  {label: 'Large', value: 'large'},
+];
+
+const [value, setValue] = React.useState('medium');
+
+<Select
+  options={options}
+  value={value}
+  onChange={e => setValue(e.target.value)}
+/>
+```
+
+**Main API (v15)**
+
+```tsx
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+const items = ['Small', 'Medium', 'Large'];
+
+<Select items={items}>
+  <FormField label="Size">
+    <Select.Input onChange={e => console.log('Selected:', e.target.value)} />
+    <Select.Popper>
+      <Select.Card>
+        <Select.List>
+          {item => <Select.Item>{item}</Select.Item>}
+        </Select.List>
+      </Select.Card>
+    </Select.Popper>
+  </FormField>
+</Select>
+```
+
+##### Main Select Features
+
+The Main `Select` includes features not available in the Preview version:
+
+- **Composition-based API**: Full control over structure with subcomponents
+- **FormField integration**: Built-in accessibility when wrapped with FormField
+- **Model-based state**: Use `useSelectModel` for advanced state management
+- **Virtualization support**: Enable for large lists via model config
+- **Icons in input**: Use `inputStartIcon` prop on `Select.Input`
+- **Icons in items**: Use `Select.Item.Icon` subcomponent
+
+```tsx
+// With icons
+<Select.Input inputStartIcon={myIcon} />
+
+// With item icons
+<Select.Item>
+  <Select.Item.Icon icon={starIcon} />
+  Favorite
+</Select.Item>
+
+// With model for controlled state
+const model = useSelectModel({
+  items: myItems,
+  onSelect: ({id}) => console.log('Selected:', id),
+});
+
+<Select model={model}>
+  ...
+</Select>
+```
 ### Search Form (Labs)
 
 The deprecated `SearchForm` component has been removed from `@workday/canvas-kit-labs-react`.
@@ -369,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.0075-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": "85c5dfa329d29263f96a49be74ef55f551990c7b"
+  "gitHead": "6944d028b6f1250481ad8c4f8d5f817bea4e01a1"
 }