@workday/canvas-kit-docs 7.3.12 → 7.4.0-next.0

package/dist/commonjs/lib/specs.js

@@ -1509,6 +1509,20 @@ module.exports = {specifications: [
                       }
                     ]
                   },
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should have aria-expanded set to false"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not show a menu"
+                      }
+                    ]
+                  },
                   {
                     "type": "describe",
                     "name": "when the user types a printable character \"t\"",

package/dist/es6/lib/specs.js

@@ -1509,6 +1509,20 @@ module.exports = {specifications: [
                       }
                     ]
                   },
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should have aria-expanded set to false"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not show a menu"
+                      }
+                    ]
+                  },
                   {
                     "type": "describe",
                     "name": "when the user types a printable character \"t\"",

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

@@ -5,6 +5,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';
 
 
@@ -72,6 +73,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} />

package/dist/mdx/preview-react/menu/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 default () => {
+  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>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.3.12",
+  "version": "7.4.0-next.0+e138a7b2",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.3.12"
+    "@workday/canvas-kit-react": "^7.4.0-next.0+e138a7b2"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "b9c928b833e0e0e56493c9329dca77191645ab3d"
+  "gitHead": "e138a7b26bdec0a480cf9b5229a33fb4b33765dc"
 }