@workday/canvas-kit-docs 13.0.4 → 14.0.0-alpha.1121-next.0

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.0.4",
-    "@workday/canvas-kit-preview-react": "13.0.4",
-    "@workday/canvas-kit-react": "13.0.4",
-    "@workday/canvas-kit-react-fonts": "^13.0.4",
-    "@workday/canvas-kit-styling": "13.0.4",
+    "@workday/canvas-kit-labs-react": "13.0.3",
+    "@workday/canvas-kit-preview-react": "13.0.3",
+    "@workday/canvas-kit-react": "13.0.3",
+    "@workday/canvas-kit-react-fonts": "^13.0.3",
+    "@workday/canvas-kit-styling": "13.0.3",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "13.0.4",
-    "@workday/canvas-kit-preview-react": "13.0.4",
-    "@workday/canvas-kit-react": "13.0.4",
-    "@workday/canvas-kit-react-fonts": "^13.0.4",
-    "@workday/canvas-kit-styling": "13.0.4",
+    "@workday/canvas-kit-labs-react": "13.0.3",
+    "@workday/canvas-kit-preview-react": "13.0.3",
+    "@workday/canvas-kit-react": "13.0.3",
+    "@workday/canvas-kit-react-fonts": "^13.0.3",
+    "@workday/canvas-kit-styling": "13.0.3",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -0,0 +1,106 @@
+# Canvas Kit 14.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v14. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+
+## Table of contents
+
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [Component Updates](#component-updates)
+	- [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+- [Troubleshooting](#troubleshooting)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Codemod
+
+We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
+automatically update your code to work with most of the breaking changes in v14. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+[AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
+prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
+updates, which allows you to focus on changes that need your attention. **We highly recommend you
+use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v8 of Canvas Kit,
+  you'll need to run the v9 codemod before you run v10 and so on.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  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 v14. 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.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.
+
+```sh
+npx @workday/canvas-kit-codemod v14 [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v14 [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+## Styling API and Canvas Tokens 💅
+Several components have been refactored to use our Canvas tokens and styling API. The React interface has not changed, but Canvas Tokens are now used for dynamic properties.
+
+> **Note:** These components also support our cs prop for styling. Learn more about styling with cs in our documentation.
+
+The following components have been updated:
+
+- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
+
+## Troubleshooting
+
+- 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": "^12.5.6"` -> `"@workday/canvas-kit-react": "^13.0.0"`
+  - `"@workday/canvas-kit-styling": "^12.5.6"` -> `"@workday/canvas-kit-styling": "^13.0.0"`
+  - `"@workday/canvas-kit-preview-react": "^12.5.6"` ->
+    `"@workday/canvas-kit-preview-react": "^13.0.0"`
+  - `"@workday/canvas-kit-labs-react": "^12.5.6"` -> `"@workday/canvas-kit-labs-react": "^13.0.0"`
+- Our components rely on the `@workday/canvas-tokens-web` package which provides our CSS variables
+  and ensures the correct styling of our components. Make sure to upgrade to the latest version of
+  Canvas Tokens Web and install it correctly. For more information,
+  [view our docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
+
+## Glossary
+
+For an overview of the different packages we provide, plase view our docs [here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).

package/dist/mdx/PACKAGES.mdx

@@ -0,0 +1,46 @@
+### Main
+
+Our Main package of Canvas Kit components and utilities at `@workday/canvas-kit-react` has
+undergone a full design and a11y review and is approved for use in product.
+
+Breaking changes to code in Main will only occur during major version updates and will always be
+communicated in advance and accompanied by migration strategies.
+
+---
+
+### Preview
+
+Our Preview package of Canvas Kit components and utilities at
+`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
+use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
+Preview is analagous to code in beta.
+
+Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
+triggering a major version update, though such changes will be communicated in advance and
+accompanied by migration strategies.
+
+Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
+Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
+example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
+[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+In these cases, Preview serves as a staging ground for an improved version of the component with a
+different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
+
+---
+
+### Labs
+
+Our Labs package of Canvas Kit components and utilities at `@workday/canvas-kit-labs-react`
+has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+experimental code and is analagous to code in alpha.
+
+Breaking changes can be deployed to Labs at any time without triggering a major version update and
+may not be subject to the same rigor in communcation and migration strategies reserved for breaking
+changes in [Preview](#preview) and [Main](#main).
+`import { opacity } from "@workday/canvas-tokens-web/dist/es6/system"`
+
+### Styling
+
+This package contains everything needed to create CSS styling. This styling package contains a
+runtime for development and a static parsing process for build time. For more information, visit
+https://workday.github.io/canvas-kit/?path=/docs/styling-why-canvas-styling--docs

package/dist/mdx/preview-react/multi-select/MultiSelect.mdx

@@ -6,7 +6,6 @@ import {
 } from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import Disabled from './examples/Disabled';
 import Complex from './examples/Complex';
 import Icons from './examples/Icons';
 import Controlled from './examples/Controlled';
@@ -54,11 +53,7 @@ attached to the `MultiSelect.Input` and read out as a group for voiceover.
 </MultiSelect>
 ```
 
-### Disabled Example
-
-Disabling `MultiSelect` involves passing the `disabled` prop to the `MultiSelect.Input` component.
-
-<ExampleCodeBlock code={Disabled} />
+<ExampleCodeBlock code={Basic} />
 
 ### Complex
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.4",
+  "version": "14.0.0-alpha.1121-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.4",
-    "@workday/canvas-kit-preview-react": "^13.0.4",
-    "@workday/canvas-kit-react": "^13.0.4",
-    "@workday/canvas-kit-styling": "^13.0.4",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1121-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1121-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1121-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1121-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "885784bd65fe9a445b16d7b7ac21b0af9151dadd"
+  "gitHead": "54159d1163fae7b4c6b0677700e6aa13f0b7491b"
 }

package/dist/mdx/preview-react/multi-select/examples/Disabled.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
-
-const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
-
-export default () => {
-  return (
-    <>
-      <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>
-        <FormField orientation="horizontalStart">
-          <FormField.Label>Toppings</FormField.Label>
-          <FormField.Input
-            as={MultiSelect.Input}
-            placeholder="Select Multiple"
-            removeLabel="Remove"
-            disabled
-          />
-          <MultiSelect.Popper>
-            <MultiSelect.Card>
-              <MultiSelect.List>
-                {item => (
-                  <MultiSelect.Item data-id={item}>
-                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
-                  </MultiSelect.Item>
-                )}
-              </MultiSelect.List>
-            </MultiSelect.Card>
-          </MultiSelect.Popper>
-        </FormField>
-      </MultiSelect>
-    </>
-  );
-};