@workday/canvas-kit-docs 11.0.0-alpha.657-next.0 → 11.0.0-alpha.664-next.0

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

@@ -14,6 +14,8 @@ import CustomId from './examples/CustomId';
 import AllFields from './examples/AllFields';
 import Hint from './examples/Hint';
 import FieldSet from './examples/FieldSet';
+import Grow from './examples/Grow';
+import ThemedError from './examples/ThemedErrors';
 
 
 # Canvas Kit Form Field
@@ -75,6 +77,15 @@ input component. By default, the orientation will be set to `vertical`.
 
 <ExampleCodeBlock code={LabelPositionHorizontal} />
 
+### 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={Grow} />
+
 ### Ref Forwarding
 
 If you need full customization you can use the `FormField` behavior hooks to build your own
@@ -120,6 +131,13 @@ Form Field should allow you to use it with all `inputs` including `Select`, `Tex
 
 <ExampleCodeBlock code={AllFields} />
 
+### Themed Errors
+
+You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
+`focusOutline` and `error` properties on the `theme`.
+
+<ExampleCodeBlock code={ThemedError} />
+
 ## Component API
 
 <SymbolDoc name="FormField" fileName="/preview-react/" />

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

@@ -18,26 +18,26 @@ export default () => {
         borderRadius: '4px',
       }}
     >
-      <FormField>
+      <FormField grow>
         <FormField.Label>First Name</FormField.Label>
-        <FormField.Input width="100%" as={TextInput} />
+        <FormField.Input as={TextInput} />
       </FormField>
 
-      <FormField isRequired={true} error="alert">
+      <FormField isRequired={true} error="alert" grow>
         <FormField.Label>Email</FormField.Label>
-        <FormField.Container cs={{width: '100%'}}>
-          <FormField.Input width="100%" as={TextInput} />
+        <FormField.Container>
+          <FormField.Input as={TextInput} />
           <FormField.Hint>Hint text for your input</FormField.Hint>
         </FormField.Container>
       </FormField>
-      <FormField>
+      <FormField grow>
         <FormField.Label>Text Area Label</FormField.Label>
-        <FormField.Input width="100%" as={TextArea} />
+        <FormField.Input as={TextArea} />
       </FormField>
-      <FormField error="error" width="100%">
+      <FormField error="error" grow>
         <FormField.Label>Choose a Crust</FormField.Label>
         <Select items={['Pizza', 'Cheeseburger', 'Fries']}>
-          <FormField.Input width="100%" as={Select.Input} />
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
@@ -45,7 +45,7 @@ export default () => {
           </Select.Popper>
         </Select>
       </FormField>
-      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal">
+      <FormField as="fieldset" isRequired={true} error={'error'} orientation="horizontal" grow>
         <FormField.Label as="legend">Radio Group Legend</FormField.Label>
         <FormField.Container>
           <FormField.Input as={RadioGroup}>
@@ -60,14 +60,14 @@ export default () => {
           <FormField.Hint>Error Message</FormField.Hint>
         </FormField.Container>
       </FormField>
-      <FormField as="fieldset">
+      <FormField as="fieldset" grow>
         <FormField.Label as="legend">Checkbox Legend</FormField.Label>
         <FormField.Input checked={true} as={Checkbox} label="Checkbox Label" />
         <FormField.Input checked={false} as={Checkbox} label="Thin Crust" />
         <FormField.Input checked={false} as={Checkbox} label="Extra Cheese" />
       </FormField>
 
-      <FormField orientation="horizontal">
+      <FormField orientation="horizontal" grow>
         <FormField.Label>Switch Label</FormField.Label>
         <FormField.Input as={Switch} />
       </FormField>

package/dist/mdx/preview-react/form-field/examples/Grow.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex>
+      <FormField grow>
+        <FormField.Label>First Name</FormField.Label>
+        <FormField.Input as={TextInput} value={value} onChange={handleChange} />
+      </FormField>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/form-field/examples/ThemedErrors.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        error: {
+          main: colors.islandPunch400,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
+        <FormField.Label>Email</FormField.Label>
+        <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+        <FormField.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</FormField.Hint>
+      </FormField>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx

@@ -19,8 +19,21 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add `aria-live="polite"`
-and a descriptive `aria-label` for screen reader accesibility.
+`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add some wiring for screen
+readers. In the example below, we're simulating a loading state with a `setTimeout` that's triggered
+when the "Generate Quote" button is clicked.
+
+The ARIA live region uses the `aria-label` on `LoadingSparkles` to announce the loading state. And
+it uses the text in `AccessibleHide` to announce when loading is complete. In a real-world
+application, you would probably add another state for loading failures. Also note that generated
+text should live outside the live region. This content doesn't need to be announced to screen
+readers.
+
+#### Consolidating ARIA Live Regions
+
+In the example, we wrapped `LoadingSparkles` inside our `AriaLiveRegion` component, but in general
+you should not have multiple ARIA live regions on the page at once. If you already have a live
+region, consider sending these loading messages there instead of adding another region.
 
 <ExampleCodeBlock code={Basic} />
 

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -1,6 +1,64 @@
 import React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Text} from '@workday/canvas-kit-react/text';
 import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const containerStyles = createStyles({
+  minHeight: '3.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
 
 export default () => {
-  return <LoadingSparkles aria-live="polite" aria-label="Generating content" />;
+  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
+  const [quote, setQuote] = React.useState('');
+
+  React.useEffect(() => {
+    if (loadingStatus === 'loading') {
+      const mockLoading = setTimeout(() => {
+        setLoadingStatus('success');
+        setQuote(getQuote());
+      }, 3000);
+
+      return () => {
+        clearTimeout(mockLoading);
+      };
+    }
+  }, [loadingStatus]);
+
+  const handleClick = () => {
+    setQuote('');
+    setLoadingStatus('loading');
+  };
+
+  return (
+    <>
+      <div className={containerStyles}>
+        {quote && <Text cs={{maxWidth: '60ch'}}>{quote}</Text>}
+        <AriaLiveRegion>
+          {loadingStatus === 'loading' && <LoadingSparkles aria-label="loading" />}
+          {loadingStatus === 'success' && (
+            <AccessibleHide role="status">loading complete</AccessibleHide>
+          )}
+        </AriaLiveRegion>
+      </div>
+      <SecondaryButton onClick={handleClick}>Generate Quote</SecondaryButton>
+    </>
+  );
+};
+
+const robotQuotes = [
+  'The Zeroth Law: A robot may not harm humanity, or, by inaction, allow humanity to come to harm.',
+  'Law 1: A robot may not injure a human being or, through inaction, allow a human being to come to harm.',
+  'Law 2: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.',
+  'Law 3: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.',
+  'There is nothing so eternally adhesive as the memory of power.',
+];
+
+const getQuote = () => {
+  const index = Math.floor(Math.random() * robotQuotes.length);
+  return robotQuotes[index];
 };

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -1,5 +1,6 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import {DeprecatedMenu, DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
@@ -9,7 +10,15 @@ import Headers from './examples/Headers';
 import ManyItems from './examples/ManyItems';
 
 
-# Canvas Kit Menu (deprecated)
+# Canvas Kit Menu
+
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`Menu` in Preview been deprecated and will be removed in a future major version. Please use
+[Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic)
+instead.
 
 `DeprecatedMenu` displays a list of options when triggered by an action or UI element like an icon
 or button.

package/dist/mdx/preview-react/radio/Radio.mdx

@@ -73,11 +73,8 @@ It will forward `ref` to its underlying `<input type="radio">` element.
 
 ### Label Position
 
-Set the `labelPosition` prop of the wrapping `FormField` to designate the position of the label
-relative to the `RadioGroup`. `labelPosition` accepts the following values:
-
-- `FormField.LabelPosition.Top` (Default)
-- `FormField.LabelPosition.Left`
+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`.
 
 <ExampleCodeBlock code={LabelPosition} />
 

package/dist/mdx/preview-react/radio/examples/Basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -15,8 +15,15 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="pizza-crust" onChange={handleChange} width="200px" value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input
+          as={RadioGroup}
+          name="pizza-crust"
+          onChange={handleChange}
+          width="200px"
+          value={value}
+        >
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
@@ -24,7 +31,7 @@ export default () => {
           <RadioGroup.RadioButton value="custom">
             Butter - the best thing to put on bread
           </RadioGroup.RadioButton>
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       Value selected: {value}
     </Flex>

package/dist/mdx/preview-react/radio/examples/Custom.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -15,8 +15,15 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="pizza-crust-custom" onChange={handleChange} width="200px" value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input
+          as={RadioGroup}
+          name="pizza-crust-custom"
+          onChange={handleChange}
+          width="200px"
+          value={value}
+        >
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="deep-dish" />
             <RadioGroup.Label.Text color="berrySmoothie400">Deep dish</RadioGroup.Label.Text>
@@ -29,7 +36,7 @@ export default () => {
             <RadioGroup.Label.Input value="cauliflower" />
             <RadioGroup.Label.Text color="berrySmoothie400">Cauliflower</RadioGroup.Label.Text>
           </RadioGroup.Label>
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       Value selected: {value}
     </Flex>

package/dist/mdx/preview-react/radio/examples/Disabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,15 +12,16 @@ export default () => {
     }
   };
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-      <RadioGroup name="crust-disabled" onChange={handleChange} value={value}>
+    <FormField as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-disabled" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton disabled value="gluten-free">
           Gluten free (sold out)
         </RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

package/dist/mdx/preview-react/radio/examples/Error.tsx

@@ -13,7 +13,7 @@ export default () => {
   };
 
   return (
-    <FormField error="error">
+    <FormField error="error" as="fieldset">
       <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
       <FormField.Input as={RadioGroup} name="crust-error" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>

package/dist/mdx/preview-react/radio/examples/Inverse.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {styled} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {styled, StyledType} from '@workday/canvas-kit-react/common';
 import {colors} from '@workday/canvas-kit-react/tokens';
 
-const StyledFormField = styled(FormField)({
+const StyledFormField = styled(FormField)<StyledType>({
   legend: {
     color: colors.frenchVanilla100,
   },
@@ -23,12 +23,9 @@ export default () => {
 
   return (
     <Box backgroundColor="blueberry400" padding="s">
-      <StyledFormField
-        label="Choose Your Pizza Crust"
-        labelPosition={FormField.LabelPosition.Top}
-        useFieldset={true}
-      >
-        <RadioGroup name="crust-inverse" onChange={handleChange} value={value}>
+      <StyledFormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>
           <RadioGroup.RadioButton variant="inverse" value="deep-dish">
             Deep dish
           </RadioGroup.RadioButton>
@@ -41,7 +38,7 @@ export default () => {
           <RadioGroup.RadioButton variant="inverse" value="cauliflower">
             Cauliflower
           </RadioGroup.RadioButton>
-        </RadioGroup>
+        </FormField.Input>
       </StyledFormField>
     </Box>
   );

package/dist/mdx/preview-react/radio/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,17 +12,14 @@ export default () => {
     }
   };
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      labelPosition={FormField.LabelPosition.Left}
-      useFieldset={true}
-    >
-      <RadioGroup name="crust-label" onChange={handleChange} value={value}>
+    <FormField orientation="horizontal" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-label" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

package/dist/mdx/preview-react/radio/examples/NoValue.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,17 +12,14 @@ export default () => {
     }
   };
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      labelPosition={FormField.LabelPosition.Top}
-      useFieldset={true}
-    >
-      <RadioGroup name="crust-no-value" onChange={handleChange} value={value}>
+    <FormField as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name="crust-no-value" onChange={handleChange} value={value}>
         <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

package/dist/mdx/preview-react/radio/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -20,15 +20,16 @@ export default () => {
 
   return (
     <>
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name="crust-ref" onChange={handleChange} value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name="crust-ref" onChange={handleChange} value={value}>
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="gluten-free" ref={glutenFreeRef}>
             Gluten free
           </RadioGroup.RadioButton>
           <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>
     </>

package/dist/mdx/preview-react/radio/examples/Required.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,14 +12,10 @@ export default () => {
     }
   };
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      required={true}
-      useFieldset={true}
-      hintText="You must choose a crust"
-      hintId="choose-crust"
-    >
-      <RadioGroup
+    <FormField isRequired={true} as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input
+        as={RadioGroup}
         name="crust-required"
         onChange={handleChange}
         value={value}
@@ -29,7 +25,8 @@ export default () => {
         <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
         <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>You must choose a crust</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/preview-react/radio/examples/StandaloneRadio.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -15,10 +15,12 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <Flex gap="m">
           <Flex as="label" gap="xs">
-            <StyledRadioButton
+            <FormField.Input
+              as={StyledRadioButton}
               onChange={handleChange}
               value="deep-dish"
               name="pizza-crust-standalone"
@@ -27,7 +29,8 @@ export default () => {
             Deep dish
           </Flex>
           <Flex as="label" gap="xs">
-            <StyledRadioButton
+            <FormField.Input
+              as={StyledRadioButton}
               onChange={handleChange}
               value="gluten-free"
               checked={value === 'gluten-free'}

package/dist/mdx/preview-react/text-area/TextArea.mdx

@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
@@ -18,6 +19,14 @@ import ResizeConstraints from './examples/ResizeConstraints';
 
 # Canvas Kit Text Area
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`TextArea` in Preview 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.
+
 TextArea's allow users to enter and edit multiple lines of text.
 
 [> Workday Design Reference](https://design.workday.com/components/inputs/text-area)

package/dist/mdx/preview-react/text-input/TextInput.mdx

@@ -1,6 +1,7 @@
 import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -22,6 +23,14 @@ import Alert from './examples/Alert';
 
 # Canvas Kit Text Input
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`TextInput` in Preview 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.
+
 Text Inputs allow users to enter words or characters without styling.
 
 [> Workday Design Reference](https://design.workday.com/components/inputs/text-input)
@@ -68,8 +77,9 @@ of the immutiblity.
 
 ### Hidden
 
-Set `TextInput.Field`'s `type` prop to
-`hidden` to completly hide a field while still submitting its value, often used for things like security tokens. Note: You will likely need to manually set`aria-describedby={undefined}`and`id={undefined}`
+Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while still submitting its
+value, often used for things like security tokens. Note: You will likely need to manually
+set`aria-describedby={undefined}`and`id={undefined}`
 
 <ExampleCodeBlock code={Hidden} />