From e138a7b26bdec0a480cf9b5229a33fb4b33765dc Mon Sep 17 00:00:00 2001
From: Rusty <matthew.rust@workday.com>
Date: Tue, 4 Oct 2022 08:15:33 -0700
Subject: [PATCH 1/2] feat: Add menu headers for grouping items (#1822)

Fixes: #1821

[category:Components]

Release Note:
Adds the ability to mark `<MenuItems>` as headers using the `isHeader` attribute. This allows users to group menu items logically. It updates the code used for keyboard shortcuts to ignore any items marked as a header.

Co-authored-by: @NicholasBoll <nicholas.boll@gmail.com>
---
 modules/preview-react/menu/lib/Menu.tsx       | 19 ++++++++---
 modules/preview-react/menu/lib/MenuItem.tsx   | 14 ++++++--
 modules/preview-react/menu/spec/Menu.spec.tsx | 25 ++++++++++++++-
 .../menu/stories/Menu.stories.mdx             |  8 +++++
 .../menu/stories/examples/Headers.tsx         | 32 +++++++++++++++++++
 5 files changed, 91 insertions(+), 7 deletions(-)
 create mode 100644 modules/preview-react/menu/stories/examples/Headers.tsx

diff --git a/modules/preview-react/menu/lib/Menu.tsx b/modules/preview-react/menu/lib/Menu.tsx
index 105d85de75..472e20263f 100644
--- a/modules/preview-react/menu/lib/Menu.tsx
+++ b/modules/preview-react/menu/lib/Menu.tsx
@@ -119,6 +119,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     } = this.props;
     const {selectedItemIndex} = this.state;
     const cardWidth = grow ? '100%' : width;
+    let interactiveItemIndex: number | null = null;
 
     return (
       <Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
@@ -133,17 +134,22 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
             ref={this.menuRef}
             {...elemProps}
           >
-            {React.Children.map(children, (menuItem, index) => {
+            {React.Children.map(children, menuItem => {
               if (!React.isValidElement(menuItem)) {
                 return;
               }
-              const itemId = `${id}-${index}`;
+              let itemId = null;
+              if (!menuItem.props.isHeader) {
+                interactiveItemIndex = (interactiveItemIndex ?? -1) + 1;
+                itemId = `${id}-${interactiveItemIndex}`;
+              }
               return (
                 <React.Fragment key={itemId}>
                   {React.cloneElement(menuItem, {
                     onClick: (event: React.MouseEvent) => this.handleClick(event, menuItem.props),
                     id: itemId,
-                    isFocused: selectedItemIndex === index,
+                    isFocused:
+                      selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
                   })}
                 </React.Fragment>
               );
@@ -175,7 +181,9 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     const children = React.Children.toArray(this.props.children);
     let nextSelectedIndex = 0;
     let isShortcut = false;
-    const itemCount = children.length;
+    const itemCount = children.filter(child => {
+      return !(child as React.ReactElement<MenuItemProps>)?.props?.isHeader;
+    }).length;
     const firstItem = 0;
     const lastItem = itemCount - 1;
 
@@ -308,6 +316,9 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     };
 
     const firstCharacters = React.Children.map(this.props.children, child => {
+      if ((child as React.ReactElement<MenuItemProps>)?.props?.isHeader) {
+        return;
+      }
       return getFirstCharacter(child);
     });
 
diff --git a/modules/preview-react/menu/lib/MenuItem.tsx b/modules/preview-react/menu/lib/MenuItem.tsx
index 621e499909..0adec1a502 100644
--- a/modules/preview-react/menu/lib/MenuItem.tsx
+++ b/modules/preview-react/menu/lib/MenuItem.tsx
@@ -33,6 +33,11 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
    * @default false
    */
   hasDivider?: boolean;
+  /**
+   * If true, render a header to group data, this menu item will not be intractable.
+   * @default false
+   */
+  isHeader?: boolean;
   /**
    * If true, set the MenuItem to the disabled state so it is not clickable.
    * @default false
@@ -55,7 +60,7 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
   shouldClose?: boolean;
 }
 
-const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
+const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused' | 'isHeader'>>(
   {
     ...type.levels.subtext.large,
     padding: `${space.xxs} ${space.s}`,
@@ -71,6 +76,9 @@ const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
       outline: 'none',
     },
   },
+  ({isHeader}) => {
+    return {pointerEvents: isHeader ? 'none' : 'all'};
+  },
   ({isFocused, isDisabled}) => {
     if (!isFocused && !isDisabled) {
       return {
@@ -258,6 +266,7 @@ class MenuItem extends React.Component<MenuItemProps> {
       hasDivider,
       isDisabled,
       isFocused,
+      isHeader,
       role,
       ...elemProps
     } = this.props;
@@ -272,11 +281,12 @@ class MenuItem extends React.Component<MenuItemProps> {
           ref={this.ref}
           tabIndex={-1}
           id={id}
-          role={role}
+          role={isHeader ? 'presentation' : role}
           onClick={this.handleClick}
           aria-disabled={isDisabled ? true : undefined}
           isDisabled={!!isDisabled}
           isFocused={!!isFocused}
+          isHeader={!!isHeader}
           {...elemProps}
         >
           {icon && iconProps && <StyledSystemIcon {...iconProps} />}
diff --git a/modules/preview-react/menu/spec/Menu.spec.tsx b/modules/preview-react/menu/spec/Menu.spec.tsx
index 2457783a2e..7c2c30d0ce 100644
--- a/modules/preview-react/menu/spec/Menu.spec.tsx
+++ b/modules/preview-react/menu/spec/Menu.spec.tsx
@@ -183,6 +183,7 @@ describe('Menu Keyboard Shortcuts', () => {
     render(
       <Menu>
         <MenuItem>Alpha</MenuItem>
+        <MenuItem isHeader>Bravo Header</MenuItem>
         <MenuItem>
           <em>
             Bravo Item (<b>with markup</b>)
@@ -211,8 +212,10 @@ describe('Menu Keyboard Shortcuts', () => {
   it('should loop around selected items using the down arrow', () => {
     render(
       <Menu isOpen={false}>
+        <MenuItem isHeader>Beginning</MenuItem>
         <MenuItem>Alpha</MenuItem>
         <MenuItem>Bravo</MenuItem>
+        <MenuItem isHeader>End</MenuItem>
       </Menu>
     );
 
@@ -228,8 +231,10 @@ describe('Menu Keyboard Shortcuts', () => {
   it('should loop around selected items using the up arrow', () => {
     render(
       <Menu>
+        <MenuItem isHeader>Beginning</MenuItem>
         <MenuItem>Alpha</MenuItem>
         <MenuItem>Bravo</MenuItem>
+        <MenuItem isHeader>End</MenuItem>
       </Menu>
     );
 
@@ -245,8 +250,10 @@ describe('Menu Keyboard Shortcuts', () => {
   it('should select the first items when Home key is pressed', () => {
     render(
       <Menu initialSelectedItem={1}>
+        <MenuItem isHeader>Beginning</MenuItem>
         <MenuItem>Alpha</MenuItem>
         <MenuItem>Bravo</MenuItem>
+        <MenuItem isHeader>End</MenuItem>
       </Menu>
     );
 
@@ -260,8 +267,10 @@ describe('Menu Keyboard Shortcuts', () => {
   it('should select the last items when End key is pressed', () => {
     render(
       <Menu initialSelectedItem={0}>
+        <MenuItem isHeader>Beginning</MenuItem>
         <MenuItem>Alpha</MenuItem>
         <MenuItem>Bravo</MenuItem>
+        <MenuItem isHeader>End</MenuItem>
       </Menu>
     );
 
@@ -280,7 +289,6 @@ describe('Menu Keyboard Shortcuts', () => {
       </Menu>
     );
 
-    const firstId = screen.getByRole('menuitem', {name: 'Alpha'}).getAttribute('id');
     const secondId = screen.getByRole('menuitem', {name: 'Bravo'}).getAttribute('id');
 
     fireEvent.keyDown(screen.getByRole('menu'), {key: 'Meta'});
@@ -391,4 +399,19 @@ describe('Menu Initial Selected Item', () => {
 
     expect(screen.getByRole('menu')).toHaveAttribute('aria-activedescendant', firstId);
   });
+
+  it('should select correct when headers are used', () => {
+    render(
+      <Menu initialSelectedItem={1}>
+        <MenuItem isHeader>Alpha Header</MenuItem>
+        <MenuItem>Alpha</MenuItem>
+        <MenuItem isHeader>Bravo Header</MenuItem>
+        <MenuItem>Bravo</MenuItem>
+      </Menu>
+    );
+
+    const secondId = screen.getByRole('menuitem', {name: 'Bravo'}).getAttribute('id');
+
+    expect(screen.getByRole('menu')).toHaveAttribute('aria-activedescendant', secondId);
+  });
 });
diff --git a/modules/preview-react/menu/stories/Menu.stories.mdx b/modules/preview-react/menu/stories/Menu.stories.mdx
index 983a67814d..98100e35d1 100644
--- a/modules/preview-react/menu/stories/Menu.stories.mdx
+++ b/modules/preview-react/menu/stories/Menu.stories.mdx
@@ -6,6 +6,7 @@ import {Basic} from './examples/Basic';
 import {ContextMenu} from './examples/ContextMenu';
 import {CustomMenuItem} from './examples/CustomMenuItem';
 import {Icons} from './examples/Icons';
+import {Headers} from './examples/Headers';
 import {ManyItems} from './examples/ManyItems';
 
 <Meta title="Preview/Menu/React" component={Menu} />
@@ -74,6 +75,13 @@ Below is an example:
 
 <ExampleCodeBlock code={Icons} />
 
+### Headers
+
+You can group menu items logically by adding a `isHeader` attribute on your `<MenuItems>`. To make
+your new items screen reader friendly add an `aria-label` around each grouped item.
+
+<ExampleCodeBlock code={Headers} />
+
 ### Many Items
 
 <ExampleCodeBlock code={ManyItems} />
diff --git a/modules/preview-react/menu/stories/examples/Headers.tsx b/modules/preview-react/menu/stories/examples/Headers.tsx
new file mode 100644
index 0000000000..001650b0fe
--- /dev/null
+++ b/modules/preview-react/menu/stories/examples/Headers.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {styled} from '@workday/canvas-kit-react/common';
+import {type} from '@workday/canvas-kit-react/tokens';
+
+const Header = styled(MenuItem)({
+  fontWeight: type.properties.fontWeights.bold,
+});
+
+export const Headers = () => {
+  return (
+    <Menu>
+      <Header isHeader={true}>Sort By</Header>
+      <MenuItem icon={checkIcon}>
+        <span aria-label="sort by newest">Newest</span>
+      </MenuItem>
+      <MenuItem>
+        <span aria-label="sort by oldest">Oldest</span>
+      </MenuItem>
+      <Header isHeader={true} hasDivider={true}>
+        Display Density
+      </Header>
+      <MenuItem icon={checkIcon}>
+        <span aria-label="display density simple">Simple</span>
+      </MenuItem>
+      <MenuItem>
+        <span aria-label="display density detailed">Detailed</span>
+      </MenuItem>
+    </Menu>
+  );
+};

From af482d5a02b73e46ce4f9e216dbc736b8793e90f Mon Sep 17 00:00:00 2001
From: Alex Nicholls <alex.nicholls@workday.com>
Date: Fri, 7 Oct 2022 08:15:58 -0700
Subject: [PATCH 2/2] feat: Add support for opening stories in Tesseract
 (#1829)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As discussed on slack, this inconsequential change will enable the "Open in Tesseract" button for CK stories in supported internal Storybook environments. Thanks! 🍻

[category:Infrastructure

![](https://s.yimg.com/ny/api/res/1.2/vCHcnm7zz2uZMzER88NUIA--/YXBwaWQ9aGlnaGxhbmRlcjt3PTk2MDtoPTQ0NDtjZj13ZWJw/https://nerdist.com/wp-content/uploads/2019/03/tumblr_o9pm5bI1Kc1sbtt2jo3_540.gif)]
---
 .storybook/preview.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 3ebfdddd45..7c708e772a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -62,4 +62,8 @@ export const parameters = {
       defaultValue: defaultCanvasTheme,
     },
   },
+  // Make stories available to our internal code sandbox tool
+  tesseract: {
+    enable: true 
+  }
 };