@workday/canvas-kit-docs 17.0.0-alpha.0613-next.0 → 17.0.0-alpha.0616-next.0

package/dist/es6/lib/specs.js

@@ -1491,6 +1491,26 @@ 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"
+                  }
+                ]
               }
             ]
           }

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.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-kit-labs-react": "16.1.3",
+    "@workday/canvas-kit-preview-react": "16.1.3",
+    "@workday/canvas-kit-react": "16.1.3",
+    "@workday/canvas-kit-react-fonts": "^16.1.3",
+    "@workday/canvas-kit-styling": "16.1.3",
     "@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.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-kit-labs-react": "16.1.3",
+    "@workday/canvas-kit-preview-react": "16.1.3",
+    "@workday/canvas-kit-react": "16.1.3",
+    "@workday/canvas-kit-react-fonts": "^16.1.3",
+    "@workday/canvas-kit-styling": "16.1.3",
     "@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,7 +86,9 @@ 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 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).
 
 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/preview-react/_examples/mdx/FormLibraryExample.mdx

@@ -1,7 +1,39 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
 import TextInputWithReactHookForm from './examples/TextInputWithReactHookForm';
 
 
-## Uncontrolled Text Inputs Using React Hook Form
+# Form Validation with React Hook Form and Yup
+
+Accessible form validation is not a library feature. It is a composition of **labels**, **error text
+tied to the field**, **`aria-invalid`**, and **keyboard focus**. Canvas Kit
+[`FormField`](?path=/docs/components-inputs-form-field--docs#accessibility) owns the first three
+when you use its subcomponents. The application owns when validation runs and where focus goes after
+submit.
+
+1. **Identify every field, including required ones** Set `autoComplete` with a
+   [standard token](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)
+   when the field collects a known personal data type (`username`, `current-password`, `email`,
+   `name`). That supports
+   [WCAG 1.3.5 Identify Input Purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html).
+2. **Move focus to the first invalid field after submit** Failed submit must not leave focus on the
+   submit button. Keyboard and screen-reader users need to land on the first field that is still
+   invalid, in **DOM order**.
+3. **Choose when to validate** Prefer validating **on submit**, then on **blur / touched** for
+   fields the user has already visited (`mode: 'onTouched'` in this example). Validating on every
+   keystroke while the field is still incomplete is noisy and can announce `aria-invalid` too early.
+   (Relevant criteria:
+   [3.3.1 Error Identification](https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html),
+   [3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html).)
+4. **Do not use a live region for every field error** Field errors belong on the field
+   (`aria-invalid` + `aria-describedby`). They are announced when the field **receives focus**. A
+   page-level live region that restates every invalid field on submit is easy to overdo. Live
+   announcements cannot be replayed, can interrupt, and have uneven support. If you add a form-level
+   summary, keep it short, do not duplicate every message, and read
+   [ARIA Live Regions](?path=/docs/guides-accessibility-aria-live-regions--docs) first.
+
+This example wires `FormField`, `TextInput`, `Select`, and `InputGroup` to
+[React Hook Form](https://www.react-hook-form.com/) with [Yup](https://github.com/jquense/yup). The
+same practices apply if you use Formik, a server round-trip, or hand-rolled state.
 
 <ExampleCodeBlock code={TextInputWithReactHookForm} />

package/dist/mdx/preview-react/_examples/mdx/examples/TextInputWithReactHookForm.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
-import {FieldErrorsImpl, useForm} from 'react-hook-form';
-import {SchemaOf, object, string} from 'yup';
+import {FieldErrors, Resolver, useForm} from 'react-hook-form';
+import {SchemaOf, ValidationError, object, string} from 'yup';
 
 import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {useUniqueId} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {ErrorType, useUniqueId} from '@workday/canvas-kit-react/common';
+import {
+  FormField,
+  useFormFieldInput,
+  useFormFieldModel,
+} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {visibleIcon, visibleStrikethroughIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
@@ -18,31 +23,30 @@ const styles = createStyles({
   alignItems: 'flex-start',
 });
 
-type YupValidationResolver = <T extends {}>(
-  validationSchema: SchemaOf<T>
-) => (data: T) => Promise<{values: T; errors: {}} | {values: {}; errors: FieldErrorsImpl<T>}>;
-
-const useYupValidationResolver: YupValidationResolver = validationSchema => {
-  return React.useCallback(
+const useYupValidationResolver = <T extends {}>(validationSchema: SchemaOf<T>): Resolver<T> => {
+  return React.useCallback<Resolver<T>>(
     async data => {
       try {
-        const values = await validationSchema.validate(data, {abortEarly: false});
-        return {values, errors: {}};
-      } catch (errors) {
-        return {
-          values: {},
-          //@ts-ignore
-          errors: errors.inner.reduce(
-            (allErrors, currentError) => ({
-              ...allErrors,
-              [currentError.path]: {
-                type: currentError.type ?? 'validation',
-                message: currentError.message,
-              },
-            }),
-            {}
-          ),
-        };
+        await validationSchema.validate(data, {abortEarly: false});
+        return {values: data, errors: {}};
+      } catch (error) {
+        // Yup throws a `ValidationError` for failed validation. Anything else is a real error.
+        if (!ValidationError.isError(error)) {
+          throw error;
+        }
+
+        const errors = error.inner.reduce<Record<string, {type: string; message: string}>>(
+          (allErrors, currentError) => ({
+            ...allErrors,
+            [currentError.path ?? '']: {
+              type: currentError.type ?? 'validation',
+              message: currentError.message,
+            },
+          }),
+          {}
+        );
+
+        return {values: {}, errors: errors as FieldErrors<T>};
       }
     },
     [validationSchema]
@@ -74,6 +78,9 @@ const options = [
 ];
 
 export default () => {
+  const formRef = React.useRef<HTMLFormElement>(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [submitAttempt, setSubmitAttempt] = React.useState(0);
   const {
     handleSubmit,
     register,
@@ -84,19 +91,36 @@ export default () => {
       password: 'foobarbaz',
       role: '',
     },
-    resolver: useYupValidationResolver(validationSchema),
+    resolver: useYupValidationResolver<LoginSchema>(validationSchema),
     mode: 'onTouched',
+    shouldFocusError: true,
   });
 
-  const onSubmit = handleSubmit(values => {
-    setShowPassword(false);
-    // Send data to server
-    setTimeout(() => {
-      alert(JSON.stringify(values, null, 2));
-    }, 0);
-  });
+  const onSubmit = handleSubmit(
+    values => {
+      setShowPassword(false);
+      // Send data to server
+      setTimeout(() => {
+        alert(JSON.stringify(values, null, 2));
+      }, 0);
+    },
+    () => {
+      // Count failed submits so we can move focus after FormField paints `aria-invalid`.
+      setSubmitAttempt(count => count + 1);
+    }
+  );
+
+  React.useEffect(() => {
+    if (submitAttempt === 0) {
+      return;
+    }
+
+    const firstInvalidField = formRef.current?.querySelector<HTMLElement>(
+      '[aria-invalid="true"]:not([aria-hidden="true"]):not([tabindex="-1"])'
+    );
+    firstInvalidField?.focus();
+  }, [submitAttempt, errors]);
 
-  const [showPassword, setShowPassword] = React.useState(false);
   const passwordId = useUniqueId();
   const passwordRef = React.useRef<HTMLInputElement | null>(null);
   const {ref: passwordCallbackRef, ...passwordRegistration} = register('password');
@@ -104,8 +128,15 @@ export default () => {
     passwordCallbackRef(ref);
     passwordRef.current = ref;
   };
+  // `InputGroup` renders the input, so hoist the model to keep the label, hint, and error wiring.
+  const passwordModel = useFormFieldModel({
+    id: passwordId,
+    isRequired: true,
+    error: errors.password ? 'error' : undefined,
+  });
+  const passwordInputProps = useFormFieldInput(passwordModel);
   return (
-    <form onSubmit={onSubmit} action="." noValidate={true}>
+    <form ref={formRef} onSubmit={onSubmit} action="." noValidate={true}>
       <Flex cs={styles}>
         <FormField
           orientation="vertical"
@@ -143,35 +174,33 @@ export default () => {
           </FormField.Field>
           <FormField.Hint>{errors.email?.message}</FormField.Hint>
         </FormField>
-        <FormField
-          orientation="vertical"
-          id={passwordId}
-          isRequired={true}
-          error={!!errors.password ? 'error' : undefined}
-        >
+        <FormField model={passwordModel} orientation="vertical">
           <FormField.Label>Password</FormField.Label>
-          <Flex cs={{gap: system.gap.md}}>
-            <FormField.Field>
-              <FormField.Input
-                as={TextInput}
-                {...passwordRegistration}
-                type={showPassword ? 'text' : 'password'}
-                autoComplete="current-password"
-                spellCheck={false}
-                ref={combinePasswordRef}
-              />
-            </FormField.Field>
-            <TertiaryButton
-              type="button"
-              icon={showPassword ? visibleStrikethroughIcon : visibleIcon}
-              aria-label={showPassword ? 'Hide Password' : 'Show Password'}
-              aria-controls={`input-${passwordId}`}
-              onClick={() => {
-                setShowPassword(state => !state);
-                passwordRef.current?.focus();
-              }}
+          <FormField.Field as={InputGroup}>
+            <InputGroup.Input
+              {...passwordInputProps}
+              {...passwordRegistration}
+              error={errors.password ? ErrorType.Error : undefined}
+              type={showPassword ? 'text' : 'password'}
+              autoComplete="current-password"
+              spellCheck={false}
+              ref={combinePasswordRef}
             />
-          </Flex>
+            <InputGroup.InnerEnd>
+              <Tooltip title={showPassword ? 'Hide Password' : 'Show Password'}>
+                <TertiaryButton
+                  type="button"
+                  size="small"
+                  icon={showPassword ? visibleStrikethroughIcon : visibleIcon}
+                  aria-controls={`input-${passwordId}`}
+                  onClick={() => {
+                    setShowPassword(state => !state);
+                    passwordRef.current?.focus();
+                  }}
+                />
+              </Tooltip>
+            </InputGroup.InnerEnd>
+          </FormField.Field>
           <FormField.Hint>{errors.password?.message || passwordHint}</FormField.Hint>
         </FormField>
 

package/dist/mdx/react/_examples/mdx/Density.mdx

@@ -4,8 +4,24 @@ import Density from './examples/Density';
 
 # Canvas Kit Density Examples
 
-Although we currently don't support a density system, it's common practice to provide varying
-options to users, especially in the context of forms. Below is an example of how you can style our
-from elements to achieve the desired density.
+Canvas Kit does not ship a density system. Forms often still need compact, default, and
+comfortable spacing. This example shows how to style Canvas Kit form elements with
+`createStencil` to get three densities.
+
+Density in this demo changes:
+
+- **Input height and padding** (`system.size.sm` / `md` / `md + 4px`)
+- **Label and input type** (`subtext.medium` / `subtext.large` / `body.small`)
+- **Space between fields** (`system.gap.md` / `lg` / `xl`)
+- **Space between a label and its input** (tighter when labels are vertical)
+
+| Density | Input height | Field spacing | Type |
+| ------- | ------------ | ------------- | ---- |
+| High    | 32px         | 16px          | `subtext.medium` |
+| Medium  | 40px         | 24px          | `subtext.large` |
+| Low     | 48px         | 32px          | `body.small` |
+
+`Switch` does not expose a size API, so its dimensions stay the same across densities. Only its
+label type and surrounding field spacing change.
 
 <ExampleCodeBlock code={Density} />

package/dist/mdx/react/_examples/mdx/examples/Density.tsx

@@ -1,30 +1,38 @@
 import React from 'react';
 
-import {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Select} from '@workday/canvas-kit-react/select';
-import {Switch} from '@workday/canvas-kit-react/switch';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {calc, createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
+type DensityLevel = 'high' | 'medium' | 'low';
+type LabelOrientation = 'vertical' | 'horizontalStart' | 'horizontalEnd';
+type ContainerAlignment = 'left' | 'center';
+type DensityTypeLevel = 'subtext.medium' | 'subtext.large' | 'body.small';
+
+const densitySummary: Record<
+  DensityLevel,
+  {inputHeight: string; stackGap: string; typeLevel: DensityTypeLevel}
+> = {
+  high: {inputHeight: '32px', stackGap: '16px', typeLevel: 'subtext.medium'},
+  medium: {inputHeight: '40px', stackGap: '24px', typeLevel: 'subtext.large'},
+  low: {inputHeight: '48px', stackGap: '32px', typeLevel: 'body.small'},
+};
+
 const formStyles = createStyles({
   margin: `${px2rem(12)} ${'0'}`,
   maxWidth: px2rem(600),
   minWidth: '0',
 });
 
-const formFieldGroupListStyles = createStyles({
-  display: 'inline-flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-});
-
 const sideBySideInputs = createStencil({
   base: {
     display: 'inline-flex',
-    gap: system.gap.sm,
     justifyContent: 'space-between',
   },
   modifiers: {
@@ -39,52 +47,21 @@ const sideBySideInputs = createStencil({
       },
       vertical: {
         display: 'inline-flex',
+        flexDirection: 'row',
       },
     },
     density: {
-      high: {},
-      medium: {},
-      low: {},
-    },
-  },
-  compound: [
-    {
-      modifiers: {labelOrientation: 'horizontalStart', density: 'high'},
-      styles: {
-        gap: system.gap.md,
-      },
-    },
-    {
-      modifiers: {labelOrientation: 'horizontalStart', density: 'medium'},
-      styles: {
-        gap: system.gap.lg,
-      },
-    },
-    {
-      modifiers: {labelOrientation: 'horizontalStart', density: 'low'},
-      styles: {
-        gap: system.gap.xl,
-      },
-    },
-    {
-      modifiers: {labelOrientation: 'horizontalEnd', density: 'high'},
-      styles: {
+      high: {
         gap: system.gap.md,
       },
-    },
-    {
-      modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'},
-      styles: {
+      medium: {
         gap: system.gap.lg,
       },
-    },
-    {
-      modifiers: {labelOrientation: 'horizontalEnd', density: 'low'},
-      styles: {
+      low: {
         gap: system.gap.xl,
       },
     },
-  ],
+  },
 });
 
 const zipCodeInput = createStyles({
@@ -96,7 +73,10 @@ const zipCodeContainerStyles = createStyles({
 });
 
 const formFieldStencil = createStencil({
-  base: {},
+  base: {
+    // FormField's built-in margin would double-space with the stack gap below.
+    margin: 0,
+  },
   modifiers: {
     density: {
       high: {
@@ -155,32 +135,6 @@ const formFieldStencil = createStencil({
   ],
 });
 
-const selectStencil = createStencil({
-  base: {},
-  modifiers: {
-    density: {
-      high: {
-        height: system.size.sm,
-        padding: `${system.padding.xxs} ${system.padding.xs}`,
-        '& + div': {
-          height: system.size.sm,
-        },
-      },
-      medium: {
-        height: system.size.md,
-        padding: `${system.padding.xs}`,
-      },
-      low: {
-        height: calc.add(system.size.md, base.size100),
-        padding: `${system.padding.sm} ${system.padding.xs}`,
-        '& + div': {
-          height: calc.add(system.size.md, base.size100),
-        },
-      },
-    },
-  },
-});
-
 const inputStencil = createStencil({
   base: {
     minWidth: px2rem(200),
@@ -190,29 +144,25 @@ const inputStencil = createStencil({
       high: {
         height: system.size.sm,
         padding: `${system.padding.xxs} ${system.padding.xs}`,
+        fontSize: system.legacy.fontSize.subtext.md,
+        lineHeight: system.legacy.lineHeight.subtext.md,
       },
       medium: {
         height: system.size.md,
         padding: `${system.padding.xs}`,
+        fontSize: system.legacy.fontSize.subtext.lg,
+        lineHeight: system.legacy.lineHeight.subtext.lg,
       },
-
       low: {
         height: calc.add(system.size.md, base.size100),
         padding: `${system.padding.sm} ${system.padding.xs}`,
+        fontSize: system.legacy.fontSize.body.sm,
+        lineHeight: system.legacy.lineHeight.body.sm,
       },
     },
   },
 });
 
-const creditCardInputStencil = createStencil({
-  extends: inputStencil,
-  base: {
-    width: calc.add(system.size.md, system.size.md),
-    minWidth: calc.add(system.size.md, system.size.md),
-    textAlign: 'center',
-  },
-});
-
 const flexContainerStencil = createStencil({
   base: {
     display: 'flex',
@@ -263,37 +213,44 @@ const optionItemStyles = createStyles({
   maxWidth: 'fit-content',
 });
 
-// high = 32px height on inputs, space between inputs is 16px
-// medium 40px height on inputs, space between inputs is 24px
-// low = 48px height on inputs, space between inputs is 32px
-
 export default () => {
-  const [density, setDensity] = React.useState<'high' | 'medium' | 'low'>('medium');
-  const [containerAlignment, setContainerAlignment] = React.useState<'left' | 'center'>('left');
-  const [labelOrientation, setLabelOrientation] = React.useState<
-    'vertical' | 'horizontalStart' | 'horizontalEnd'
-  >('vertical');
+  const [density, setDensity] = React.useState<DensityLevel>('medium');
+  const [containerAlignment, setContainerAlignment] = React.useState<ContainerAlignment>('left');
+  const [labelOrientation, setLabelOrientation] = React.useState<LabelOrientation>('vertical');
+  const [fastShipping, setFastShipping] = React.useState(false);
+  const densityLabelId = useUniqueId();
+  const containerAlignmentLabelId = useUniqueId();
+  const labelOrientationLabelId = useUniqueId();
+
+  const handleDensity = (data: {id: string}) => {
+    setDensity(data.id as DensityLevel);
+  };
 
-  const handleDensity = data => {
-    setDensity(data.id);
+  const handleContainerAlignment = (data: {id: string}) => {
+    setContainerAlignment(data.id as ContainerAlignment);
   };
 
-  const handleContainerAlignment = data => {
-    setContainerAlignment(data.id);
+  const handleLabelOrientation = (data: {id: string}) => {
+    setLabelOrientation(data.id as LabelOrientation);
   };
 
-  const handleLabelOrientation = data => {
-    setLabelOrientation(data.id);
+  const handleFastShipping = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFastShipping(event.target.checked);
   };
 
+  const labelTypeLevel = densitySummary[density].typeLevel;
+  const fieldCs = formFieldStencil({density, labelOrientation});
+  const inputCs = inputStencil({density});
+
   return (
-    <div>
-      <Heading size="small">Choose Your Density and Alignment</Heading>
+    <>
       <div className={optionStyles}>
         <div className={optionItemStyles}>
-          <Text>Density</Text>
-          <SegmentedControl onSelect={data => handleDensity(data)} size="small">
-            <SegmentedControl.List aria-label="choose a density">
+          <Text as="h3" id={densityLabelId}>
+            Density
+          </Text>
+          <SegmentedControl initialValue={density} onSelect={handleDensity} size="small">
+            <SegmentedControl.List aria-label="Density" aria-labelledby={densityLabelId}>
               <SegmentedControl.Item data-id="high">High</SegmentedControl.Item>
               <SegmentedControl.Item data-id="medium">Medium</SegmentedControl.Item>
               <SegmentedControl.Item data-id="low">Low</SegmentedControl.Item>
@@ -301,9 +258,18 @@ export default () => {
           </SegmentedControl>
         </div>
         <div className={optionItemStyles}>
-          <Text>Label Orientation</Text>
-          <SegmentedControl onSelect={data => handleLabelOrientation(data)} size="small">
-            <SegmentedControl.List aria-label="choose a label orientation">
+          <Text as="h3" id={labelOrientationLabelId}>
+            Label Orientation
+          </Text>
+          <SegmentedControl
+            initialValue={labelOrientation}
+            onSelect={handleLabelOrientation}
+            size="small"
+          >
+            <SegmentedControl.List
+              aria-label="Label Orientation"
+              aria-labelledby={labelOrientationLabelId}
+            >
               <SegmentedControl.Item data-id="vertical">Vertical</SegmentedControl.Item>
               <SegmentedControl.Item data-id="horizontalStart">
                 Horizontal Start
@@ -313,131 +279,92 @@ export default () => {
           </SegmentedControl>
         </div>
         <div className={optionItemStyles}>
-          <Text>Container Alignment</Text>
-          <SegmentedControl onSelect={data => handleContainerAlignment(data)} size="small">
-            <SegmentedControl.List aria-label="choose a density">
+          <Text as="h3" id={containerAlignmentLabelId}>
+            Container Alignment
+          </Text>
+          <SegmentedControl
+            initialValue={containerAlignment}
+            onSelect={handleContainerAlignment}
+            size="small"
+          >
+            <SegmentedControl.List
+              aria-label="Container Alignment"
+              aria-labelledby={containerAlignmentLabelId}
+            >
               <SegmentedControl.Item data-id="left">Left</SegmentedControl.Item>
               <SegmentedControl.Item data-id="center">Center</SegmentedControl.Item>
             </SegmentedControl.List>
           </SegmentedControl>
         </div>
+        <Subtext size="large">
+          Input height: {densitySummary[density].inputHeight}. Field spacing:{' '}
+          {densitySummary[density].stackGap}. Type: {densitySummary[density].typeLevel}.
+        </Subtext>
       </div>
 
       <div {...containerAlignmentStencil({alignment: containerAlignment})}>
-        <form action="#" className={formStyles}>
+        <form className={formStyles} autoComplete="off">
+          <Heading size="small">Shipping Address</Heading>
           <div {...flexContainerStencil({density})}>
-            <FormField
-              orientation={labelOrientation}
-              grow
-              cs={formFieldStencil({density, labelOrientation})}
-              id="foo"
-            >
-              <FormField.Label>Choose Country</FormField.Label>
-              <Select items={['Dominican Republic', 'Spain', 'United States']}>
-                <FormField.Input
-                  cs={selectStencil({density})}
-                  placeholder="Choose a country"
-                  as={Select.Input}
-                />
-                <Select.Popper>
-                  <Select.Card>
-                    <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-                  </Select.Card>
-                </Select.Popper>
-              </Select>
-            </FormField>
-            <FormField
-              grow
-              orientation={labelOrientation}
-              cs={formFieldStencil({density, labelOrientation})}
-            >
-              <FormField.Label>Full Name</FormField.Label>
-              <FormField.Input as={TextInput} cs={inputStencil({density})} />
+            <FormField grow orientation={labelOrientation} cs={fieldCs}>
+              <FormField.Label typeLevel={labelTypeLevel}>Full Name</FormField.Label>
+              <FormField.Input as={TextInput} autoComplete="name" cs={inputCs} />
             </FormField>
-            <FormField
-              grow
-              orientation={labelOrientation}
-              cs={formFieldStencil({density, labelOrientation})}
-            >
-              <FormField.Label>Phone Number</FormField.Label>
-              <FormField.Input as={TextInput} cs={inputStencil({density})} />
-            </FormField>
-            <FormField
-              grow
-              orientation={labelOrientation}
-              cs={formFieldStencil({density, labelOrientation})}
-            >
-              <FormField.Label>Street Address</FormField.Label>
-              <FormField.Input as={TextInput} cs={inputStencil({density})} />
-            </FormField>
-            <FormField
-              grow
-              orientation={labelOrientation}
-              cs={formFieldStencil({density, labelOrientation})}
-            >
-              <FormField.Label>City</FormField.Label>
-              <FormField.Input as={TextInput} cs={inputStencil({density})} />
+            <div {...sideBySideInputs({labelOrientation, density})}>
+              <FormField grow orientation={labelOrientation} cs={fieldCs}>
+                <FormField.Label typeLevel={labelTypeLevel}>Phone Number</FormField.Label>
+                <FormField.Input as={TextInput} autoComplete="tel" cs={inputCs} />
+              </FormField>
+              <FormField grow orientation={labelOrientation} cs={fieldCs}>
+                <FormField.Label typeLevel={labelTypeLevel}>Email</FormField.Label>
+                <FormField.Input as={TextInput} autoComplete="email" cs={inputCs} />
+              </FormField>
+            </div>
+            <FormField grow orientation={labelOrientation} cs={fieldCs}>
+              <FormField.Label typeLevel={labelTypeLevel}>Street Address</FormField.Label>
+              <FormField.Input as={TextInput} autoComplete="street-address" cs={inputCs} />
             </FormField>
-            <div {...sideBySideInputs({labelOrientation: labelOrientation, density})}>
-              <FormField
-                grow
-                orientation={labelOrientation}
-                cs={formFieldStencil({density, labelOrientation})}
-              >
-                <FormField.Label>State</FormField.Label>
-                <FormField.Input as={TextInput} cs={inputStencil({density})} />
+
+            <div {...sideBySideInputs({labelOrientation, density})}>
+              <FormField grow orientation={labelOrientation} cs={fieldCs}>
+                <FormField.Label typeLevel={labelTypeLevel}>City</FormField.Label>
+                <FormField.Input as={TextInput} autoComplete="address-level2" cs={inputCs} />
               </FormField>
-              <FormField
-                grow
-                orientation={labelOrientation}
-                cs={[formFieldStencil({density, labelOrientation}), zipCodeContainerStyles]}
-              >
-                <FormField.Label>Zip Code</FormField.Label>
-                <FormField.Input cs={[inputStencil({density}), zipCodeInput]} as={TextInput} />
+              <FormField grow orientation={labelOrientation} cs={fieldCs}>
+                <FormField.Label typeLevel={labelTypeLevel}>State</FormField.Label>
+                <FormField.Input as={TextInput} autoComplete="address-level1" cs={inputCs} />
+              </FormField>
+              <FormField grow orientation={labelOrientation} cs={[fieldCs, zipCodeContainerStyles]}>
+                <FormField.Label typeLevel={labelTypeLevel}>Zip Code</FormField.Label>
+                <FormField.Input
+                  cs={[inputCs, zipCodeInput]}
+                  as={TextInput}
+                  autoComplete="postal-code"
+                />
               </FormField>
             </div>
-            <FormField
-              orientation={labelOrientation}
-              cs={formFieldStencil({density, labelOrientation})}
-            >
-              <FormField.Label>Enable Fast Shipping</FormField.Label>
+            <FormField grow orientation={labelOrientation} cs={fieldCs}>
+              <FormField.Label typeLevel={labelTypeLevel}>Country</FormField.Label>
               <FormField.Field>
-                <FormField.Input as={Switch} />
+                <Select items={['Dominican Republic', 'Spain', 'United States']}>
+                  <FormField.Input cs={inputCs} placeholder="Choose a country" as={Select.Input} />
+                  <Select.Popper>
+                    <Select.Card>
+                      <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+                    </Select.Card>
+                  </Select.Popper>
+                </Select>
+              </FormField.Field>
+            </FormField>
+            <FormField orientation={labelOrientation} cs={fieldCs}>
+              <FormField.Label typeLevel={labelTypeLevel}>Enable Fast Shipping</FormField.Label>
+              <FormField.Field>
+                <FormField.Input as={Switch} checked={fastShipping} onChange={handleFastShipping} />
               </FormField.Field>
             </FormField>
-            <FormFieldGroup
-              cs={formFieldStencil({density, labelOrientation})}
-              orientation={labelOrientation}
-            >
-              <FormFieldGroup.Label>Credit Card</FormFieldGroup.Label>
-              <FormFieldGroup.Field>
-                <FormFieldGroup.List cs={formFieldGroupListStyles}>
-                  <FormFieldGroup.Input
-                    as={TextInput}
-                    placeholder="XXXX"
-                    cs={creditCardInputStencil({density})}
-                  />
-                  <FormFieldGroup.Input
-                    as={TextInput}
-                    placeholder="XXXX"
-                    cs={creditCardInputStencil({density})}
-                  />
-                  <FormFieldGroup.Input
-                    as={TextInput}
-                    placeholder="XXXX"
-                    cs={creditCardInputStencil({density})}
-                  />
-                  <FormFieldGroup.Input
-                    cs={creditCardInputStencil({density})}
-                    placeholder="XXXX"
-                    as={TextInput}
-                  />
-                </FormFieldGroup.List>
-              </FormFieldGroup.Field>
-            </FormFieldGroup>
           </div>
         </form>
       </div>
-    </div>
+    </>
   );
 };

package/dist/mdx/react/common/mdx/examples/CreateComponent.tsx

@@ -6,7 +6,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 // Extend Heading Props and omitting size since we've added a default
 interface CardHeadingProps extends Omit<ExtractProps<typeof Heading>, 'size'> {}
-export const CardHeading = createComponent('h2')({
+export default createComponent('h2')({
   displayName: 'CardHeading',
   Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
     return (
@@ -19,7 +19,7 @@ export const CardHeading = createComponent('h2')({
 
 // Extend Box Props for customization
 interface CardProps extends BoxProps {}
-export const Card = createComponent('div')({
+export default createComponent('div')({
   displayName: 'Card',
   subComponents: {
     Heading: CardHeading,
@@ -39,7 +39,7 @@ const cardStyles = createStyles({
   padding: system.padding.sm,
 });
 
-export const CreateComponent = () => {
+export default () => {
   return (
     <Card cs={cardStyles} as="section">
       <Card.Heading>Card Heading</Card.Heading>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "17.0.0-alpha.0613-next.0",
+  "version": "17.0.0-alpha.0616-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^17.0.0-alpha.0613-next.0",
-    "@workday/canvas-kit-preview-react": "^17.0.0-alpha.0613-next.0",
-    "@workday/canvas-kit-react": "^17.0.0-alpha.0613-next.0",
-    "@workday/canvas-kit-styling": "^17.0.0-alpha.0613-next.0",
+    "@workday/canvas-kit-labs-react": "^17.0.0-alpha.0616-next.0",
+    "@workday/canvas-kit-preview-react": "^17.0.0-alpha.0616-next.0",
+    "@workday/canvas-kit-react": "^17.0.0-alpha.0616-next.0",
+    "@workday/canvas-kit-styling": "^17.0.0-alpha.0616-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "11919e5ffbe1b947f0e5d156e1efc91dfeffd259"
+  "gitHead": "593c0f1f5ee5047c7bea41027f76716a0f42caee"
 }

package/dist/mdx/react/_examples/mdx/FormsWithFormik.mdx

@@ -1,9 +0,0 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import SelectWithFormik from './examples/SelectWithFormik';
-
-
-# Canvas Kit Examples
-
-## Select Using Formik
-
-<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/react/_examples/mdx/examples/SelectWithFormik.tsx

@@ -1,84 +0,0 @@
-import {useFormik} from 'formik';
-
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
-import {px2rem} from '@workday/canvas-kit-styling';
-import {cloudArrowUpIcon, cloudIcon, commentIcon, userIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
-
-export default [
-  {
-    label: 'Dessert Person by Claire Saffitz',
-    serverId: 1,
-    icon: commentIcon,
-  },
-  {
-    label: 'Elements of Pizza by Ken Forkish',
-    serverId: 2,
-    icon: cloudIcon,
-  },
-  {
-    label: 'Flour Water Salt Yeast by Ken Forkish',
-    serverId: 3,
-    icon: cloudArrowUpIcon,
-  },
-  {label: 'Mastering Pasta by Marc Verti', serverId: 4, icon: userIcon},
-];
-
-export default () => {
-  const formik = useFormik({
-    initialValues: {
-      selectedBook: '',
-    },
-    onSubmit: values => {
-      // Send data to server
-      setTimeout(() => {
-        alert(JSON.stringify(values, null, 2));
-      }, 0);
-    },
-  });
-
-  const selectModel = useSelectModel({
-    items: customOptionsMain,
-    getId: item => {
-      return item.serverId;
-    },
-    getTextValue: item => item.label,
-  });
-
-  return (
-    <form onSubmit={formik.handleSubmit} action=".">
-      <Flex cs={{gap: system.gap.sm, flexDirection: 'column', alignItems: 'flex-start'}}>
-        <FormField orientation="vertical" cs={{alignSelf: 'stretch', alignItems: 'normal'}}>
-          <Select model={selectModel}>
-            <FormField.Label>Choose a book</FormField.Label>
-            <FormField.Input
-              as={Select.Input}
-              name="selectedBook"
-              onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
-              value={formik.values.selectedBook}
-              grow
-            />
-            <Select.Popper>
-              <Select.Card>
-                <Select.List cs={{maxHeight: px2rem(200)}}>
-                  {item => {
-                    return (
-                      <Select.Item data-id={item.serverId} data-text={item.label}>
-                        <Select.Item.Icon icon={item.icon} />
-                        {item.label}
-                      </Select.Item>
-                    );
-                  }}
-                </Select.List>
-              </Select.Card>
-            </Select.Popper>
-          </Select>
-        </FormField>
-        <PrimaryButton type="submit">Submit</PrimaryButton>
-      </Flex>
-    </form>
-  );
-};