@workday/canvas-kit-docs 16.1.4 → 16.2.0-0612-next.0

package/dist/es6/lib/specs.js

@@ -1491,26 +1491,6 @@ module.exports = {specifications: [
               {
                 "type": "it",
                 "name": "should not have any axe errors"
-              },
-              {
-                "type": "describe",
-                "name": "when the form is submitted with an empty required select",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should focus the first invalid field"
-                  }
-                ]
-              },
-              {
-                "type": "describe",
-                "name": "when a later required field is empty",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should focus the first invalid field"
-                  }
-                ]
               }
             ]
           }
@@ -5237,6 +5217,210 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "SelectionGroup",
+    "children": [
+      {
+        "type": "describe",
+        "name": "SelectionGroup",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the  story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the Basic story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should render a radiogroup"
+              },
+              {
+                "type": "it",
+                "name": "should start with nothing selected"
+              },
+              {
+                "type": "describe",
+                "name": "when an item is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should select that item"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should deselect the item when another is clicked"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when navigating with the keyboard",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should move focus to the next item with the right arrow key"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should move selection along with focus, as a radio group does"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have a single tab stop for the whole group"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the MultiSelect story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should keep every item in the tab order, as a checkbox group does"
+              },
+              {
+                "type": "it",
+                "name": "should allow more than one item to be selected"
+              },
+              {
+                "type": "it",
+                "name": "should deselect an item when it is clicked again"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the Disabled story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should disable every item when the whole group is disabled"
+              },
+              {
+                "type": "it",
+                "name": "should only disable the non-interactive item in a partially disabled group"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the EqualWidth story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should render every item at the same width"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the Error story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should mark the group as invalid"
+              },
+              {
+                "type": "it",
+                "name": "should associate the hint text with the group"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "SidePanel",

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.1.4",
-    "@workday/canvas-kit-preview-react": "16.1.4",
-    "@workday/canvas-kit-react": "16.1.4",
-    "@workday/canvas-kit-react-fonts": "^16.1.4",
-    "@workday/canvas-kit-styling": "16.1.4",
+    "@workday/canvas-kit-labs-react": "16.1.2",
+    "@workday/canvas-kit-preview-react": "16.1.2",
+    "@workday/canvas-kit-react": "16.1.2",
+    "@workday/canvas-kit-react-fonts": "^16.1.2",
+    "@workday/canvas-kit-styling": "16.1.2",
     "@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.1.4",
-    "@workday/canvas-kit-preview-react": "16.1.4",
-    "@workday/canvas-kit-react": "16.1.4",
-    "@workday/canvas-kit-react-fonts": "^16.1.4",
-    "@workday/canvas-kit-styling": "16.1.4",
+    "@workday/canvas-kit-labs-react": "16.1.2",
+    "@workday/canvas-kit-preview-react": "16.1.2",
+    "@workday/canvas-kit-react": "16.1.2",
+    "@workday/canvas-kit-react-fonts": "^16.1.2",
+    "@workday/canvas-kit-styling": "16.1.2",
     "@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/accessibility/AccessibilityOverview.mdx

@@ -86,9 +86,7 @@ Further reading:
 ```
 
 Check out our [Aria Live Region Examples](?path=/docs/guides-accessibility-aria-live-regions--docs)
-for more detailed information about this topic. For labels, error text, `aria-invalid`, and focus
-after a failed submit, see
-[Form Validation](?path=/docs/guides-accessibility-form-validation--docs).
+for more detailed information about this topic.
 
 Sometimes, things change on a webpage without the whole page reloading. Think of a live sports score
 that updates every few seconds or a search result that appears as you type. For users of screen

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

@@ -0,0 +1,135 @@
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import Caution from './examples/Caution';
+import ColumnWidth from './examples/ColumnWidth';
+import ContentWidth from './examples/ContentWidth';
+import Disabled from './examples/Disabled';
+import EqualWidth from './examples/EqualWidth';
+import Error from './examples/Error';
+import MultiSelect from './examples/MultiSelect';
+import RTL from './examples/RTL';
+import SingleSelect from './examples/SingleSelect';
+
+
+# Canvas Kit Selection Group
+
+Selection Group is a
+[compound component](/getting-started/for-developers/resources/compound-components/) that lets users
+select one or more options from a predefined list using chip-style controls with a lightweight glyph
+indicator.
+
+Reach for Selection Group instead of standard radio buttons or checkboxes when a larger, more
+scannable tap target and a lighter visual footprint are preferred. It works best with roughly seven
+or fewer options and short, concise labels.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Basic Example
+
+`SelectionGroup` includes a container `SelectionGroup` component and the following subcomponents:
+`SelectionGroup.List` and `SelectionGroup.Item`.
+
+<ExampleCodeBlock code={Basic} />
+
+### Single Select
+
+Use `mode="single"` to allow only one selection at a time. Single-select groups use a circle glyph
+and behave like a radio group: they have a single tab stop and arrow keys move both focus and
+selection.
+
+<ExampleCodeBlock code={SingleSelect} />
+
+### Multi Select
+
+Use `mode="multiple"` to allow more than one selection. Multi-select groups use a square glyph and
+behave like a checkbox group, where every item is its own tab stop. The group label must state that
+multiple selections are allowed.
+
+<ExampleCodeBlock code={MultiSelect} />
+
+### Width Variations
+
+All items within a group use the same sizing method — don't mix sizing methods within one group.
+
+#### Content Width
+
+Each item is sized to its own label, so items within a group may differ in width.
+
+<ExampleCodeBlock code={ContentWidth} />
+
+#### Equal Width
+
+Every item is sized to match the width of the longest label, so all items end up the same width.
+
+<ExampleCodeBlock code={EqualWidth} />
+
+#### Column Width
+
+Every item spans the full width of the column. Best for longer labels, or when the group is the
+primary input on the page.
+
+<ExampleCodeBlock code={ColumnWidth} />
+
+### Disabled
+
+Set the `disabled` prop on `SelectionGroup` to disable the entire group. To disable individual
+items, pass their ids to `nonInteractiveIds` so that keyboard navigation skips over them as well.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Error
+
+Notification states apply to the whole group rather than to individual items. Wrapping the group in
+a `FormField` with `error="error"` applies the error state and associates the hint text with the
+group. This is the recommended approach, because `FormField` also renders the visible hint text,
+sets `aria-invalid`, and points the group's `aria-describedby` at that text.
+
+You can set `error="error"` directly on `SelectionGroup` when you aren't using `FormField`, but the
+prop only changes the group's border color. Color on its own is not an accessible way to
+communicate a notification state, so pair it with your own visible text and pass that element's id
+to `aria-describedby` on `SelectionGroup`.
+
+<ExampleCodeBlock code={Error} />
+
+### Caution
+
+<ExampleCodeBlock code={Caution} />
+
+### Right-to-Left (RTL)
+
+`SelectionGroup` supports right-to-left languages when specified in the `CanvasProvider` `theme` or
+via the `dir` attribute on a parent element.
+
+<ExampleCodeBlock code={RTL} />
+
+## Accessibility
+
+- Single-select groups render `role="radiogroup"` with `role="radio"` items and `aria-checked`, and
+  follow the [radio group keyboard pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/): one
+  tab stop for the group, with arrow keys moving focus and selection together.
+- Multi-select groups render `role="group"` with `role="checkbox"` items and `aria-checked`, and
+  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.
+- `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.
+- 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.
+
+## Component API
+
+<SymbolDoc name="SelectionGroup" fileName="/labs-react/" />
+
+## Specifications
+
+<Specifications file="./cypress/component/SelectionGroup.spec.tsx" name="SelectionGroup" />

package/dist/mdx/labs-react/selection-group/examples/Basic.tsx

@@ -0,0 +1,11 @@
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+
+export default () => (
+  <SelectionGroup mode="single">
+    <SelectionGroup.List aria-label="Preferred contact method (select one)">
+      <SelectionGroup.Item data-id="email">Email</SelectionGroup.Item>
+      <SelectionGroup.Item data-id="phone">Phone</SelectionGroup.Item>
+      <SelectionGroup.Item data-id="text">Text Message</SelectionGroup.Item>
+    </SelectionGroup.List>
+  </SelectionGroup>
+);

package/dist/mdx/labs-react/selection-group/examples/Caution.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [selected, setSelected] = React.useState(['deep-dish']);
+
+  return (
+    <FormField error="caution" as="fieldset">
+      <FormField.Label as="legend">Select Your Pizza Crust (Select one)</FormField.Label>
+      <FormField.Input
+        as={SelectionGroup}
+        mode="single"
+        selectedIds={selected}
+        onSelect={data => setSelected([data.id])}
+      >
+        <SelectionGroup.List aria-label="Pizza crust options (select one)">
+          <SelectionGroup.Item data-id="deep-dish">Deep Dish</SelectionGroup.Item>
+          <SelectionGroup.Item data-id="thin">Thin</SelectionGroup.Item>
+          <SelectionGroup.Item data-id="gluten-free">Gluten Free</SelectionGroup.Item>
+        </SelectionGroup.List>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is an extra $2.99</FormField.Hint>
+    </FormField>
+  );
+};

package/dist/mdx/labs-react/selection-group/examples/ColumnWidth.tsx

@@ -0,0 +1,17 @@
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+
+export default () => (
+  <SelectionGroup mode="single" width="column" initialSelectedIds={['option-a']}>
+    <SelectionGroup.List aria-label="Column width selection group (select one)">
+      <SelectionGroup.Item data-id="option-a">
+        Option A with a longer descriptive label
+      </SelectionGroup.Item>
+      <SelectionGroup.Item data-id="option-b">
+        Option B with a longer descriptive label
+      </SelectionGroup.Item>
+      <SelectionGroup.Item data-id="option-c">
+        Option C with a longer descriptive label
+      </SelectionGroup.Item>
+    </SelectionGroup.List>
+  </SelectionGroup>
+);

package/dist/mdx/labs-react/selection-group/examples/ContentWidth.tsx

@@ -0,0 +1,11 @@
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+
+export default () => (
+  <SelectionGroup mode="single" width="content" initialSelectedIds={['short']}>
+    <SelectionGroup.List aria-label="Content width selection group (select one)">
+      <SelectionGroup.Item data-id="short">Short</SelectionGroup.Item>
+      <SelectionGroup.Item data-id="medium-length">Medium Length</SelectionGroup.Item>
+      <SelectionGroup.Item data-id="a-much-longer-label">A Much Longer Label</SelectionGroup.Item>
+    </SelectionGroup.List>
+  </SelectionGroup>
+);

package/dist/mdx/labs-react/selection-group/examples/Disabled.tsx

@@ -0,0 +1,33 @@
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => (
+  <>
+    <BodyText size="small" cs={{marginBlockEnd: system.gap.xs}}>
+      The whole group is disabled
+    </BodyText>
+    <SelectionGroup mode="single" disabled initialSelectedIds={['option-a']}>
+      <SelectionGroup.List aria-label="Fully disabled selection group (select one)">
+        <SelectionGroup.Item data-id="option-a">Option A</SelectionGroup.Item>
+        <SelectionGroup.Item data-id="option-b">Option B</SelectionGroup.Item>
+        <SelectionGroup.Item data-id="option-c">Option C</SelectionGroup.Item>
+      </SelectionGroup.List>
+    </SelectionGroup>
+
+    <BodyText size="small" cs={{marginBlockStart: system.gap.md, marginBlockEnd: system.gap.xs}}>
+      A single item is disabled
+    </BodyText>
+    <SelectionGroup
+      mode="single"
+      nonInteractiveIds={['option-c']}
+      initialSelectedIds={['option-a']}
+    >
+      <SelectionGroup.List aria-label="Partially disabled selection group (select one)">
+        <SelectionGroup.Item data-id="option-a">Option A</SelectionGroup.Item>
+        <SelectionGroup.Item data-id="option-b">Option B</SelectionGroup.Item>
+        <SelectionGroup.Item data-id="option-c">Option C</SelectionGroup.Item>
+      </SelectionGroup.List>
+    </SelectionGroup>
+  </>
+);

package/dist/mdx/labs-react/selection-group/examples/EqualWidth.tsx

@@ -0,0 +1,11 @@
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+
+export default () => (
+  <SelectionGroup mode="single" width="equal" initialSelectedIds={['short']}>
+    <SelectionGroup.List aria-label="Equal width selection group (select one)">
+      <SelectionGroup.Item data-id="short">Short</SelectionGroup.Item>
+      <SelectionGroup.Item data-id="medium-length">Medium Length</SelectionGroup.Item>
+      <SelectionGroup.Item data-id="a-much-longer-label">A Much Longer Label</SelectionGroup.Item>
+    </SelectionGroup.List>
+  </SelectionGroup>
+);

package/dist/mdx/labs-react/selection-group/examples/Error.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default () => {
+  const [selected, setSelected] = React.useState<string[]>([]);
+
+  return (
+    <FormField error="error" as="fieldset">
+      <FormField.Label as="legend">Select Your Pizza Crust (Select one)</FormField.Label>
+      <FormField.Input
+        as={SelectionGroup}
+        mode="single"
+        selectedIds={selected}
+        onSelect={data => setSelected([data.id])}
+      >
+        <SelectionGroup.List aria-label="Pizza crust options (select one)">
+          <SelectionGroup.Item data-id="deep-dish">Deep Dish</SelectionGroup.Item>
+          <SelectionGroup.Item data-id="thin">Thin</SelectionGroup.Item>
+          <SelectionGroup.Item data-id="gluten-free">Gluten Free</SelectionGroup.Item>
+        </SelectionGroup.List>
+      </FormField.Input>
+      <FormField.Hint>Please select a crust to continue</FormField.Hint>
+    </FormField>
+  );
+};

package/dist/mdx/labs-react/selection-group/examples/MultiSelect.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const [selected, setSelected] = React.useState<string[]>(['monday']);
+
+  const handleSelect = (data: {id: string}) => {
+    setSelected(previous =>
+      previous.includes(data.id) ? previous.filter(id => id !== data.id) : previous.concat(data.id)
+    );
+  };
+
+  return (
+    <>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Available Days (Select all that apply)</FormField.Label>
+        <FormField.Input
+          as={SelectionGroup}
+          mode="multiple"
+          selectedIds={selected}
+          onSelect={handleSelect}
+        >
+          <SelectionGroup.List aria-label="Available days (select all that apply)">
+            <SelectionGroup.Item data-id="monday">Monday</SelectionGroup.Item>
+            <SelectionGroup.Item data-id="tuesday">Tuesday</SelectionGroup.Item>
+            <SelectionGroup.Item data-id="wednesday">Wednesday</SelectionGroup.Item>
+            <SelectionGroup.Item data-id="thursday">Thursday</SelectionGroup.Item>
+            <SelectionGroup.Item data-id="friday">Friday</SelectionGroup.Item>
+          </SelectionGroup.List>
+        </FormField.Input>
+      </FormField>
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
+        Selected: {selected.join(', ') || 'None'}
+      </BodyText>
+    </>
+  );
+};

package/dist/mdx/labs-react/selection-group/examples/RTL.tsx

@@ -0,0 +1,13 @@
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+
+export default () => (
+  <div dir="rtl">
+    <SelectionGroup mode="single" initialSelectedIds={['option-b']}>
+      <SelectionGroup.List aria-label="اختر واحدا">
+        <SelectionGroup.Item data-id="option-a">الخيار أ</SelectionGroup.Item>
+        <SelectionGroup.Item data-id="option-b">الخيار ب</SelectionGroup.Item>
+        <SelectionGroup.Item data-id="option-c">الخيار ج</SelectionGroup.Item>
+      </SelectionGroup.List>
+    </SelectionGroup>
+  </div>
+);

package/dist/mdx/labs-react/selection-group/examples/SingleSelect.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {SelectionGroup} from '@workday/canvas-kit-labs-react/selection-group';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const [selected, setSelected] = React.useState('email');
+
+  return (
+    <>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Preferred Contact Method (Select one)</FormField.Label>
+        <FormField.Input
+          as={SelectionGroup}
+          mode="single"
+          selectedIds={[selected]}
+          onSelect={data => setSelected(data.id)}
+        >
+          <SelectionGroup.List aria-label="Preferred contact method (select one)">
+            <SelectionGroup.Item data-id="email">Email</SelectionGroup.Item>
+            <SelectionGroup.Item data-id="phone">Phone</SelectionGroup.Item>
+            <SelectionGroup.Item data-id="text">Text Message</SelectionGroup.Item>
+          </SelectionGroup.List>
+        </FormField.Input>
+      </FormField>
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
+        Selected: {selected}
+      </BodyText>
+    </>
+  );
+};