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

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} 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 {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 
@@ -18,8 +18,10 @@ export default () => {
 
   return (
     <Modal model={model}>
-      <FormField label="Choose an option">
-        <Select
+      <FormField>
+        <FormField.Label>Choose an option</FormField.Label>
+        <FormField.Input
+          as={Select}
           ref={ref}
           options={['', 'Delete', 'Two']}
           value={value}
@@ -32,7 +34,7 @@ export default () => {
               setValue(e.currentTarget.value);
             }
           }}
-        ></Select>
+        />
       </FormField>
       <Modal.Overlay>
         <Modal.Card>

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

@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 
@@ -27,6 +27,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
 
 Radio Buttons are intended to be grouped together using a Radio Group.
@@ -38,7 +50,9 @@ Radio Group should be used in tandem with [Form Field](/components/inputs/form-f
 
 ### Disabled
 
-Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio Group. 
+Set the `disabled` prop of the Radio Button to prevent users from interacting with it. Be careful
+not to disable a pre-selected Radio Button, this will block keyboard access from the entire Radio
+Group.
 
 <ExampleCodeBlock code={Disabled} />
 
@@ -62,13 +76,10 @@ forward `ref` to its underlying `<input type="radio">` element.
 
 <ExampleCodeBlock code={RefForwarding} />
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Radio Group. `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/radio/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 {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.Alert}
-      hintId="hint-alert"
-      hintText="Deep dish is an extra $2.99"
-      label="Choose Your Pizza Crust"
-      useFieldset={true}
-    >
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField error="alert" 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 an extra $2.99</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/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 {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
@@ -12,14 +12,15 @@ export default () => {
   };
 
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true} style={{width: space.xl}}>
-      <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
+    <FormField as="fieldset" cs={{width: space.xl}}>
+      <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" />
         <Radio label="Butter - the best thing to put on bread" value="butter" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

package/dist/mdx/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 {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" 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 disabled={true} label="Gluten free (sold out)" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
-      </RadioGroup>
+      </FormField.Input>
     </FormField>
   );
 };

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>
   );