@workday/canvas-kit-docs 14.0.0-alpha.1203-next.0 → 14.0.0-alpha.1206-next.0

package/dist/es6/lib/docs.js

@@ -65041,23 +65041,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -96063,23 +96046,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -115961,23 +115927,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -117486,23 +117435,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "as",
@@ -118698,23 +118630,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "as",
@@ -291573,23 +291488,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -297163,23 +297061,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -297672,23 +297553,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -298181,23 +298045,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -298690,23 +298537,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -317855,23 +317685,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",
@@ -393600,23 +393413,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
-        {
-          "kind": "property",
-          "name": "isThemeable",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "",
-          "declarations": [
-            {
-              "name": "isThemeable",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/button/lib/TertiaryButton.tsx"
-            }
-          ],
-          "tags": {}
-        },
         {
           "kind": "property",
           "name": "iconPosition",

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.2.17",
-    "@workday/canvas-kit-preview-react": "13.2.17",
-    "@workday/canvas-kit-react": "13.2.17",
-    "@workday/canvas-kit-react-fonts": "^13.2.17",
-    "@workday/canvas-kit-styling": "13.2.17",
+    "@workday/canvas-kit-labs-react": "13.2.18",
+    "@workday/canvas-kit-preview-react": "13.2.18",
+    "@workday/canvas-kit-react": "13.2.18",
+    "@workday/canvas-kit-react-fonts": "^13.2.18",
+    "@workday/canvas-kit-styling": "13.2.18",
     "@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.2.17",
-    "@workday/canvas-kit-preview-react": "13.2.17",
-    "@workday/canvas-kit-react": "13.2.17",
-    "@workday/canvas-kit-react-fonts": "^13.2.17",
-    "@workday/canvas-kit-styling": "13.2.17",
+    "@workday/canvas-kit-labs-react": "13.2.18",
+    "@workday/canvas-kit-preview-react": "13.2.18",
+    "@workday/canvas-kit-react": "13.2.18",
+    "@workday/canvas-kit-react-fonts": "^13.2.18",
+    "@workday/canvas-kit-styling": "13.2.18",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -11,6 +11,7 @@ any questions.
 - [Theming](#theming)
 - [Component Updates](#component-updates)
   - [Branding Changes](#branding-changes)
+  - [Buttons](#buttons)
   - [Card](#card)
   - [Count Badge](#count-badge)
   - [Expandable](#expandable)
@@ -93,16 +94,17 @@ yarn remove @workday/canvas-kit-codemod
 - `CanvasThemePalette` has been updated to include a `lighter` color.
 - `CanvasTheme` has been updated to include a `lighter` color.
 
-
 ## Component Updates
 
 ### Branding Changes 💅
 
-Several components have been refactored to reflect our new brand direction. Most of these changes revolve around the use of our new bran colors.
+Several components have been refactored to reflect our new brand direction. Most of these changes
+revolve around the use of our new brand colors.
 
 The following components have been updated:
 
 - `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
+- `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
 - `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `LoadingDots` (Main) [#3393](https://github.com/Workday/canvas-kit/pull/3393)
@@ -113,6 +115,20 @@ The following components have been updated:
 - `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 - `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 
+### Buttons
+
+#### TertiaryButton
+
+The `TertiaryButton` component no longer supports the `isThemable` prop.  
+To customize the appearance of `TertiaryButton`, use the `cs` prop for custom styles or the `colors`
+prop for palette-based color overrides.
+
+The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
+our new brand direction.
+
+If you need to override default styles, follow
+[this guide](https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs#custom-styles)
+
 ### Card 🚨
 
 **PR:** [#3350](https://github.com/Workday/canvas-kit/pull/3350)
@@ -208,9 +224,8 @@ spacing between card elements.
 
 The `CountBadge` component has been updated to reflect our new brand direction.
 
-
-Additionally, a new `emphasis` prop has been added, allowing you to choose between `high` and
-`low` emphasis for the badge.
+Additionally, a new `emphasis` prop has been added, allowing you to choose between `high` and `low`
+emphasis for the badge.
 
 **Count Badge variants in v14**
 
@@ -237,7 +252,8 @@ These changes are only **visual** and should not affect the functionality of the
 
 **PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
 
-- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standalone-inverse` variant. This removes the underline text decoration for use outside the context of body text.
+- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standalone-inverse` variant. This
+  removes the underline text decoration for use outside the context of body text.
 
 **HyperLink and ExternalHyperlink in v14**
 
@@ -248,14 +264,17 @@ These changes are only **visual** and should not affect the functionality of the
 <ExternalHyperlink variant="standalone-inverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
 ```
 
-> **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
+> **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the
+> `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
 
 ### Loading Dots
 
 **PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
 
-- We've updated the colors to match brand refresh. The default color changes from `system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
-- `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark background or image.
+- We've updated the colors to match brand refresh. The default color changes from
+  `system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
+- `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark
+  background or image.
 
 ```tsx
 <LoadingDots variant="inverse" />

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

@@ -10,6 +10,7 @@ import Disabled from './examples/Disabled';
 import Error from './examples/Error';
 import Complex from './examples/Complex';
 import Icons from './examples/Icons';
+import InitialSelectedItems from './examples/InitialSelectedItems';
 import Controlled from './examples/Controlled';
 import Searching from './examples/Searching';
 
@@ -109,4 +110,10 @@ dynamically load items as the user navigates the available options.
 > Don't rely too much on the exact behavior of the search input. For example, the search input may
 > be cleared when the user blurs the field.
 
-<ExampleCodeBlock code={Searching} />
+<ExampleCodeBlock code={Searching} />
+
+### Initial Selected Items
+
+You can set `initialSelectedIds` to the value that you want initially selected.
+
+<ExampleCodeBlock code={InitialSelectedItems} />

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

@@ -0,0 +1,129 @@
+import React, {useEffect} from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+
+import {createStyles} from '@workday/canvas-kit-styling';
+import {LoadReturn} from '@workday/canvas-kit-react/collection';
+import {CanvasProvider, useMountLayout} from '@workday/canvas-kit-react/common';
+import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
+const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
+const options = Array(1000)
+  .fill('')
+  .map((_, index) => {
+    return {
+      id: `${index + 1}`,
+      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,
+    };
+  });
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const {model, loader} = useComboboxLoader(
+    {
+      // You can start with any number that makes sense.
+      total: 0,
+      initialSelectedIds: ['3', '5'],
+
+      // Pick whatever number makes sense for your API
+      pageSize: 500,
+
+      // A load function that will be called by the loader. You must return a promise that returns
+      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+      async load({pageNumber, pageSize, filter}) {
+        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {
+          // simulate a server response by resolving after a period of time
+          setTimeout(() => {
+            // simulate paging and filtering based on pre-computed items
+            const start = (pageNumber - 1) * pageSize;
+            const end = start + pageSize;
+            const filteredItems = options.filter(item => {
+              if (filter === '' || typeof filter !== 'string') {
+                return true;
+              }
+              return item.text.toLowerCase().includes(filter.toLowerCase());
+            });
+
+            const total = filteredItems.length;
+            const items = filteredItems.slice(start, end);
+
+            resolve({
+              items,
+              total,
+            });
+          }, 300);
+        });
+      },
+      onShow() {
+        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+        // visible
+        loader.load();
+      },
+    },
+    useMultiSelectModel
+  );
+
+  useEffect(() => {
+    loader.load();
+  }, [loader]);
+
+  return (
+    <CanvasProvider>
+      <>
+        <form
+          onSubmit={e => {
+            console.log('form submitted');
+            e.preventDefault();
+          }}
+        >
+          <main className={mainContentStyles}>
+            <MultiSelect model={model}>
+              <FormField orientation="horizontalStart">
+                <FormField.Label>Fruits</FormField.Label>
+                <FormField.Input
+                  as={MultiSelect.SearchInput}
+                  placeholder="Search"
+                  removeLabel="Remove"
+                  name="toppings"
+                  onChange={e => {
+                    setValue(e.currentTarget.value);
+                  }}
+                  value={value}
+                />
+                <MultiSelect.Popper>
+                  <MultiSelect.Card>
+                    {model.state.items.length === 0 && (
+                      <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+                    )}
+                    {model.state.items.length > 0 && (
+                      <MultiSelect.List maxHeight={200}>
+                        {item =>
+                          item ? (
+                            <MultiSelect.Item data-id={item.id}>
+                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                            </MultiSelect.Item>
+                          ) : undefined
+                        }
+                      </MultiSelect.List>
+                    )}
+                  </MultiSelect.Card>
+                </MultiSelect.Popper>
+              </FormField>
+            </MultiSelect>
+          </main>
+        </form>
+        <div>Selected: {value}</div>
+      </>
+    </CanvasProvider>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1203-next.0",
+  "version": "14.0.0-alpha.1206-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.1203-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1203-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1203-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1203-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1206-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1206-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1206-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1206-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "07c76a815a238c1a08f47fd6a33e1a0a2e65eea1"
+  "gitHead": "5f2128b722fff5b086358ff3bd3ab009b0e07ef4"
 }