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

package/dist/mdx/react/select/examples/DisabledOption.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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -26,27 +26,29 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item
-                    aria-disabled={
-                      item === 'Mobile Phone' || item === 'Fax (disabled)' ? true : undefined
-                    }
-                  >
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
+            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => (
+                    <Select.Item
+                      aria-disabled={
+                        item === 'Mobile Phone' || item === 'Fax (disabled)' ? true : undefined
+                      }
+                    >
+                      {item}
+                    </Select.Item>
+                  )}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

package/dist/mdx/react/select/examples/Error.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 {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -25,24 +25,26 @@ export default () => {
   };
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField error="error">
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-          <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>
-        </FormField>
-      </Select>
+      <FormField error="error">
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
+            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => (
+                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
+                      {item}
+                    </Select.Item>
+                  )}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

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

@@ -75,25 +75,29 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select model={model}>
-        <FormField label="Choose a Film">
-          <Select.Input
-            onChange={e => {
-              setId(e.target.value);
-            }}
-            placeholder={loadingStatus}
-          />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => {
-                  return <Select.Item>{item.label}</Select.Item>;
-                }}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Choose a Film</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input
+              as={Select.Input}
+              onChange={e => {
+                setId(e.target.value);
+              }}
+              placeholder={loadingStatus}
+            />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => {
+                    return <Select.Item>{item.label}</Select.Item>;
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <div data-testid="selected-id">Selected Id: {id}</div>
       <div data-testid="selected-value">Selected value: {stringValue}</div>
       <PrimaryButton

package/dist/mdx/react/select/examples/Grow.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 {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -19,17 +19,19 @@ export default () => {
 
   return (
     <Flex>
-      <Select model={model}>
-        <FormField grow>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input grow as={Select.Input} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField grow>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
     </Flex>
   );
 };

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-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
@@ -20,17 +20,19 @@ export default () => {
 
   return (
     <>
-      <Select model={model}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <BodyText size="small">Selected Value: {model.state.selectedIds[0]}</BodyText>
       <SecondaryButton
         onClick={() => {

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

@@ -43,21 +43,24 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select
-        items={options}
-        initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
-        getId={item => item.id}
-        getTextValue={item => item.label}
-      >
-        <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select
+            items={options}
+            initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
+            getId={item => item.id}
+            getTextValue={item => item.label}
+          >
+            <Select.Input onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <p>Id: {id}</p>
       <p>Value: {value}</p>
     </Flex>

package/dist/mdx/react/select/examples/LabelPosition.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 {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -19,17 +19,20 @@ export default () => {
 
   return (
     <Flex>
-      <Select model={model}>
-        <FormField orientation="horizontal">
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>Choose a form of contact</FormField.Hint>
+          </Select>
+        </FormField.Field>
+      </FormField>
     </Flex>
   );
 };

package/dist/mdx/react/select/examples/MenuHeight.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 {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
@@ -45,14 +45,16 @@ export default () => {
     <Box>
       <FormField>
         <FormField.Label>Choose a City</FormField.Label>
-        <Select items={cities}>
-          <FormField.Input as={Select.Input} />
-          <Select.Popper>
-            <Select.Card cs={selectCardStyles}>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </Select>
+        <FormField.Field>
+          <Select items={cities}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card cs={selectCardStyles}>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
       </FormField>
     </Box>
   );

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

@@ -26,20 +26,23 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options}>
-        <FormField label="Contact">
-          <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => {
-                  return <Select.Item>{item}</Select.Item>;
-                }}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => {
+                    return <Select.Item>{item}</Select.Item>;
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

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-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 
 const options = [
@@ -13,6 +13,7 @@ const options = [
 ];
 
 export default () => {
+  // @ts-ignore
   const [value, setValue] = React.useState('medium');
   const ref = React.useRef(null);
 
@@ -30,15 +31,17 @@ export default () => {
   return (
     <>
       <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>
-        </Select>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <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>
+          </Select>
+        </FormField.Field>
       </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-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -27,15 +27,17 @@ export default () => {
   return (
     <Flex cs={parentContainerStyles}>
       <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>
-        </Select>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <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>
+          </Select>
+        </FormField.Field>
       </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-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -34,28 +34,30 @@ export default () => {
   return (
     <Flex>
       <FormField>
-        <Select model={model}>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input
-            as={Select.Input}
-            cs={styleOverrides.formfieldInputStyles}
-            inputStartIcon={selectedItem.value.icon}
-          />
-          <Select.Popper>
-            <Select.Card cs={styleOverrides.selectCardStyles}>
-              {model.state.items.length > 0 && (
-                <Select.List>
-                  {item => (
-                    <Select.Item data-id={item.id}>
-                      <Select.Item.Icon icon={item.icon} />
-                      {item.text}
-                    </Select.Item>
-                  )}
-                </Select.List>
-              )}
-            </Select.Card>
-          </Select.Popper>
-        </Select>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input
+              as={Select.Input}
+              cs={styleOverrides.formfieldInputStyles}
+              inputStartIcon={selectedItem.value.icon}
+            />
+            <Select.Popper>
+              <Select.Card cs={styleOverrides.selectCardStyles}>
+                {model.state.items.length > 0 && (
+                  <Select.List>
+                    {item => (
+                      <Select.Item data-id={item.id}>
+                        <Select.Item.Icon icon={item.icon} />
+                        {item.text}
+                      </Select.Item>
+                    )}
+                  </Select.List>
+                )}
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
       </FormField>
     </Flex>
   );

package/dist/mdx/react/skeleton/Skeleton.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Color from './examples/Color';
 import Header from './examples/Header';
@@ -9,7 +6,6 @@ import Shape from './examples/Shape';
 import Simulation from './examples/Simulation';
 import Text from './examples/Text';
 
-
 # Canvas Kit Skeleton
 
 A Skeleton is a low-fidelity visual placeholder that represents the loading of interface elements

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-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-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,11 @@ export default () => {
   return (
     <Box>
       <Box marginBottom="l">
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Load Time</FormField.Label>
           <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />
         </FormField>
-        <FormField orientation="horizontal">
+        <FormField orientation="horizontalStart">
           <FormField.Label>Loading</FormField.Label>
           <FormField.Input as={Checkbox} checked={loading} onChange={onChangeLoading} />
         </FormField>

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

@@ -1,19 +1,16 @@
-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 {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
 import MaxWidth from './examples/MaxWidth';
 
-
 # Canvas Kit Status Indicator
 
-<PreviewStatusIndicator variant="red">
-  <PreviewStatusIndicator.Label>Deprecated</PreviewStatusIndicator.Label>
-</PreviewStatusIndicator>
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
 
 `StatusIndicator` in Main has been deprecated and will be removed in a future major version. Please
 use

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

@@ -1,7 +1,9 @@
-import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
-
-import {Switch} from '@workday/canvas-kit-react/switch';
-
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  InformationHighlight,
+} from '@workday/canvas-kit-docs';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
@@ -9,7 +11,6 @@ import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import RefForwarding from './examples/RefForwarding';
 
-
 # Canvas Kit Switch
 
 Switch is a selection control that is used to switch between two potential states.
@@ -24,18 +25,6 @@ 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