chore: Merge master into prerelease/minor [skip release]

Workday · Jun 7, 2023 · cf949e7 · cf949e7
2 parents 8fa7286 + 2517711
commit cf949e7
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 26 deletions.
diff --git a/cypress/integration/ActionBar.spec.ts b/cypress/integration/ActionBar.spec.ts
@@ -72,9 +72,9 @@ describe('Action Bar', () => {
       cy.findByLabelText('More actions').should('have.attr', 'aria-expanded', 'false');
     });
 
-    context('when action list container is only 440px wide', () => {
+    context('when action list container is only 420px wide', () => {
       beforeEach(() => {
-        cy.findByRole('button', {name: '440px'}).click();
+        cy.findByRole('button', {name: '420px'}).click();
       });
 
       it('should have 3 buttons inside the "actions"', () => {
@@ -113,7 +113,7 @@ describe('Action Bar', () => {
 
     context('when action list container is only 320px wide', () => {
       beforeEach(() => {
-        cy.findByRole('button', {name: '320px'}).click();
+        cy.findByRole('button', {name: 'Extra Small'}).click();
       });
 
       it('should have 2 buttons inside the "actions"', () => {
@@ -150,4 +150,34 @@ describe('Action Bar', () => {
       });
     });
   });
+
+  context(
+    'when [Components/Buttons/Action Bar, Overflow Action Bar Custom Button Count] story is rendered',
+    () => {
+      beforeEach(() => {
+        h.stories.load('Components/Buttons/Action Bar', 'Overflow Action Bar Custom Button Count');
+      });
+
+      it('should pass axe checks', () => {
+        cy.checkA11y();
+      });
+
+      it('should have 3 visible buttons inside the "actions"', () => {
+        cy.findByLabelText('actions')
+          .findAllByRole('button')
+          .should('have.length', 3);
+      });
+
+      it('should focus on the "More" button', () => {
+        cy.findByRole('button', {name: 'More actions'}).should('be.visible');
+      });
+
+      it('should have button inside the "menu"', () => {
+        cy.findByRole('button', {name: 'More actions'}).click();
+        cy.findByRole('menu')
+          .findAllByRole('menuitem')
+          .should('have.length', 1);
+      });
+    }
+  );
 });
diff --git a/modules/react/action-bar/lib/useActionBarModel.tsx b/modules/react/action-bar/lib/useActionBarModel.tsx
@@ -19,6 +19,12 @@ export const useActionBarModel = createModelHook({
      */
     orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
     menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+    /**
+     * The maximum number of actions that can be visible.
+     * Must be greater than 1 and less than items.length.
+     * @default 3
+     */
+    maximumVisible: 3,
   },
   requiredConfig: useOverflowListModel.requiredConfig,
 })(config => {
@@ -38,9 +44,20 @@ export const useActionBarModel = createModelHook({
   let nonInteractiveIds = model.state.nonInteractiveIds;
   const totalSize = model.state.items.length;
 
-  // Only show a maximum of 3 buttons
-  if (totalSize - hiddenIds.length >= 3) {
-    hiddenIds = items.slice(3, totalSize).map(getId);
+  console.log(config.maximumVisible);
+
+  // Only show maximumVisible buttons
+  const maximumVisible: number =
+    !config.maximumVisible || config.maximumVisible < 1
+      ? 3 // should fallback to default value
+      : config.maximumVisible > totalSize
+      ? totalSize
+      : config.maximumVisible;
+
+  console.log('maximumVisible', maximumVisible);
+
+  if (totalSize - hiddenIds.length >= maximumVisible) {
+    hiddenIds = items.slice(maximumVisible, totalSize).map(getId);
   }
 
   // Always show the first button and make sure it is interactive

diff --git a/modules/react/action-bar/stories/ActionBar.stories.mdx b/modules/react/action-bar/stories/ActionBar.stories.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';
 
 <Meta title="Components/Buttons/Action Bar" component={ActionBar} />
 
@@ -68,6 +69,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/" />
diff --git a/modules/react/action-bar/stories/examples/OverflowActionBar.tsx b/modules/react/action-bar/stories/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 const OverflowActionBar = () => {
   ]);
 
   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 const OverflowActionBar = () => {
       <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>

diff --git a/modules/react/action-bar/stories/examples/OverflowActionBarCustomButtonCount.tsx b/modules/react/action-bar/stories/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 const OverflowActionBarCustomButtonCount = () => {
+  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>
+  );
+};
diff --git a/modules/react/action-bar/stories/visual-testing/stories_action-bar.tsx b/modules/react/action-bar/stories/visual-testing/stories_action-bar.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import {ComponentStatesTable, StaticStates} from '@workday/canvas-kit-react/testing';
 import {withSnapshotsEnabled} from '../../../../../utils/storybook';
 import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
-import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
+import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {Box} from '@workday/canvas-kit-react/layout';
 
 export default withSnapshotsEnabled({
   title: 'Testing/Buttons/ActionBar',
@@ -57,23 +56,45 @@ export const ActionBarWithOverflowMenuStates = () => {
     {id: 'fifth', text: 'Fifth Action'},
   ]);
 
-  const model = useActionBarModel({items});
-
   return (
     <StaticStates>
       <ComponentStatesTable
         rowProps={[
-          {label: '100% container width', props: {containerWidth: '100%'}},
-          {label: '440px container width', props: {containerWidth: '440px'}},
-          {label: '320px container width', props: {containerWidth: '320px'}},
+          {label: 'Default Action Bar', props: {}},
+          {label: 'Default Action Bar (400px width container)', props: {containerWidth: 400}},
+          {
+            label: 'Default Action Bar (280px width container)',
+            props: {containerWidth: 280},
+          },
+          {
+            label: 'Minimum Visible Items (as 1 button)',
+            props: {maximumVisible: 1},
+          },
+          {
+            label: 'Custom Number Visible Items (as 4 button)',
+            props: {maximumVisible: 2},
+          },
+          {
+            label: 'Maximum Visible Items (as 5 buttons)',
+            props: {maximumVisible: items.length},
+          },
+          {
+            label: 'Maximum Visible Items (400px width)',
+            props: {maximumVisible: items.length, containerWidth: 400},
+          },
+          {
+            label: 'Maximum Visible Items (280px width)',
+            props: {maximumVisible: items.length, containerWidth: 280},
+          },
+        ]}
+        columnProps={[
+          {label: 'Example', props: {}},
         ]}
-        columnProps={[{label: 'With Overflow Menu', props: {position: 'relative'}}]}
       >
-        {props => (
-          <ActionBar items={items}>
+        {({containerWidth, maximumVisible}) => (
+          <ActionBar items={items} maximumVisible={maximumVisible}>
             <ActionBar.List
-              {...props}
-              maxWidth={props.containerWidth}
+              width={containerWidth}
               position="relative"
               overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}
             >

diff --git a/modules/react/modal/stories/examples/BodyOverflow.tsx b/modules/react/modal/stories/examples/BodyOverflow.tsx
@@ -20,7 +20,7 @@ export const BodyOverflow = () => {
         <Modal.Card>
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>MIT License</Modal.Heading>
-          <Modal.Body>
+          <Modal.Body tabIndex={0}>
             <p style={{marginTop: 0}}>
               Permission is hereby granted, free of charge, to any person obtaining a copy of this
               software and associated documentation files (the "Software"), to deal in the Software

diff --git a/utils/publish-canary.mjs b/utils/publish-canary.mjs
@@ -109,7 +109,6 @@ exec('git diff --name-only HEAD HEAD^')
     const lernaFlags = [
       `--yes`,
       `--force-publish="*"`,
-      `--canary`,
       `--preid ${preid}`,
       `--dist-tag ${distTag}`,
       bump,