@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export default {
+  title: 'Testing/Popups/Dialog',
+  component: Dialog,
+};
+
+const grid = createStyles({
+  gridTemplateAreas: "'topButton topButton''leftButton rightButton''bottomButton bottomButton'",
+  height: calc.subtract('100vh', system.space.x16),
+  width: calc.subtract('100vw', system.space.x20),
+});
+
+const topButton = createStyles({
+  gridArea: 'topButton',
+  justifySelf: 'center',
+});
+const rightButton = createStyles({
+  gridArea: 'rightButton',
+  justifySelf: 'right',
+  alignSelf: 'center',
+});
+const bottomButton = createStyles({
+  gridArea: 'bottomButton',
+  justifySelf: 'center',
+  alignSelf: 'end',
+});
+const leftButton = createStyles({
+  gridArea: 'leftButton',
+  justifySelf: 'left',
+  alignSelf: 'center',
+});
+
+export default () => {
+  return (
+    <div data-testid="scroll-area-fallback-placement">
+      <Grid cs={grid}>
+        <Dialog>
+          <Dialog.Target cs={topButton} as={PrimaryButton}>
+            Placement Top
+          </Dialog.Target>
+          <Dialog.Popper placement="top">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+        <Dialog>
+          <Dialog.Target cs={leftButton} as={PrimaryButton}>
+            Placement Left
+          </Dialog.Target>
+          <Dialog.Popper placement="left">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+        <Dialog>
+          <Dialog.Target cs={rightButton} as={PrimaryButton}>
+            Placement Right
+          </Dialog.Target>
+          <Dialog.Popper placement="right">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+        <Dialog>
+          <Dialog.Target cs={bottomButton} as={PrimaryButton}>
+            Placement Bottom
+          </Dialog.Target>
+          <Dialog.Popper placement="bottom">
+            <Dialog.Card>
+              <Dialog.CloseIcon aria-label="Close" />
+              <Dialog.Heading paddingTop="m">This is dialog heading</Dialog.Heading>
+              <Dialog.Body>This is dialog body.</Dialog.Body>
+              <Flex gap="s" padding="xxs" marginTop="xxs">
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+                <Dialog.CloseButton>Cancel</Dialog.CloseButton>
+              </Flex>
+            </Dialog.Card>
+          </Dialog.Popper>
+        </Dialog>
+      </Grid>
+    </div>
+  );
+};

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Dialog} from '@workday/canvas-kit-react/dialog';

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,33 +1,25 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-
-import Alert from './examples/Alert.tsx';
-import AlertLabel from './examples/AlertLabel.tsx';
-import Basic from './examples/Basic.tsx';
-import CustomInputId from './examples/CustomInputId.tsx';
-import Error from './examples/Error.tsx';
-import ErrorLabel from './examples/ErrorLabel.tsx';
-import GroupingInputs from './examples/GroupingInputs.tsx';
-import Grow from './examples/Grow.tsx';
-import Hint from './examples/Hint.tsx';
-import LabelPosition from './examples/LabelPosition.tsx';
-import Required from './examples/Required.tsx';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import Basic from './examples/Basic';
+import Alert from './examples/Alert';
+import Error from './examples/Error';
+import Disabled from './examples/Disabled';
+import LabelPositionHorizontalStart from './examples/LabelPositionHorizontalStart';
+import LabelPositionHorizontalEnd from './examples/LabelPositionHorizontalEnd';
+import RefForwarding from './examples/RefForwarding';
+import Required from './examples/Required';
+import Custom from './examples/Custom';
+import CustomId from './examples/CustomId';
+import AllFields from './examples/AllFields';
+import Hint from './examples/Hint';
+import Grow from './examples/Grow';
+import ThemedError from './examples/ThemedErrors';
+import GroupedInputs from './examples/GroupedInputs';
 
 
 # Canvas Kit Form Field
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`FormField` in Main has been deprecated and will be removed in a future major version. Please use
-[`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic)
-instead.
-
-Form Field allows users to wrap input components to make them accessible and adds complementary
-labels and error messages.
+FormField allows users to wrap input components to make them accessible. You can customize the field
+by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input`.
 
 ## Installation
 
@@ -37,102 +29,136 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
-### Basic Example
+### Basic
 
 Form Field should be used in tandem with most Canvas Kit input components to ensure they meet
-accessibility standards.
-
-Here's an example of Form Field being used with [Text Input](/components/inputs/text-input/).
+accessibility standards. The orientation of the label by default is `vertical`.
 
 <ExampleCodeBlock code={Basic} />
 
-### Custom Input id
+### Error States
 
-Form Field will automatically generate an HTML `id` for its input element to link it to the
-correponding label. Alternatively, you may set the `inputId` prop of the Form Field to specify a
-custom `id` for the input element.
+Set the `error` prop of the Form Field or define it in the model to indicate it has an error.
+`error` accepts the following values:
 
-<ExampleCodeBlock code={CustomInputId} />
+`"error" | "alert" | undefined`
 
-### Grouping Inputs
+### Alert
 
-Set the `useFieldset` prop of the Form Field to `true` to indicate that it includes multiple input
-components. In this case, the Form Field will use
-[the method prescribed by the WAI](https://www.w3.org/WAI/tutorials/forms/grouping/) and render
-itself using a `fieldset` and a `legend`.
+Use the alert state when a value is valid but there is additional information.
 
-`useFieldset` must be set to `true` when wrapping a [Radio Group](/components/inputs/radio/) since
-Radio Groups contain multiple Radio Buttons.
+<ExampleCodeBlock code={Alert} />
 
-<ExampleCodeBlock code={GroupingInputs} />
+### Error
 
-### Grow
+Use the error state when the value is no longer valid.
 
-Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
-component) to expand to the width of its container.
+<ExampleCodeBlock code={Error} />
 
-<ExampleCodeBlock code={Grow} />
+### Disabled
+
+Set the `disabled` prop of `FormField.Input` to prevent users from interacting with it.
+
+<ExampleCodeBlock code={Disabled} />
 
 ### Hint
 
-Set the `hintText` prop of the Form Field to display a short message below the input component.
+Use `FormField.Hint` to display a short message below the input component and `FormField.Field` to
+ensure proper alignment.
 
 <ExampleCodeBlock code={Hint} />
 
 ### Label Position
 
-Set the `labelPosition` prop of the Form Field to designate the position of the label relative to
-the input component. `labelPosition` accepts the following values:
+Set the `orientation` prop of the Form Field to designate the position of the label relative to the
+input component. By default, the orientation will be set to `vertical`. If you want your label to be
+horizontal, you have two options: `horizontalStart` and `horizontalEnd`.
+
+If you want the position of the label at the start of the container, set orientation prop to
+`horizontalStart`.
+
+<ExampleCodeBlock code={LabelPositionHorizontalStart} />
+
+If you want the position of the label at the end of the container, set orientation prop to
+`horizontalEnd`.
+
+<ExampleCodeBlock code={LabelPositionHorizontalEnd} />
 
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+### Grow
+
+Set the `grow` prop of the Form Field to `true` to configure it (including the wrapped input
+component) to expand to the width of its container.
+
+**Note: This Prop is deprecated and will be removed in a future major version.**
 
-<ExampleCodeBlock code={LabelPosition} />
+<ExampleCodeBlock code={Grow} />
+
+### Ref Forwarding
+
+If you need full customization you can use the `FormField` behavior hooks to build your own
+solution. It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
+
+<ExampleCodeBlock code={RefForwarding} />
 
 ### Required
 
-Set the `required` prop of the Form Field to `true` to indicate that the field is required. Labels
+Set the `isRequired` prop of the Form Field to `true` to indicate that the field is required. Labels
 for required fields are suffixed by a red asterisk.
 
 <ExampleCodeBlock code={Required} />
 
-### Error States
+### Grouped Inputs
 
-Set the `error` prop of the Form Field to indicate it has an error. `error` accepts the following
-values:
+Use `FormFieldGroup` when you have a group of inputs that need to be associated to one another, like
+`RadioGroup` or a group of `Checkbox`'s. `FormFieldGroup` renders a `fieldset` element and
+`FormFieldGroup.Label` renders a `legend` element. These elements will allow for correct
+accessibility of grouped inputs.
 
-- `FormField.ErrorType.Alert`
-- `FormField.ErrorType.Error`
+`FormFieldGroup` supports the same props of `FormField`:
 
-The `hintText` and `hintId` props of the Form Field are required if `error` is defined. Set
-`hintText` to the error message you would like to display and `hintId` to the HTML `id` you would
-like to assign to that message (`hintId` is used to link the error message to its corresponding
-input element to meet accessibility standards).
+- `error`: `"alert" | "error"` Defines the error around the whole group of inputs.
+- `orientation`: `"horizontal" | "vertical"` Defines the legend placement.
+- `isRequired`: `true` Defines if a group like RadioGroup is required.
 
-#### Alert
+<ExampleCodeBlock code={GroupedInputs} />
 
-<ExampleCodeBlock code={Alert} />
+### Custom
 
-Set the `alertLabel` prop of the Form Field to override the default "Alert" prefix of the hint. This
-is generally only used for translations.
+If you need full customization you can use the `FormField` behavior hooks to build your own
+solution. It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
 
-<ExampleCodeBlock code={AlertLabel} />
+<ExampleCodeBlock code={Custom} />
 
-#### Error
+### Custom id
 
-<ExampleCodeBlock code={Error} />
+Form Field will automatically generate an HTML `id` for its input element to link it to the
+correponding label. Alternatively, you may set the `id` prop of the Form Field to specify a custom
+`id` for the input element. The `id` will be appended by `input-${your-unique-id}`.
 
-Set the `errorLabel` prop of the Form Field to override the default "Error" prefix of the hint. This
-is generally only used for translations.
+<ExampleCodeBlock code={CustomId} />
 
-<ExampleCodeBlock code={ErrorLabel} />
+### All Fields
 
-## Component API
+Form Field should allow you to use it with all `inputs` including `Select`, `TextInput`, `Checkbox`,
+`TextArea`, `Switch`, and `RadioGroup`.
+
+<ExampleCodeBlock code={AllFields} />
 
-<SymbolDoc name="FormField" fileName="/react/" />
+### Themed Errors
 
-Undocumented props are spread to the outermost element rendered by Form Field.
+You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
+`focusOutline` and `error` properties on the `theme`.
 
-## Specifications
+<ExampleCodeBlock code={ThemedError} />
+
+### Custom Styles
+
+Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
+check our
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+
+## Component API
 
-<Specifications file="FormField.spec.ts" name="Form Field" />
+<SymbolDoc name="FormField" fileName="/preview-react/" />

package/dist/mdx/react/form-field/examples/Alert.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
-  const [value, setValue] = React.useState('invalid@email');
+  const [value, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField error="alert">
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+          <FormField.Hint>Cannot contain numbers</FormField.Hint>
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };

package/dist/mdx/{preview-react → react}/form-field/examples/AllFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
@@ -22,19 +22,23 @@ export default () => {
     <Flex cs={parentContainerStyles}>
       <FormField grow>
         <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} />
+        </FormField.Field>
       </FormField>
 
       <FormField isRequired={true} error="alert" grow>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Container>
+        <FormField.Field>
           <FormField.Input as={TextInput} />
           <FormField.Hint>Hint text for your input</FormField.Hint>
-        </FormField.Container>
+        </FormField.Field>
       </FormField>
       <FormField grow>
         <FormField.Label>Text Area Label</FormField.Label>
-        <FormField.Input as={TextArea} />
+        <FormField.Field>
+          <FormField.Input as={TextArea} />
+        </FormField.Field>
       </FormField>
       <FormField error="error" grow>
         <FormField.Label>Choose a Crust</FormField.Label>
@@ -47,7 +51,7 @@ export default () => {
           </Select.Popper>
         </Select>
       </FormField>
-      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal" grow>
+      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontalStart" grow>
         <FormField.Label as="legend">Radio Group Legend</FormField.Label>
         <FormField.Container>
           <FormField.Input as={RadioGroup}>
@@ -68,10 +72,41 @@ export default () => {
         <FormField.Input checked={false} as={Checkbox} label="Thin Crust" />
         <FormField.Input checked={false} as={Checkbox} label="Extra Cheese" />
       </FormField>
+      <FormFieldGroup error="error" orientation="horizontalStart" grow>
+        <FormFieldGroup.Label>Choose Your Crust</FormFieldGroup.Label>
+        <FormFieldGroup.Field>
+          <FormFieldGroup.List as={RadioGroup}>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin-crust">
+              Thin Crust
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="hand-tossed">
+              Hand Tossed
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+              Deep Dish
+            </FormFieldGroup.Input>
+            <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+              Cauliflower
+            </FormFieldGroup.Input>
+          </FormFieldGroup.List>
+        </FormFieldGroup.Field>
+      </FormFieldGroup>
+      <FormFieldGroup grow>
+        <FormFieldGroup.Label>Checkbox Legend</FormFieldGroup.Label>
+        <FormField.Field>
+          <FormFieldGroup.List>
+            <FormFieldGroup.Input checked={true} as={Checkbox} label="Checkbox Label" />
+            <FormFieldGroup.Input checked={false} as={Checkbox} label="Thin Crust" />
+            <FormFieldGroup.Input checked={false} as={Checkbox} label="Extra Cheese" />
+          </FormFieldGroup.List>
+        </FormField.Field>
+      </FormFieldGroup>
 
-      <FormField orientation="horizontal" grow>
+      <FormField orientation="horizontalStart" grow>
         <FormField.Label>Switch Label</FormField.Label>
-        <FormField.Input as={Switch} />
+        <FormField.Field>
+          <FormField.Input as={Switch} />
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/react/form-field/examples/Basic.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {FormFieldLabelPosition} from '../../lib/types';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -11,8 +11,13 @@ export default () => {
   };
 
   return (
-    <FormField label="Email">
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };

package/dist/mdx/{preview-react → react}/form-field/examples/Custom.tsx

@@ -5,7 +5,7 @@ import {
   useFormFieldLabel,
   useFormFieldModel,
   formFieldStencil,
-} from '@workday/canvas-kit-preview-react/form-field';
+} from '@workday/canvas-kit-react/form-field';
 import {useModelContext} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -45,7 +45,7 @@ export default () => {
   const model = useFormFieldModel({isRequired: true});
 
   return (
-    <Flex cs={formFieldStencil({orientation: 'horizontal'})}>
+    <Flex cs={formFieldStencil({orientation: 'horizontalStart'})}>
       <Label model={model}>My Custom Field</Label>
       <Input model={model} value={value} onChange={handleChange} />
       <Hint model={model}>You can be anything</Hint>

package/dist/mdx/{preview-react → react}/form-field/examples/CustomId.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
@@ -14,7 +14,9 @@ export default () => {
     <Flex>
       <FormField id="first-name">
         <FormField.Label>First Name</FormField.Label>
-        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/{preview-react → react}/form-field/examples/Disabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
@@ -15,7 +15,9 @@ export default () => {
     <Flex>
       <FormField>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />
+        <FormField.Field>
+          <FormField.Input as={TextInput} value={value} disabled onChange={handleChange} />
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/react/form-field/examples/Error.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
-  const [value, setValue] = React.useState('invalid@email');
+  const [value, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please enter a valid email."
-      label="Email"
-    >
-      <TextInput onChange={handleChange} value={value} />
-    </FormField>
+    <Flex>
+      <FormField error="error">
+        <FormField.Label>Password</FormField.Label>
+        <FormField.Field>
+          <FormField.Input as={TextInput} type="password" value={value} onChange={handleChange} />
+          <FormField.Hint>Must Contain a number and a capital letter</FormField.Hint>
+        </FormField.Field>
+      </FormField>
+    </Flex>
   );
 };