@workday/canvas-kit-docs 16.2.11 → 16.2.14

package/dist/es6/lib/docs.js

@@ -132365,13 +132365,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "kind": "property",
           "name": "children",
-          "required": true,
+          "required": false,
           "type": {
             "kind": "external",
             "name": "ReactNode",
             "url": "https://reactjs.org/docs/rendering-elements.html"
           },
-          "description": "The contents of the action item. This will be the accessible name of the action for screen readers.\n\n```tsx\n<ActionBar.Item>First Action</ActionBar.Item>\n```",
+          "description": "The contents of the action item. This will be the accessible name of the action for screen readers.\nOmit it to render an icon-only button, and provide an `aria-label` instead.\n\n```tsx\n<ActionBar.Item>First Action</ActionBar.Item>\n<ActionBar.Item icon={trashIcon} aria-label=\"Delete\" />\n```",
           "declarations": [
             {
               "name": "children",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.2.11",
-    "@workday/canvas-kit-preview-react": "16.2.11",
-    "@workday/canvas-kit-react": "16.2.11",
-    "@workday/canvas-kit-react-fonts": "^16.2.11",
-    "@workday/canvas-kit-styling": "16.2.11",
+    "@workday/canvas-kit-labs-react": "16.2.14",
+    "@workday/canvas-kit-preview-react": "16.2.14",
+    "@workday/canvas-kit-react": "16.2.14",
+    "@workday/canvas-kit-react-fonts": "^16.2.14",
+    "@workday/canvas-kit-styling": "16.2.14",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.2.11",
-    "@workday/canvas-kit-preview-react": "16.2.11",
-    "@workday/canvas-kit-react": "16.2.11",
-    "@workday/canvas-kit-react-fonts": "^16.2.11",
-    "@workday/canvas-kit-styling": "16.2.11",
+    "@workday/canvas-kit-labs-react": "16.2.14",
+    "@workday/canvas-kit-preview-react": "16.2.14",
+    "@workday/canvas-kit-react": "16.2.14",
+    "@workday/canvas-kit-react-fonts": "^16.2.14",
+    "@workday/canvas-kit-styling": "16.2.14",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/mdx/labs-react/accessory/Accessory.mdx

@@ -101,7 +101,7 @@ at `medium`, `large`, and `extraLarge`. `outline` adds a default border at those
 
 <ExampleCodeBlock code={Variants} />
 
-### Accessibility
+## Accessibility
 
 Accessory components are presentational and always `aria-hidden`. Images use an empty `alt` because
 assistive technology does not see content inside that tile. Name the item in adjacent text instead
@@ -109,28 +109,16 @@ of on the accessory. They are not buttons and do not take click or keyboard hand
 
 ## Component API
 
-### Accessory
-
 <SymbolDoc name="Accessory" fileName="/labs-react/" />
 
-### AccessoryIcon
-
 <SymbolDoc name="AccessoryIcon" fileName="/labs-react/" />
 
-### AccessoryFile
-
 <SymbolDoc name="AccessoryFile" fileName="/labs-react/" />
 
-### AccessoryMedia
-
 <SymbolDoc name="AccessoryMedia" fileName="/labs-react/" />
 
-### AccessoryFavicon
-
 <SymbolDoc name="AccessoryFavicon" fileName="/labs-react/" />
 
-### AccessoryCalendar
-
 <SymbolDoc name="AccessoryCalendar" fileName="/labs-react/" />
 
 ## Specifications

package/dist/mdx/labs-react/selection-group/SelectionGroup.mdx

@@ -117,14 +117,17 @@ via the `dir` attribute on a parent element.
   follow the [checkbox keyboard pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/): every
   item is in the tab order and <kbd>Space</kbd> toggles it.
 - The icon always renders, in both modes and in both selected states. Selection is communicated by
-  the checkmark inside the icon _and_ a color change, never by color alone.
+  the checkmark inside the icon _and_ a color change, never by color alone. The icon is the
+  non-color state indicator and satisfies WCAG 1.4.1 (Use of Color).
 - `aria-invalid` is only set on a single-select group. The `group` role that a multi-select group
-  renders does not allow the attribute, so a multi-select group communicates its error state
-  through the text referenced by `aria-describedby`. Make sure that text names the problem.
+  renders does not allow the attribute, so a multi-select group communicates its error state through
+  the text referenced by `aria-describedby`. Make sure that text names the problem.
 - A group label is required. Provide it with `aria-label` or `aria-labelledby` on
   `SelectionGroup.List`, or wrap the group in a `FormField` with a visible label. The label must
   state the selection mode — "Select one" versus "Select all that apply" — so the mode is clear
-  before interacting.
+  before interacting and users relying on assistive technology or keyboard navigation aren't left
+  guessing before they interact.
+- Don't add a selected border. It conflicts with the focus indicator.
 
 ## Component API
 

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -1,6 +1,7 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import DeleteAction from './examples/DeleteAction';
+import IconOnly from './examples/IconOnly';
 import Icons from './examples/Icons';
 import OverflowActionBar from './examples/OverflowActionBar';
 import OverflowActionBarCustomButtonCount from './examples/OverflowActionBarCustomButtonCount';
@@ -39,6 +40,14 @@ with `ActionBar.Item` such as `icon` or `size`.
 
 <ExampleCodeBlock code={Icons} />
 
+### Icon-Only Example
+
+An `ActionBar.Item` can render an icon-only button by passing an `icon` without `children`. Because
+there is no visible text, provide an `aria-label` so the action has an accessible name. Wrapping the
+item in a [Tooltip](/components/popups/tooltip/) also shows the label to sighted users.
+
+<ExampleCodeBlock code={IconOnly} />
+
 ### Delete Action Example
 
 `ActionBar.Item` is a `SecondaryButton` by default but it's possible to change it to another

package/dist/mdx/react/action-bar/examples/IconOnly.tsx

@@ -0,0 +1,15 @@
+import {ActionBar} from '@workday/canvas-kit-react/action-bar';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {editIcon, trashIcon} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  return (
+    <ActionBar>
+      <ActionBar.List position="relative" as="section" aria-label="Icon-only Action Bar">
+        <ActionBar.Item as={PrimaryButton}>Save</ActionBar.Item>
+        <ActionBar.Item icon={editIcon} aria-label="Edit" />
+        <ActionBar.Item icon={trashIcon} aria-label="Delete" />
+      </ActionBar.List>
+    </ActionBar>
+  );
+};

package/dist/mdx/react/action-bar/examples/index.ts

@@ -1,5 +1,6 @@
 export {Basic} from './Basic';
 export {DeleteAction} from './DeleteAction';
+export {IconOnly} from './IconOnly';
 export {Icons} from './Icons';
 export {OverflowActionBar} from './OverflowActionBar';
 export {OverflowActionBarCustomButtonCount} from './OverflowActionBarCustomButtonCount';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.2.11",
+  "version": "16.2.14",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -32,7 +32,8 @@
     "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "timeout": 300000
   },
   "keywords": [
     "canvas",
@@ -47,10 +48,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.2.11",
-    "@workday/canvas-kit-preview-react": "^16.2.11",
-    "@workday/canvas-kit-react": "^16.2.11",
-    "@workday/canvas-kit-styling": "^16.2.11",
+    "@workday/canvas-kit-labs-react": "^16.2.14",
+    "@workday/canvas-kit-preview-react": "^16.2.14",
+    "@workday/canvas-kit-react": "^16.2.14",
+    "@workday/canvas-kit-styling": "^16.2.14",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +64,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "21b0c64e5227e1a6aa3208ad52495c8ae543aa55"
+  "gitHead": "534f0c35450d9cfe8cc544d83b265a18089c74a5"
 }