@workday/canvas-kit-docs 12.0.0-alpha.906-next.0 → 12.0.0-alpha.908-next.0

package/dist/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -44,6 +44,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)
@@ -373,6 +374,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),

package/dist/mdx/labs-react/combobox/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>

package/dist/mdx/labs-react/combobox/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>

package/dist/mdx/labs-react/combobox/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>

package/dist/mdx/labs-react/combobox/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>

package/dist/mdx/labs-react/combobox/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>

package/dist/mdx/labs-react/combobox/examples/RTL.tsx

@@ -5,14 +5,14 @@ import {
   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';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider, ContentDirection, ExtractProps} from '@workday/canvas-kit-react/common';
 
 const autocompleteResult = (
   textModifier: number,
   disabled: boolean
-): ReactElement<MenuItemProps> => (
+): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
   <StyledMenuItem isDisabled={disabled}>
     Result
     <span>

package/dist/mdx/react/menu/Menu.mdx

@@ -2,6 +2,7 @@ import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-d
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import Icons from './examples/Icons';
+import SelectableMenu from './examples/SelectableMenu';
 
 # Canvas Kit Menu
 
@@ -55,6 +56,19 @@ about the text of the item.
 
 <ExampleCodeBlock code={Icons} />
 
+### Selectable Menu
+
+The `Menu.Item` renders a `role=menuitem` element which does not have `aria-selected` and thus no
+selected state. If you wish your menu to have selectable menu items, use `Menu.Option` instead of
+`Menu.Item`. The `Menu.Option` is meant to be used when the `Menu.Card` has a role of `listbox` and
+is controlled via `aria-activedescendant`. This example uses `Menu.Option` to should what the
+checkmark looks like, but the example is not keyboard or screen reader accessible. There are many
+other behaviors that need to be composed into the `Menu.Target` and `Menu.List` components and the
+behaviors depend on many other things. To see a full example of all these behaviors, look at the
+`<Combobox>` and `<Select>` component source code as examples.
+
+<ExampleCodeBlock code={SelectableMenu} />
+
 ## Component API
 
 <SymbolDoc name="Menu" fileName="/react/" />

package/dist/mdx/react/menu/examples/SelectableMenu.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <Menu onSelect={data => setSelected(data.id)}>
+      <Menu.Target>Open Menu</Menu.Target>
+      <Menu.Popper>
+        <Menu.Card role="listbox">
+          <Menu.List as="ul">
+            <Menu.Option>First Item</Menu.Option>
+            <Menu.Option>Second Item</Menu.Option>
+            <Menu.Divider />
+            <Menu.Option>Third Item (with a really, really, really long label)</Menu.Option>
+            <Menu.Option aria-disabled>Fourth Item</Menu.Option>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" marginTop="s">
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.906-next.0",
+  "version": "12.0.0-alpha.908-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": "^12.0.0-alpha.906-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.906-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.906-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.906-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.908-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.908-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.908-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.908-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": "4.9"
   },
-  "gitHead": "b796b56840b04395e0b4f4d643cad66be4103936"
+  "gitHead": "96aa087e44d928f9b530e0133be4326b8ff2fdce"
 }