@workday/canvas-kit-docs 16.1.3 → 16.2.0-0604-next.0

package/dist/mdx/preview-react/_examples/mdx/FormLibraryExample.mdx

@@ -1,39 +1,7 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-
 import TextInputWithReactHookForm from './examples/TextInputWithReactHookForm';
 
 
-# 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.
+## Uncontrolled Text Inputs Using React Hook Form
 
 <ExampleCodeBlock code={TextInputWithReactHookForm} />

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

@@ -1,18 +1,13 @@
 import React from 'react';
-import {FieldErrors, Resolver, useForm} from 'react-hook-form';
-import {SchemaOf, ValidationError, object, string} from 'yup';
+import {FieldErrorsImpl, useForm} from 'react-hook-form';
+import {SchemaOf, object, string} from 'yup';
 
 import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {ErrorType, useUniqueId} from '@workday/canvas-kit-react/common';
-import {
-  FormField,
-  useFormFieldInput,
-  useFormFieldModel,
-} from '@workday/canvas-kit-react/form-field';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';
-import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {visibleIcon, visibleStrikethroughIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
@@ -23,30 +18,31 @@ const styles = createStyles({
   alignItems: 'flex-start',
 });
 
-const useYupValidationResolver = <T extends {}>(validationSchema: SchemaOf<T>): Resolver<T> => {
-  return React.useCallback<Resolver<T>>(
+type YupValidationResolver = <T extends {}>(
+  validationSchema: SchemaOf<T>
+) => (data: T) => Promise<{values: T; errors: {}} | {values: {}; errors: FieldErrorsImpl<T>}>;
+
+const useYupValidationResolver: YupValidationResolver = validationSchema => {
+  return React.useCallback(
     async data => {
       try {
-        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>};
+        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,
+              },
+            }),
+            {}
+          ),
+        };
       }
     },
     [validationSchema]
@@ -78,9 +74,6 @@ 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,
@@ -91,36 +84,19 @@ export default () => {
       password: 'foobarbaz',
       role: '',
     },
-    resolver: useYupValidationResolver<LoginSchema>(validationSchema),
+    resolver: useYupValidationResolver(validationSchema),
     mode: 'onTouched',
-    shouldFocusError: true,
   });
 
-  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 onSubmit = handleSubmit(values => {
+    setShowPassword(false);
+    // Send data to server
+    setTimeout(() => {
+      alert(JSON.stringify(values, null, 2));
+    }, 0);
+  });
 
+  const [showPassword, setShowPassword] = React.useState(false);
   const passwordId = useUniqueId();
   const passwordRef = React.useRef<HTMLInputElement | null>(null);
   const {ref: passwordCallbackRef, ...passwordRegistration} = register('password');
@@ -128,15 +104,8 @@ 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 ref={formRef} onSubmit={onSubmit} action="." noValidate={true}>
+    <form onSubmit={onSubmit} action="." noValidate={true}>
       <Flex cs={styles}>
         <FormField
           orientation="vertical"
@@ -174,33 +143,35 @@ export default () => {
           </FormField.Field>
           <FormField.Hint>{errors.email?.message}</FormField.Hint>
         </FormField>
-        <FormField model={passwordModel} orientation="vertical">
+        <FormField
+          orientation="vertical"
+          id={passwordId}
+          isRequired={true}
+          error={!!errors.password ? 'error' : undefined}
+        >
           <FormField.Label>Password</FormField.Label>
-          <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 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();
+              }}
             />
-            <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>
+          </Flex>
           <FormField.Hint>{errors.password?.message || passwordHint}</FormField.Hint>
         </FormField>
 

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

@@ -4,24 +4,8 @@ import Density from './examples/Density';
 
 # Canvas Kit Density Examples
 
-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.
+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.
 
 <ExampleCodeBlock code={Density} />

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

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