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

package/dist/lib/theming.md

@@ -23,9 +23,12 @@ developer experience, and greater flexibility for theming applications.
 > If your application renders within an environment that already imports these CSS variables, \*\*do
 > not re-
 
-<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}> <App /> </CanvasProvider>;
-
-````
+```tsx
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+  {' '}
+  <App />{' '}
+</CanvasProvider>
+```
 
 This would use `chroma.js` to generate a palette based on the `main` color provided.
 
@@ -57,7 +60,7 @@ precedence. Take the following example:
 .my-app {
   --cnvs-brand-primary-base: red;
 }
-````
+```
 
 In the case of the `CanvasProvider` prior to v14, all our brand tokens where defined within a class
 and scoped to the `div` that the `CanvasProvider` created. This meant that anything set on `:root`

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

@@ -18,65 +18,49 @@ visual reference of what's changed.**
 
 ## Table of Contents
 
-- [Canvas Kit 14.0 Upgrade Guide](#canvas-kit-140-upgrade-guide)
-  - [Why You Should Upgrade](#why-you-should-upgrade)
-  - [Table of Contents](#table-of-contents)
-  - [LLM Assisted Migration ](#llm-assisted-migration-)
-  - [Codemod](#codemod)
-    - [Instructions](#instructions)
+- [LLM Assisted Migration](#llm-assisted-migration)
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [Tokens](#tokens)
+- [Caution Naming](#caution-naming)
+- [Theming](#theming)
+  - [New Documentation](#new-documentation)
+  - [Canvas Provider](#canvas-provider-)
+- [Component Updates](#component-updates)
+  - [Avatar (Preview)](#avatar-preview)
+  - [Branding Changes](#branding-changes-)
+  - [Buttons](#buttons)
+  - [Card](#card-)
+  - [Count Badge](#count-badge)
+  - [Expandable](#expandable)
+  - [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
+  - [Loading Dots](#loading-dots)
+  - [Modals and Dialogs](#modals-and-dialogs)
+  - [Pill (Preview)](#pill-preview)
+  - [Search Form (Labs)](#search-form-labs-)
+  - [Status Indicator (Preview)](#status-indicator-preview-)
+  - [Icons](#icons)
+- [Deprecations](#deprecations)
+  - [Avatar (Main)](#avatar-in-main)
+  - [Combobox (Labs)](#combobox-labs)
+  - [Radio (Main)](#radio-main)
+  - [Search Form (Labs)](#searchform-labs)
+  - [Segmented Control (Main)](#segmented-control-main)
+  - [Side Panel (Main)](#side-panel-main)
   - [Tokens](#tokens)
-  - [Caution Naming](#caution-naming)
-  - [Theming](#theming)
-    - [New Documentation](#new-documentation)
-    - [Canvas Provider 🚨](#canvas-provider-)
-      - [Breaking Changes](#breaking-changes)
-    - [useIsRTL](#useisrtl)
-  - [Component Updates](#component-updates)
-    - [Avatar (Preview)](#avatar-preview)
-      - [API Changes from Avatar (Main)](#api-changes-from-avatar-main)
-    - [Branding Changes 💅](#branding-changes-)
-    - [Buttons](#buttons)
-      - [Tertiary Button 🚨](#tertiary-button-)
-    - [Card 🚨](#card-)
-      - [Removed Box Shadow](#removed-box-shadow)
-      - [New Card Variants](#new-card-variants)
-      - [Replaced Margins with Gap](#replaced-margins-with-gap)
-    - [Count Badge](#count-badge)
-    - [Expandable](#expandable)
-    - [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
-    - [Loading Dots](#loading-dots)
-    - [Pill (Preview)](#pill-preview)
-    - [Modals and Dialogs](#modals-and-dialogs)
-      - [Scoped Theming vs Global Theming](#scoped-theming-vs-global-theming)
-    - [Search Form (Labs) 🚨](#search-form-labs-)
-    - [Status Indicator (Preview) 🚨](#status-indicator-preview-)
-    - [Icons](#icons)
-  - [Deprecations](#deprecations)
-    - [Avatar in Main](#avatar-in-main)
-    - [Combobox (Labs)](#combobox-labs)
-    - [Radio (Main)](#radio-main)
-    - [SearchForm (Labs)](#searchform-labs)
-    - [Segmented Control (Main)](#segmented-control-main)
-    - [Side Panel (Main)](#side-panel-main)
-    - [Tokens](#tokens-1)
-  - [Removals](#removals)
-    - [Deprecated Buttons](#deprecated-buttons)
-    - [Input Provider](#input-provider)
-    - [Menu (Preview)](#menu-preview)
-    - [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
-    - [Text Area (Preview)](#text-area-preview)
-    - [Text Input (Preview)](#text-input-preview)
-  - [Troubleshooting](#troubleshooting)
-    - [Common Issues](#common-issues)
-  - [Glossary](#glossary)
-    - [Main](#main)
-    - [Preview](#preview)
-    - [Labs](#labs)
-  - [Codemod Reference](#codemod-reference)
-- [What is a Codemod?](#what-is-a-codemod)
-  - [Running a Codemod](#running-a-codemod)
-    - [Instructions](#instructions-1)
-  - [Codemod Transformations for v14](#codemod-transformations-for-v14)
+  - [useIsRTL](#useisrtl)
+- [Removals](#removals)
+  - [Deprecated Buttons](#deprecated-buttons)
+  - [Input Provider](#input-provider)
+  - [Menu (Preview)](#menu-preview)
+  - [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
+  - [Text Area (Labs)](#text-area)
+  - [Text Input (Labs)](#text-input)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
 
 ## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
 
@@ -344,7 +328,7 @@ specificity.
 
 ### useIsRTL
 
-**PR:** [#3480](https://github.com/Workday/canvas-kit/pull/3477)
+**PR:** [#3477](https://github.com/Workday/canvas-kit/pull/3477)
 
 The `useIsRTL` hook has been deprecated. Please use
 [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
@@ -919,7 +903,7 @@ replaced the removed component or utility.
 
 ### Deprecated Buttons
 
-**PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
+**PR:** [#3439](https://github.com/Workday/canvas-kit/pull/3439)
 
 Long overdue, but a sign of moving forward, we've removed our `DeprecatedButton`. Our design system
 supported this for quite some time, but with the advancement in theming, our components API and our

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

@@ -17,6 +17,9 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Promotions](#component-promotions)
+  - [Pill](#pill-)
+  - [Segmented Control](#segmented-control-)
+  - [Information Highlight](#information-highlight-)
   - [Segmented Control ⚡️](#segmented-control-️)
     - [API Differences](#api-differences)
       - [Structure Changes](#structure-changes)
@@ -28,6 +31,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
   - [Buttons](#buttons)
 - [Removals](#removals)
   - [Segmented Control (Deprecated)](#segmented-control-deprecated)
+  - [Select (Deprecated)](#select-deprecated)
   - [Search Form (Labs)](#search-form-labs)
   - [Combobox (Labs)](#combobox-labs)
 - [Glossary](#glossary)
@@ -99,8 +103,32 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Promotions
 
+### Pill ⚡️
+
+**PR** [#3634](https://github.com/Workday/canvas-kit/pull/3634)
+
+We've promoted `Pill` 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**
+
+```tsx
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+```
+
+**After in v15**
+
+```tsx
+import {Pill} from '@workday/canvas-kit-react/pill';
+```
+
+> 🤖 The codemod will handle the change of imports as shown above.
+
 ### 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**
@@ -201,6 +229,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**
@@ -240,6 +270,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`.
@@ -301,7 +449,7 @@ things you'll want to keep in mind.
   dependencies on your own.
   - We recommend upgrading dependencies before running the codemod.
   - Always review your `package.json` files to make sure your dependency versions look correct.
-- The codemod will not handle every breaking change in v13. You will likely need to make some manual
+- The codemod will not handle every breaking change in this upgrade. You will likely need to make some manual
   changes to be compatible. Use our Upgrade Guide as a checklist.
 - Codemods are not bulletproof.
   - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
@@ -331,7 +479,7 @@ finished.
 
 ```sh
 yarn add @workday/canvas-kit-codemod --dev
-yarn canvas-kit-codemod v${canvasKitMajorVersion} [path]
+yarn canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
 yarn remove @workday/canvas-kit-codemod
 ```
 
@@ -345,6 +493,7 @@ yarn remove @workday/canvas-kit-codemod
 The following automated transformations are available for upgrading to v15:
 
 - **Promote Information Highlight**: promoteInformationHighlight
+- **Promote Pill**: promotePill
 - **Promote Segmented Control**: promoteSegmentedControl
 
 Run the codemod with: `npx @workday/canvas-kit-codemod v15 [path]`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-mcp",
-  "version": "15.0.0-alpha.0074-next.0",
+  "version": "15.0.0-alpha.0076-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": "3fbdd82f3f92e4c6aaebd87c84fcdcd6b39f87cc"
+  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
 }