@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/10.0-UPGRADE-GUIDE.mdx

@@ -255,12 +255,12 @@ the target and popup to `4px`.
 **PR:** [#2309](https://github.com/Workday/canvas-kit/pull/2309)
 
 We've converted `Select` into a
-[compound component](/getting-started/for-developers/resources/compound-components/) which provides
+[compound component](/get-started/for-developers/documentation/compound-components/) which provides
 a flexible API and access to its internals via its subcomponents.
 
 ```tsx
-import {Select} from '@workday/canvas-kit-react/select';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
 
 // v9
 <FormField label="Pizza Size">
@@ -273,8 +273,8 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
 ```
 
 ```tsx
-import {Select} from '@workday/canvas-kit-react/select';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
 
 // v10
 <Select items={['Small', 'Medium', 'Large']}>

package/dist/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -1,8 +1,8 @@
-import {Table} from '@workday/canvas-kit-react/table';
-import {base, brand, system} from '@workday/canvas-tokens-web';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {cssVar} from '@workday/canvas-kit-styling';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {Table} from '@workday/canvas-kit-react/table';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
 
 # Canvas Kit 13.0 Upgrade Guide
@@ -42,18 +42,18 @@ dependencies to a minimum version of `17.0.0`.
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
-	- [Styling API and CSS Tokens](#styling-api-and-canvas-tokens-)
-	- [Avatar](#avatar-)
-	- [Expandable](#expandable-)
-	- [External Hyperlink](#external-hyperlink-)
-	- [Form Field and Form Field Group](#form-field-and-form-field-group-)
-	- [Pill (Preview)](#pill-preview-)
-	- [SidePanel (Preview)](#side-panel-preview-)
-	- [Tabs](#tabs-)
+  - [Styling API and CSS Tokens](#styling-api-and-canvas-tokens-)
+  - [Avatar](#avatar-)
+  - [Expandable](#expandable-)
+  - [External Hyperlink](#external-hyperlink-)
+  - [Form Field and Form Field Group](#form-field-and-form-field-group-)
+  - [Pill (Preview)](#pill-preview-)
+  - [SidePanel (Preview)](#side-panel-preview-)
+  - [Tabs](#tabs-)
 - [Brand Refresh](#brand-refresh)
   - [Logo Updates](#logo-updates-)
 - [Infrastructure](#infrastructure)
-	- [Supporting react-jsx](#supporting-react-jsx-)
+  - [Supporting react-jsx](#supporting-react-jsx-)
 - [Troubleshooting](#troubleshooting)
 - [Contributors](#contributors)
 - [Glossary](#glossary)
@@ -111,7 +111,7 @@ The following components have been updated:
 
 - `ActionBar` [#3205](https://github.com/Workday/canvas-kit/pull/3205)
 - `Banner` [#3210](https://github.com/Workday/canvas-kit/pull/3210)
-- `Expandable` [#3128](https://github.com/Workday/canvas-kit/pull/3128	)
+- `Expandable` [#3128](https://github.com/Workday/canvas-kit/pull/3128)
 - `ExternalHyperlink` [#3101](https://github.com/Workday/canvas-kit/pull/3101)
 - `LoadingSparkles` [#3120](https://github.com/Workday/canvas-kit/pull/3120)
 - `Menu` [#3114](https://github.com/Workday/canvas-kit/pull/3114)
@@ -178,8 +178,9 @@ The following change has been made to `ExternalHyperlink` to ensure proper acces
 - The `iconLabel` prop no longer has a default value of `"Opens link in new window"`. This default
   phrase caused some to accidentally omit translations which caused translation issues.
 
-> **Note:** While the prop is not required, you _must_ provide an `iconLabel` for `<ExternalHyperlink />` to ensure proper
-> accessibility. Our examples have been updated to reflect this change.
+> **Note:** While the prop is not required, you _must_ provide an `iconLabel` for
+> `<ExternalHyperlink />` to ensure proper accessibility. Our examples have been updated to reflect
+> this change.
 
 **Before in v12**
 
@@ -226,7 +227,6 @@ dropped `horizontal` as a value, and it now requires an update.
 </FormField>
 ```
 
-
 ### Pill (Preview) 🚨
 
 **PR:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
@@ -295,8 +295,13 @@ import {Pill} from '@workday/canvas-kit-preview-react/pill';
 
 **PR:** [#3258](https://github.com/Workday/canvas-kit/pull/3258)
 
-When we supported IE 11 we needed to use  [CSS Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) to support animation events. Since we dropped support for IE11, we can now use [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) to animate the `width` of the `SidePanel` when it's expanding or collapsing.
-As part of this change, we also removed the `onAnimationStart` prop. Since moving to transitions, React doesn't support `onTransitionStart`, therefore the prop is no longer needed.
+When we supported IE 11 we needed to use
+[CSS Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+to support animation events. Since we dropped support for IE11, we can now use
+[CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)
+to animate the `width` of the `SidePanel` when it's expanding or collapsing. As part of this change,
+we also removed the `onAnimationStart` prop. Since moving to transitions, React doesn't support
+`onTransitionStart`, therefore the prop is no longer needed.
 
 ### Tabs 💅
 
@@ -403,6 +408,7 @@ Here's an example Babel config. Your configuration may vary based on your applic
 ## Contributors
 
 This release was made possible by the following contributors:
+
 - [@williamjstanton](https://github.com/williamjstanton)
 - [@NehaAhujaa](https://github.com/NehaAhujaa)
 - [@JaredMaione](https://github.com/JaredMaione)

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -1,4 +1,4 @@
-import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
+import {DownloadLLMFile, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
 
 
 # Canvas Kit 14.0 Upgrade Guide
@@ -38,6 +38,7 @@ visual reference of what's changed.**
   - [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-)
@@ -55,7 +56,7 @@ visual reference of what's changed.**
   - [Deprecated Buttons](#deprecated-buttons)
   - [Input Provider](#input-provider)
   - [Menu (Preview)](#menu-preview)
-  - [readyOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
+  - [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
   - [Text Area (Labs)](#text-area)
   - [Text Input (Labs)](#text-input)
 - [Troubleshooting](#troubleshooting)
@@ -82,7 +83,7 @@ input for LLMs to automate and assist with your migration process.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-canvas-kit-upgrade-guide-v14.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-canvas-kit-upgrade-guide-v14.txt"
   filename="llm-canvas-kit-upgrade-guide-v14.txt"
 />
 
@@ -170,7 +171,7 @@ Follow these guides to migrate:
 
 > 🤖 The `v14-tokens` codemod will automatically migrate your tokens, whether you're upgrading from
 > old tokens or from v2 to v3. Read
-> [the codemod instructions](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-codemod--docs)
+> [the codemod instructions](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-migration-codemod--docs)
 
 ## Caution Naming
 
@@ -332,7 +333,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)
@@ -629,7 +630,7 @@ provide a value for the `name` prop.
 The `Pill` component no longer supports `default` as a value for the `variant` prop. If the
 `variant` prop is not provided, the component will use its default styling.
 
-`readyOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
+`readOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
 instead.
 
 **Before in v13**
@@ -650,6 +651,51 @@ instead.
 </Pill>
 ```
 
+### Modals and Dialogs
+
+Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We
+attached those theme styles to that class name. This allowed the theme to be available in our
+Popups. But it also created a cascade barrier that blocked the global theme from being applied to
+our Popup components. Because we now use global CSS variables, we no longer need this class name to
+provide the global theme to Popups. But we have to remove this generated class name to allow the
+global theme to be applied to Popups. Instead, only the defined theme properties from the `theme` prop from the `CanvasProvider` will be applied to Popups and Modals.
+
+If you want to have scoped theming where a part of your application needs different theming, you can
+still do this via the `theme` prop.
+
+> **Note:** Only the properties of the theme object that are changed will be forward to popups and
+> modals. IE, if you change theme.palette.primary.main, only those tokens will change for popups and
+> modals.
+
+#### Scoped Theming vs Global Theming
+
+**Only** use the `theme` prop on the `CanvasProvider` if you intentionally want to theme part of
+your application that is different from global theming.
+
+**Scoped Theming**
+
+```tsx
+
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'teal'}}}}}>
+ {//part of your app to have different theme from the rest of your application}
+</CanvasProvider>
+```
+
+> **Important:** Use the `theme` prop on the `CanvasProvider` if you intentionally want to theme
+> part of your application that is different from global theming.
+
+**Global Theming**
+
+```tsx
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+
+<CanvasProvider>
+  <App />
+</CanvasProvider>;
+```
+
 ### Search Form (Labs) 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
@@ -796,6 +842,7 @@ import { Avatar } from '@workday/canvas-kit-react/avatar';
 
 ```tsx
 import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+
 // name is used as a fallback if the image url is broken or still loading
 // variant defines the color of the Avatar
 <Avatar name="John Doe" size="extraExtraLarge" variant="teal" url={yourImageUrl} />;
@@ -820,7 +867,7 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
 ### Combobox (Labs)
 
 The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated. Please
-migrate to the [Combobox](/get-started/for-developers/resources/combobox/) in
+migrate to the [Combobox](/get-started/for-developers/guides/combobox/) in
 `@workday/canvas-kit-react`.
 
 ### Radio (Main)
@@ -834,7 +881,7 @@ and API consistency.
 **PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
 
 The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated. Please migrate
-to the [Combobox](/get-started/for-developers/resources/combobox/) in `@workday/canvas-kit-react`.
+to the [Combobox](/get-started/for-developers/guides/combobox/) in `@workday/canvas-kit-react`.
 
 ### Segmented Control (Main)
 
@@ -863,7 +910,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
@@ -908,9 +955,9 @@ const buttonStyles = createStyles({
 We've removed `Menu` from `@workday/canvas-kit-preview-react`. Please use
 [Menu](/components/popups/menu/) from `@workday/canvas-kit-react` instead.
 
-### readyOnlyPillStencil and removeablePillStencil
+### readOnlyPillStencil and removeablePillStencil
 
-The `readyOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
+The `readOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
 package. Please use `pillStencil` instead.
 
 ### Text Area (Preview)
@@ -934,8 +981,8 @@ import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 **After in v14**
 
 ```tsx
-import {TextArea} from '@workday/canvas-kit-react/text-area';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
 
 <FormField>
   <FormField.Label>Leave a Review</FormField.Label>
@@ -966,8 +1013,9 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 **After in v14**
 
 ```tsx
-import {TextArea} from '@workday/canvas-kit-react/text-input';
+import {TextArea} from '@workday/canvas-kit-react/text-area';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextArea} from '@workday/canvas-kit-react/text-input';
 
 <FormField>
   <FormField.Label>Leave a Review</FormField.Label>
@@ -985,7 +1033,6 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
 
 - **Dependency Conflicts**: When upgrading to the latest major version of Canvas Kit, all related
   Canvas Kit packages should be updated at the same time:
-
   - `"@workday/canvas-kit-react": "^13.5.6"` → `"@workday/canvas-kit-react": "^14.0.0"`
   - `"@workday/canvas-kit-styling": "^13.5.6"` → `"@workday/canvas-kit-styling": "^14.0.0"`
   - `"@workday/canvas-kit-preview-react": "^13.5.6"` →

package/dist/mdx/14.0-VISUAL-CHANGES.mdx

@@ -1,23 +1,23 @@
-import {Graphic} from '@workday/canvas-kit-react/icon';
+import { Graphic } from '@workday/canvas-kit-react/icon';
 
-import avatarImage from './images/v14-avatar.png';
-import breadcrumbsImage from './images/v14-breadcrumbs.png';
-import cardImage from './images/v14-card.png';
-import checkboxImage from './images/v14-checkbox.png';
-import countBadgeImage from './images/v14-count-badge.png';
-import expandableImage from './images/v14-expandable.png';
-import infoHighlightImage from './images/v14-info-highlight.png';
-import loadingDotsImage from './images/v14-loading-dots.png';
-import pillImage from './images/v14-pill.png';
-import primaryButtonImage from './images/v14-primary-button.png';
-import radioImage from './images/v14-radio.png';
-import secondaryButtonImage from './images/v14-secondary-button.png';
-import selectImage from './images/v14-select.png';
-import statusIndicatorImage from './images/v14-status-indicator-preview.png';
-import tabsImage from './images/v14-tabs.png';
-import tertiaryButtonImage from './images/v14-tertiary-button.png';
-import textAreaImage from './images/v14-text-area.png';
-import textInputImage from './images/v14-text-input.png';
+import avatarImage from './images/v14/v14-avatar.png';
+import breadcrumbsImage from './images/v14/v14-breadcrumbs.png';
+import cardImage from './images/v14/v14-card.png';
+import checkboxImage from './images/v14/v14-checkbox.png';
+import countBadgeImage from './images/v14/v14-count-badge.png';
+import expandableImage from './images/v14/v14-expandable.png';
+import infoHighlightImage from './images/v14/v14-info-highlight.png';
+import loadingDotsImage from './images/v14/v14-loading-dots.png';
+import pillImage from './images/v14/v14-pill.png';
+import primaryButtonImage from './images/v14/v14-primary-button.png';
+import radioImage from './images/v14/v14-radio.png';
+import secondaryButtonImage from './images/v14/v14-secondary-button.png';
+import selectImage from './images/v14/v14-select.png';
+import statusIndicatorImage from './images/v14/v14-status-indicator-preview.png';
+import tabsImage from './images/v14/v14-tabs.png';
+import tertiaryButtonImage from './images/v14/v14-tertiary-button.png';
+import textAreaImage from './images/v14/v14-text-area.png';
+import textInputImage from './images/v14/v14-text-input.png';
 
 
 # Canvas Kit 14.0 Visual Changes