@workday/canvas-kit-docs 9.0.2 → 9.1.0-429-next.0

package/dist/es6/lib/docs.js

@@ -31261,6 +31261,29 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "maximumVisible",
+          "defaultValue": {
+            "kind": "number",
+            "value": 3
+          },
+          "type": {
+            "kind": "primitive",
+            "value": "number"
+          },
+          "required": false,
+          "description": "The maximum number of actions that can be visible.\nMust be greater than 1 and less than items.length.",
+          "declarations": [
+            {
+              "name": "maximumVisible",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/action-bar/lib/useActionBarModel.tsx"
+            }
+          ],
+          "tags": {
+            "default": "3"
+          }
+        },
         {
           "kind": "property",
           "name": "initialHiddenIds",
@@ -33414,6 +33437,29 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "maximumVisible",
+          "defaultValue": {
+            "kind": "number",
+            "value": 3
+          },
+          "type": {
+            "kind": "primitive",
+            "value": "number"
+          },
+          "required": false,
+          "description": "The maximum number of actions that can be visible.\nMust be greater than 1 and less than items.length.",
+          "declarations": [
+            {
+              "name": "maximumVisible",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/action-bar/lib/useActionBarModel.tsx"
+            }
+          ],
+          "tags": {
+            "default": "3"
+          }
+        },
         {
           "kind": "property",
           "name": "initialHiddenIds",

package/dist/es6/lib/specs.js

@@ -135,7 +135,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when action list container is only 440px wide",
+                "name": "when action list container is only 420px wide",
                 "children": [
                   {
                     "type": "it",
@@ -202,6 +202,28 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "when [Components/Buttons/Action Bar, Overflow Action Bar Custom Button Count] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have 3 visible buttons inside the \"actions\""
+              },
+              {
+                "type": "it",
+                "name": "should focus on the \"More\" button"
+              },
+              {
+                "type": "it",
+                "name": "should have button inside the \"menu\""
+              }
+            ]
           }
         ]
       }

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -6,6 +6,7 @@ import Basic from './examples/Basic';
 import Icons from './examples/Icons';
 import DeleteAction from './examples/DeleteAction';
 import OverflowActionBar from './examples/OverflowActionBar';
+import OverflowActionBarCustomButtonCount from './examples/OverflowActionBarCustomButtonCount';
 
 
 # Canvas Kit Action Bar
@@ -67,6 +68,11 @@ should render.
 
 <ExampleCodeBlock code={OverflowActionBar} />
 
+The number of visible buttons can also be adjusted by using the model's `maximumVisible` attribute.
+You can change it from the default of 3 to any number greater than 1 and less than items.length.
+
+<ExampleCodeBlock code={OverflowActionBarCustomButtonCount} />
+
 ## Component API
 
 <SymbolDoc name="ActionBar" fileName="/react/" />

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-
+import {breakpoints} from '@workday/canvas-kit-react/common';
 import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
-import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
 import {Box} from '@workday/canvas-kit-react/layout';
 
@@ -20,11 +20,11 @@ export default () => {
   ]);
 
   const model = useActionBarModel({items});
-  const [containerWidth, setContainerWidth] = React.useState('100%');
+  const [containerWidth, setContainerWidth] = React.useState<string | number>('100%');
 
   return (
     <div>
-      <Box width={containerWidth} marginBottom="xl">
+      <Box maxWidth={containerWidth} marginBottom="xl">
         <ActionBar model={model}>
           <ActionBar.List
             position="relative"
@@ -58,8 +58,9 @@ export default () => {
       <SegmentedControl onSelect={data => setContainerWidth(data.id)}>
         <SegmentedControl.List aria-label="container width control" marginBottom="m">
           <SegmentedControl.Item data-id="100%">100%</SegmentedControl.Item>
-          <SegmentedControl.Item data-id="440px">440px</SegmentedControl.Item>
-          <SegmentedControl.Item data-id="320px">320px</SegmentedControl.Item>
+          <SegmentedControl.Item data-id={`${breakpoints.m}px`}>Small</SegmentedControl.Item>
+          <SegmentedControl.Item data-id="420px">420px</SegmentedControl.Item>
+          <SegmentedControl.Item data-id={`${breakpoints.s}px`}>Extra Small</SegmentedControl.Item>
         </SegmentedControl.List>
       </SegmentedControl>
     </div>

package/dist/mdx/react/action-bar/examples/OverflowActionBarCustomButtonCount.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {ActionBar} from '@workday/canvas-kit-react/action-bar';
+
+type MyActionItem = {
+  id: string;
+  text: React.ReactNode;
+};
+
+export default () => {
+  const [items] = React.useState<MyActionItem[]>([
+    {id: 'view', text: 'View'},
+    {id: 'edit', text: 'Edit'},
+    {id: 'delete', text: 'Delete'},
+  ]);
+
+  return (
+    <ActionBar items={items} maximumVisible={2}>
+      <ActionBar.List
+        aria-label="actions"
+        position="relative"
+        overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}
+      >
+        {(item: MyActionItem) => (
+          <ActionBar.Item onClick={() => console.log(item.id)}>{item.text}</ActionBar.Item>
+        )}
+      </ActionBar.List>
+      <ActionBar.Menu.Popper>
+        <ActionBar.Menu.Card>
+          <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>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.2",
+  "version": "9.1.0-429-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.0.2",
-    "@workday/canvas-kit-preview-react": "^9.0.2",
-    "@workday/canvas-kit-react": "^9.0.2",
+    "@workday/canvas-kit-labs-react": "^9.1.0-429-next.0",
+    "@workday/canvas-kit-preview-react": "^9.1.0-429-next.0",
+    "@workday/canvas-kit-react": "^9.1.0-429-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "9e43c415e80c1586df4b5b8cdd81c8cdbfc4171d"
+  "gitHead": "41766d8358909bff45263f45f7a2ca9481678329"
 }