@workday/canvas-kit-docs 14.0.0-alpha.1126-next.0 → 14.0.0-alpha.1129-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.5",
+    "@workday/canvas-kit-preview-react": "13.0.5",
+    "@workday/canvas-kit-react": "13.0.5",
+    "@workday/canvas-kit-react-fonts": "^13.0.5",
+    "@workday/canvas-kit-styling": "13.0.5",
     "@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.5",
+    "@workday/canvas-kit-preview-react": "13.0.5",
+    "@workday/canvas-kit-react": "13.0.5",
+    "@workday/canvas-kit-react-fonts": "^13.0.5",
+    "@workday/canvas-kit-styling": "13.0.5",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -4,13 +4,12 @@ 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)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -79,15 +78,20 @@ yarn remove @workday/canvas-kit-codemod
 > 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.
+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)
 - `SegmentedControl` (main) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
 - `SegmentedControl` (preview) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
+- `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
+- `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 
 ## Troubleshooting
 
@@ -105,4 +109,5 @@ The following components have been updated:
 
 ## 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).
+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/preview-react/multi-select/MultiSelect.mdx

@@ -7,6 +7,7 @@ import {
 
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
+import Error from './examples/Error';
 import Complex from './examples/Complex';
 import Icons from './examples/Icons';
 import Controlled from './examples/Controlled';
@@ -60,6 +61,14 @@ Disabling `MultiSelect` involves passing the `disabled` prop to the `MultiSelect
 
 <ExampleCodeBlock code={Disabled} />
 
+### Error States
+
+The `MultiSelect.Input` and `MultiSelect.SearchInput` support the `ErrorType` from the Common
+package. The error styling is identical to the `TextInput` error styling. The `error` prop is
+typically passed from the `FormField` component.
+
+<ExampleCodeBlock code={Error} />
+
 ### Complex
 
 When registering items in an array of objects, it's common to have the text that is displayed to the

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
+
+export default () => {
+  const model = useMultiSelectModel({
+    items,
+    initialSelectedIds: [],
+  });
+  return (
+    <>
+      <MultiSelect model={model}>
+        <FormField
+          orientation="horizontalStart"
+          error={
+            model.state.selectedIds.length < 1
+              ? 'error'
+              : model.state.selectedIds.length > 3
+              ? 'alert'
+              : undefined
+          }
+        >
+          <FormField.Label>Toppings</FormField.Label>
+          <FormField.Input
+            as={MultiSelect.Input}
+            placeholder="Select Multiple"
+            removeLabel="Remove"
+          />
+          <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.Hint>
+            {model.state.selectedIds.length < 1
+              ? 'Select at least one topping.'
+              : model.state.selectedIds.length > 3
+              ? 'More than 3 toppings cost extra.'
+              : undefined}
+          </FormField.Hint>
+        </FormField>
+      </MultiSelect>
+    </>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1126-next.0",
+  "version": "14.0.0-alpha.1129-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": "^14.0.0-alpha.1126-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1126-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1126-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1126-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1129-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1129-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1129-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1129-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": "5420bd738ba9800e4443d4ec6103df51634529e9"
+  "gitHead": "27f7b4b0b968875921295a1640e043018e8a0716"
 }