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

package/dist/mdx/react/radio/examples/Error.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 {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,19 +11,15 @@ export default () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Deep dish is currently sold out."
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField error="error" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
+      <FormField.Hint>Deep dish is currently sold out</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/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 {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,17 +11,14 @@ export default () => {
   };
 
   return (
-    <FormField
-      label="Choose Your Pizza Crust"
-      labelPosition={FormField.LabelPosition.Left}
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField orientation="horizontal" as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

package/dist/mdx/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 {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {Subtext} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
@@ -13,13 +13,14 @@ export default () => {
 
   return (
     <>
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
           <Radio label="Deep dish" />
           <Radio label="Thin" />
           <Radio label="Gluten free" />
           <Radio label="Cauliflower" />
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       <Subtext size="large">Value: {value}</Subtext>
     </>

package/dist/mdx/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 {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -18,13 +18,14 @@ export default () => {
 
   return (
     <>
-      <FormField label="Choose Your Pizza Crust" useFieldset={true}>
-        <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+      <FormField as="fieldset">
+        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+        <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
           <Radio label="Deep dish" value="deep-dish" />
           <Radio label="Thin" value="thin" />
           <Radio label="Gluten free" ref={glutenFreeRef} value="gluten-free" />
           <Radio label="Cauliflower" value="cauliflower" />
-        </RadioGroup>
+        </FormField.Input>
       </FormField>
       <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>
     </>

package/dist/mdx/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 {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -11,13 +11,14 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" required={true} useFieldset={true}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField isRequired={true} as="fieldset">
+      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormField.Input as={RadioGroup} name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

package/dist/mdx/react/select/Select.mdx

@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Select} from '@workday/canvas-kit-react/select';
 
@@ -31,6 +31,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 `Select` supports a
@@ -76,13 +88,10 @@ trigger an event to change the selected item.
 
 <ExampleCodeBlock code={HoistedModel} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping `FormField` to designate the position of the label
-relative to the `Select`. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `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/react/select/examples/Alert.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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -21,17 +21,15 @@ export default () => {
   return (
     <Flex flexDirection="column">
       <Select items={options}>
-        <FormField
-          error={FormField.ErrorType.Alert}
-          hintText="Please choose a form of contact."
-          label="Contact"
-        >
-          <Select.Input onChange={e => handleChange(e)} id="alert-select" />
+        <FormField error="alert">
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} id="alert-select" />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
+          <FormField.Hint>Please choose a form of contact.</FormField.Hint>
         </FormField>
       </Select>
       Selected value: {value}

package/dist/mdx/react/select/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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -22,8 +22,9 @@ export default () => {
   return (
     <Flex flexDirection="column">
       <Select items={options}>
-        <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>

package/dist/mdx/react/select/examples/Complex.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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -30,8 +30,9 @@ export default () => {
   return (
     <Flex flexDirection="column">
       <Select items={options} onSelect={handleSelect}>
-        <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>

package/dist/mdx/react/select/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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -22,8 +22,9 @@ export default () => {
   return (
     <Flex flexDirection="column">
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField label="Contact">
-          <Select.Input disabled onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>

package/dist/mdx/react/select/examples/DisabledOption.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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -22,8 +22,9 @@ export default () => {
   return (
     <Flex flexDirection="column">
       <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
-        <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>

package/dist/mdx/react/select/examples/Error.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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -21,12 +21,9 @@ export default () => {
   return (
     <Flex flexDirection="column">
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField
-          error={FormField.ErrorType.Error}
-          hintText="Fax is disabled. Please choose a different option."
-          label="Contact"
-        >
-          <Select.Input onChange={e => handleChange(e)} />
+        <FormField error="error">
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>
@@ -38,6 +35,7 @@ export default () => {
               </Select.List>
             </Select.Card>
           </Select.Popper>
+          <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>
         </FormField>
       </Select>
       Selected Value: {value}

package/dist/mdx/react/select/examples/Grow.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 {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -20,8 +20,9 @@ export default () => {
   return (
     <Flex>
       <Select model={model}>
-        <FormField label="Contact" grow>
-          <Select.Input />
+        <FormField cs={{width: '100%'}}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input grow as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               {model.state.items.length > 0 && (

package/dist/mdx/react/select/examples/HoistedModel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {SecondaryButton} 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 {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
@@ -22,8 +22,9 @@ export default () => {
   return (
     <>
       <Select model={model}>
-        <FormField label="Contact">
-          <Select.Input />
+        <FormField>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               <Select.List>

package/dist/mdx/react/select/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 {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -20,8 +20,9 @@ export default () => {
   return (
     <Flex>
       <Select model={model}>
-        <FormField label="Contact" labelPosition={FormField.LabelPosition.Left}>
-          <Select.Input />
+        <FormField orientation="horizontal">
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
               {model.state.items.length > 0 && (

package/dist/mdx/react/select/examples/MenuHeight.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 {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
 
@@ -38,9 +38,10 @@ const cities = [
 export default () => {
   return (
     <Box>
-      <FormField label="Choose a City">
+      <FormField>
+        <FormField.Label>Choose a City</FormField.Label>
         <Select items={cities}>
-          <Select.Input />
+          <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card maxHeight={200}>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>

package/dist/mdx/react/select/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 {Select} from '@workday/canvas-kit-react/select';
 
 const options = [
@@ -14,7 +14,7 @@ const options = [
 
 export default () => {
   const [value, setValue] = React.useState('medium');
-  const ref = React.useRef<HTMLInputElement>(null);
+  const ref = React.useRef(null);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -28,16 +28,17 @@ export default () => {
 
   return (
     <>
-      <Select items={options}>
-        <FormField label="Contact">
-          <Select.Input ref={ref} onChange={e => handleChange(e)} />
+      <FormField>
+        <Select items={options}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
-        </FormField>
-      </Select>
+        </Select>
+      </FormField>
       <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>
     </>
   );

package/dist/mdx/react/select/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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -21,16 +21,17 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <Select items={options}>
-        <FormField label="Contact" required>
-          <Select.Input onChange={e => handleChange(e)} />
+      <FormField isRequired>
+        <Select items={options}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
-        </FormField>
-      </Select>
+        </Select>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

package/dist/mdx/react/select/examples/WithIcons.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 {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -23,9 +23,14 @@ export default () => {
   const selectedItem = model.navigation.getItem(model.state.selectedIds[0], model);
   return (
     <Flex>
-      <Select model={model}>
-        <FormField label="Contact">
-          <Select.Input width="300px" inputStartIcon={selectedItem.value.icon} />
+      <FormField>
+        <Select model={model}>
+          <FormField.Label>Contact</FormField.Label>
+          <FormField.Input
+            as={Select.Input}
+            width="300px"
+            inputStartIcon={selectedItem.value.icon}
+          />
           <Select.Popper>
             <Select.Card maxHeight="200px">
               {model.state.items.length > 0 && (
@@ -40,8 +45,8 @@ export default () => {
               )}
             </Select.Card>
           </Select.Popper>
-        </FormField>
-      </Select>
+        </Select>
+      </FormField>
     </Flex>
   );
 };

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -3,7 +3,7 @@ import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {SystemIconCircle} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
@@ -64,11 +64,13 @@ export default () => {
   return (
     <Box>
       <Box marginBottom="l">
-        <FormField label="Load Time" labelPosition={FormField.LabelPosition.Left}>
-          <TextInput onChange={onChangeLoadTime} value={loadTime} />
+        <FormField orientation="horizontal">
+          <FormField.Label>Load Time</FormField.Label>
+          <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />
         </FormField>
-        <FormField label="Loading" labelPosition={FormField.LabelPosition.Left}>
-          <Checkbox checked={loading} onChange={onChangeLoading} />
+        <FormField orientation="horizontal">
+          <FormField.Label>Loading</FormField.Label>
+          <FormField.Input as={Checkbox} checked={loading} onChange={onChangeLoading} />
         </FormField>
         <SecondaryButton onClick={resetTimeout}>Simulate Loading</SecondaryButton>
       </Box>

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -1,6 +1,7 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {StatusIndicator as PreviewStatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
@@ -10,6 +11,15 @@ import MaxWidth from './examples/MaxWidth';
 
 # Canvas Kit Status Indicator
 
+<PreviewStatusIndicator variant="red">
+  <PreviewStatusIndicator.Label>Deprecated</PreviewStatusIndicator.Label>
+</PreviewStatusIndicator>
+
+`StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
+use
+[`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic)
+in Preview instead.
+
 Status Indicators help the user quickly identify the status of a task, action, or page element.
 
 [> Workday Design Reference](https://design.workday.com/components/indicators/status-indicators)

package/dist/mdx/react/switch/Switch.mdx

@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Switch} from '@workday/canvas-kit-react/switch';
 
@@ -24,6 +24,18 @@ yarn add @workday/canvas-kit-react
 
 ## Usage
 
+<InformationHighlight style={{margin: '1.5rem 0'}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>Note</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    These examples are using FormField from Preview. We can plan to promote this component to the
+    Main package in a future major version.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic">
+    View Form Field (Preview) Documentation
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 ### Basic Example
 
 Switch should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -44,13 +56,10 @@ Switch supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html).
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Switch. `labelPosition` accepts the following values:
+### Label Position Horizontal
 
-- `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/react/table/Table.mdx

@@ -1,6 +1,7 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {Table, TableRow} from '@workday/canvas-kit-react/table';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/Basic';
 import RowHeader from './examples/RowHeader';
@@ -9,6 +10,12 @@ import RowStates from './examples/RowStates';
 
 # Canvas Kit Table
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
+
 Tables are an efficient way of displaying sets of repeating data with the same structure.
 
 [> Workday Design Reference](https://design.workday.com/components/containers/tables)