@workday/canvas-kit-docs 15.0.0-alpha.1326-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
@@ -83,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"
 />
 
@@ -171,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
 
@@ -333,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)
@@ -653,34 +653,49 @@ instead.
 
 ### 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.
+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.
 
-> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
-> and Dialogs. You can either pass a `className` or define CSS variables at the root.
+> **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.
 
-**Before in v13**
+#### 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
-// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
-<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
-  <Modal>//... rest of modal code</Modal>
+
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'teal'}}}}}>
+ {//part of your app to have different theme from the rest of your application}
 </CanvasProvider>
 ```
 
-**After in v14**
+> **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
-// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
-:root {
- --cnvs-brand-primary-base: blue;
-}
+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>
-  <Modal>//... rest of modal code</Modal>
-</CanvasProvider>
+  <App />
+</CanvasProvider>;
 ```
+
 ### Search Form (Labs) 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
@@ -827,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} />;
@@ -851,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)
@@ -865,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)
 
@@ -894,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
@@ -965,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>
@@ -999,6 +1015,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 ```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-input';
 
 <FormField>
   <FormField.Label>Leave a Review</FormField.Label>
@@ -1016,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