@workday/canvas-kit-docs 13.0.0-alpha.944-next.0 → 13.0.0-alpha.950-next.0

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

@@ -8,10 +8,14 @@ const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
 export default () => {
   return (
     <>
-      <MultiSelect items={items}>
+      <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>
         <FormField orientation="horizontal">
           <FormField.Label>Toppings</FormField.Label>
-          <FormField.Input as={MultiSelect.Input} placeholder="Select Multiple" />
+          <FormField.Input
+            as={MultiSelect.Input}
+            placeholder="Select Multiple"
+            removeLabel="Remove"
+          />
           <MultiSelect.Popper>
             <MultiSelect.Card>
               <MultiSelect.List>

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

@@ -39,6 +39,7 @@ export default () => {
                 <FormField.Input
                   as={MultiSelect.Input}
                   placeholder="Select Multiple"
+                  removeLabel="Remove"
                   name="toppings"
                   onChange={e => {
                     const value = e.currentTarget.value;

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

@@ -46,6 +46,7 @@ export default () => {
               <FormField.Input
                 as={MultiSelect.Input}
                 placeholder="Select Multiple"
+                removeLabel="Remove"
                 name="toppings"
                 onChange={handleOnChange}
                 value={value}

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

@@ -23,7 +23,11 @@ export default () => {
     <MultiSelect items={items}>
       <FormField orientation="horizontal">
         <FormField.Label>Controls</FormField.Label>
-        <FormField.Input as={MultiSelect.Input} placeholder="Select Multiple" />
+        <FormField.Input
+          as={MultiSelect.Input}
+          placeholder="Select Multiple"
+          removeLabel="Remove"
+        />
         <MultiSelect.Popper>
           <MultiSelect.Card>
             <MultiSelect.List>

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

@@ -88,6 +88,7 @@ export default () => {
                 <FormField.Input
                   as={MultiSelect.SearchInput}
                   placeholder="Search"
+                  removeLabel="Remove"
                   name="toppings"
                   onChange={e => {
                     setValue(e.currentTarget.value);

package/dist/mdx/react/collection/mdx/Collection.mdx

@@ -13,6 +13,7 @@ import Selection from './examples/Selection';
 import MultiSelection from './examples/MultiSelection';
 import BasicGrid from './examples/BasicGrid';
 import WrappingGrid from './examples/WrappingGrid';
+import OverflowVerticalList from './examples/OverflowVerticalList';
 
 
 # Canvas Kit Collection API
@@ -167,6 +168,16 @@ cursor wraps around columns and rows when an edge of a column or row is encounte
 
 <ExampleCodeBlock code={WrappingGrid} />
 
+### Overflow Vertical List
+
+A List can overflow vertically or horizontally to account for responsive resizing or an overflow of
+items. Using multiple hooks from the Collection system like `useOverflowListModel` and ensuring that
+`orientation`is set to`vertical`, you can achieve vertical overflow lists. In the example below,
+when the window is resized vertically, items in the Sidebar will overflow into the "More Actions"
+button.
+
+<ExampleCodeBlock code={OverflowVerticalList} />
+
 ## Component API
 
 ### ListBox

package/dist/mdx/react/collection/mdx/examples/OverflowVerticalList.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+import styled from '@emotion/styled';
+import {StyledType} from '@workday/canvas-kit-react/common';
+
+type MyActionItem = {
+  id: string;
+  text: React.ReactNode;
+};
+
+const StyledActionbarList = styled(ActionBar.List)<StyledType>({
+  '> *': {
+    flex: '0 0 auto',
+  },
+});
+
+export default () => {
+  const [items] = React.useState<MyActionItem[]>([
+    {id: 'first', text: 'First Action'},
+    {id: 'second', text: 'Second Action'},
+    {id: 'third', text: 'Third Action'},
+    {id: 'fourth', text: 'Fourth Action'},
+    {id: 'fifth', text: 'Fifth Action'},
+    {id: 'sixth', text: 'Sixth Action'},
+    {id: 'seventh', text: 'Seventh Action'},
+  ]);
+
+  const model = useActionBarModel({items, orientation: 'vertical', maximumVisible: 4});
+
+  return (
+    <>
+      <Box marginBottom="xl" height="50vh">
+        <ActionBar model={model}>
+          <StyledActionbarList
+            position="relative"
+            as="section"
+            aria-label="Overflow example actions"
+            flexDirection="column"
+            height="100%"
+            overflowButton={
+              <ActionBar.OverflowButton
+                cs={{overflow: 'visible', flex: 0}}
+                aria-label="More actions"
+              />
+            }
+          >
+            {(item: MyActionItem, index) => (
+              <ActionBar.Item
+                as={index === 0 ? PrimaryButton : undefined}
+                onClick={() => console.log(item.id)}
+              >
+                {item.text}
+              </ActionBar.Item>
+            )}
+          </StyledActionbarList>
+          <ActionBar.Menu.Popper>
+            <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>
+              <ActionBar.Menu.List>
+                {(item: MyActionItem) => (
+                  <ActionBar.Menu.Item onClick={() => console.log(item.id)}>
+                    {item.text}
+                  </ActionBar.Menu.Item>
+                )}
+              </ActionBar.Menu.List>
+            </ActionBar.Menu.Card>
+          </ActionBar.Menu.Popper>
+        </ActionBar>
+      </Box>
+    </>
+  );
+};

package/dist/mdx/react/select/examples/Controlled.tsx

@@ -36,7 +36,12 @@ export default () => {
         <FormField.Label>Contact</FormField.Label>
         <FormField.Field>
           <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
-            <FormField.Input as={Select.Input} onChange={handleChange} value={value} />
+            <FormField.Input
+              as={Select.Input}
+              onChange={handleChange}
+              value={value}
+              name="contact"
+            />
             <Select.Popper>
               <Select.Card>
                 <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.944-next.0",
+  "version": "13.0.0-alpha.950-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.944-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.944-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.944-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.944-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.950-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.950-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.950-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.950-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "6259a19bb3bb9912528c6f949bcad0c4bb7f2e30"
+  "gitHead": "2fa9149392fa70e103e6d7e2323c91f09b187b0a"
 }