feat(menu)!: Add MenuOption and convert to MenuItem to Stencil (#2969)

Adds the `Menu.Option` component for actionability (`Menu.Item`) vs selection (`Menu.Option`) and converts `Menu.Item` to use a Stencil.

[category:Components]

### BREAKING CHANGES
We've removed the `MenuItemProps` export from `@workday/canvas-kit-react/menu`. Use `ExtractProps<typeof Menu.Item, never>` instead. We don't mean to export prop interfaces of polymorphic components. The `never` means "don't add element props". The second parameter is used to pass the interface that the `as` prop is pointing to.

Author: NicholasBoll

cypress/component/Autocomplete.spec.tsx

@@ -96,8 +96,8 @@ describe('Autocomplete', () => {
           cy.findAllByRole('option').eq(0).should('not.have.class', 'focus');
         });
 
-        it('should not set aria-selected to the first option', () => {
-          cy.findAllByRole('option').eq(0).should('have.not.attr', 'aria-selected');
+        it('should set aria-selected=false to the first option', () => {
+          cy.findAllByRole('option').eq(0).should('have.attr', 'aria-selected', 'false');
         });
       });
 

cypress/component/Select.spec.tsx

@@ -117,7 +117,10 @@ describe('Select', () => {
 
             context('the menu', () => {
               it('should scroll so that the "San Francisco (United States)" option is fully visible', () => {
-                cy.findByText('San Francisco (United States)').should('have.class', 'focus');
+                cy.findByRole('option', {name: 'San Francisco (United States)'}).should(
+                  'have.class',
+                  'focus'
+                );
               });
             });
           });
@@ -130,7 +133,10 @@ describe('Select', () => {
 
             context('the menu', () => {
               it('should scroll so that the "San Mateo (United States)" option is fully visible', () => {
-                cy.findByText('San Mateo (United States)').should('have.class', 'focus');
+                cy.findByRole('option', {name: 'San Mateo (United States)'}).should(
+                  'have.class',
+                  'focus'
+                );
               });
             });
           });
@@ -143,7 +149,10 @@ describe('Select', () => {
 
             context('the menu', () => {
               it('should scroll so that the "Dallas (United States)" option is fully visible', () => {
-                cy.findByText('Dallas (United States)').should('have.class', 'focus');
+                cy.findByRole('option', {name: 'Dallas (United States)'}).should(
+                  'have.class',
+                  'focus'
+                );
               });
             });
           });
@@ -160,7 +169,10 @@ describe('Select', () => {
 
             context('the menu', () => {
               it('should set assistive focus to the "San Francisco (United States)" option', () => {
-                cy.findByText('San Francisco (United States)').should('have.class', 'focus');
+                cy.findByRole('option', {name: 'San Francisco (United States)'}).should(
+                  'have.class',
+                  'focus'
+                );
               });
             });
           });
@@ -172,7 +184,10 @@ describe('Select', () => {
 
             context('the select input', () => {
               it('should set assistive focus to the "San Francisco (United States)" option', () => {
-                cy.findByText('San Francisco (United States)').should('have.class', 'focus');
+                cy.findByRole('option', {name: 'San Francisco (United States)'}).should(
+                  'have.class',
+                  'focus'
+                );
               });
             });
           });
@@ -185,7 +200,10 @@ describe('Select', () => {
 
             context('the select input', () => {
               it('should set assistive focus to the "San Mateo (United States)" option', () => {
-                cy.findByText('San Mateo (United States)').should('have.class', 'focus');
+                cy.findByRole('option', {name: 'San Mateo (United States)'}).should(
+                  'have.class',
+                  'focus'
+                );
               });
             });
           });
@@ -203,7 +221,10 @@ describe('Select', () => {
 
           context('the menu', () => {
             it('should scroll so that the "Dallas (United States)" option is centered in view', () => {
-              cy.findByText('Dallas (United States)').should('have.class', 'focus');
+              cy.findByRole('option', {name: 'Dallas (United States)'}).should(
+                'have.class',
+                'focus'
+              );
             });
           });
         });
@@ -423,8 +444,8 @@ describe('Select', () => {
       });
       context('when Boulder is reached via the arrow key', () => {
         it('should show Boulder (United States)', () => {
-          cy.findByText('Boulder (United States)').should('have.class', 'focus');
-          cy.findByText('Boulder (United States)').should('be.visible');
+          cy.findByRole('option', {name: 'Boulder (United States)'}).should('have.class', 'focus');
+          cy.findByRole('option', {name: 'Boulder (United States)'}).should('be.visible');
         });
       });
     });
@@ -483,7 +504,7 @@ describe('Select', () => {
       context(`when the "Phone" option (with the value "phone") is clicked`, () => {
         beforeEach(() => {
           cy.findByLabelText('Contact');
-          cy.findByText('Phone').click();
+          cy.findByRole('option', {name: 'Phone'}).click();
         });
 
         context('the select input', () => {
@@ -509,7 +530,7 @@ describe('Select', () => {
 
           context('the menu', () => {
             it('should set assistive focus to the "Phone" option', () => {
-              cy.findByText('Phone').should('have.class', 'focus');
+              cy.findByRole('option', {name: 'Phone'}).should('have.class', 'focus');
             });
           });
         });

modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -46,6 +46,7 @@ A note to the reader:
   - [Form Field](#form-field)
     - [Form Field Group](#form-field-group)
     - [Form Field Field](#form-field-field)
+  - [Menu Item](#menu-item)
   - [Search Form](#search-form)
   - [Select](#select)
   - [Text Area](#text-area)
@@ -375,6 +376,26 @@ this sub-component when using `FormField`. This component also exists on `FormFi
 </FormField>
 ```
 
+### Menu Item
+
+**PR: ** [2969](https://github.com/Workday/canvas-kit/pull/2969)
+
+`Menu.Item` was converted to use Stencils for styling and uses SystemIcon stencil variables to
+change icon color instead of deeply nested selectors. We also added `Menu.Option` component for
+menus that have a selected visual state. `Menu.Option` will need more accessibility affordances that
+depend on the nature of your use of the `Menu` component. For example, `<Combobox>` and `<Select>`
+use `Menu.Option` and add keyboard events and `aria-*` attributes to function according to w3c
+specifications.
+
+We've deprecated the `isDisabled` prop. It didn't do anything in v10 or v11. It was part of the
+preview Menu deprecation, but was never hooked up. We mapped it to `aria-disabled` and added a
+deprecation comment to use `aria-disabled` instead.
+
+We've removed the `MenuItemProps` export from `@workday/canvas-kit-react/menu`. Use
+`ExtractProps<typeof Menu.Item, never>` instead. We don't mean to export prop interfaces of
+polymorphic components. The `never` means "don't add element props". The second parameter is used to
+pass the interface that the `as` prop is pointing to.
+
 ### Search Form (Labs)
 
 **PRs:** [#2934](https://github.com/Workday/canvas-kit/pull/2934),

modules/labs-react/combobox/lib/Combobox.tsx

@@ -282,7 +282,7 @@ export const Combobox = ({
     event: React.SyntheticEvent<Element, Event>,
     menuItemProps: any
   ): void => {
-    if (menuItemProps.isDisabled) {
+    if (menuItemProps.isDisabled || menuItemProps['aria-disabled']) {
       return;
     }
     setShowingAutocomplete(false);
@@ -390,7 +390,7 @@ export const Combobox = ({
         if (selectedAutocompleteIndex != null) {
           const item = interactiveAutocompleteItems[selectedAutocompleteIndex];
           handleAutocompleteClick(event, item.props);
-          if (item.props.isDisabled) {
+          if (item.props.isDisabled || item.props['aria-disabled']) {
             nextIndex = selectedAutocompleteIndex;
           }
           event.stopPropagation();

modules/labs-react/combobox/spec/Combobox.spec.tsx

@@ -152,7 +152,7 @@ describe('Combobox', () => {
     const menuText = 'menuText';
     const id = 'my-id';
     const autocompleteItems = [
-      <StyledMenuItem isDisabled={true} onClick={cb}>
+      <StyledMenuItem aria-disabled={true} onClick={cb}>
         {menuText}
       </StyledMenuItem>,
     ];

modules/labs-react/combobox/stories/examples/Basic.tsx

@@ -1,18 +1,19 @@
 import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   Combobox,
   ComboboxProps,
   ComboBoxMenuItemGroup,
 } from '@workday/canvas-kit-labs-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 const autocompleteResult = (
   textModifier: number,
   disabled: boolean
-): ReactElement<MenuItemProps> => (
-  <StyledMenuItem isDisabled={disabled}>
+): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
+  <StyledMenuItem aria-disabled={disabled}>
     Result
     <span>
       num<span>ber</span>

modules/labs-react/combobox/stories/examples/DisabledItem.tsx

@@ -1,18 +1,19 @@
 import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   Combobox,
   ComboboxProps,
   ComboBoxMenuItemGroup,
 } from '@workday/canvas-kit-labs-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 const autocompleteResult = (
   textModifier: number,
   disabled: boolean
-): ReactElement<MenuItemProps> => (
-  <StyledMenuItem isDisabled={disabled}>
+): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
+  <StyledMenuItem aria-disabled={disabled}>
     Result
     <span>
       num<span>ber</span>

modules/labs-react/combobox/stories/examples/GroupOfResult.tsx

@@ -1,18 +1,19 @@
 import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   Combobox,
   ComboboxProps,
   ComboBoxMenuItemGroup,
 } from '@workday/canvas-kit-labs-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 const autocompleteResult = (
   textModifier: number,
   disabled: boolean
-): ReactElement<MenuItemProps> => (
-  <StyledMenuItem isDisabled={disabled}>
+): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
+  <StyledMenuItem aria-disabled={disabled}>
     Result{' '}
     <span>
       num<span>ber</span>

modules/labs-react/combobox/stories/examples/Grow.tsx

@@ -1,18 +1,19 @@
 import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   Combobox,
   ComboboxProps,
   ComboBoxMenuItemGroup,
 } from '@workday/canvas-kit-labs-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 const autocompleteResult = (
   textModifier: number,
   disabled: boolean
-): ReactElement<MenuItemProps> => (
-  <StyledMenuItem isDisabled={disabled}>
+): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
+  <StyledMenuItem aria-disabled={disabled}>
     Result
     <span>
       num<span>ber</span>

modules/labs-react/combobox/stories/examples/NoClearButton.tsx

@@ -1,18 +1,19 @@
 import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
+import {ExtractProps} from '@workday/canvas-kit-react/common';
 import {
   Combobox,
   ComboboxProps,
   ComboBoxMenuItemGroup,
 } from '@workday/canvas-kit-labs-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 const autocompleteResult = (
   textModifier: number,
   disabled: boolean
-): ReactElement<MenuItemProps> => (
-  <StyledMenuItem isDisabled={disabled}>
+): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
+  <StyledMenuItem aria-disabled={disabled}>
     Result
     <span>
       num<span>ber</span>