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

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)

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

@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
@@ -28,6 +28,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
 
 Text Area should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -69,20 +81,15 @@ accepts the following values:
 
 ### Grow
 
-Set the `grow` prop of the wrapping Form Field to `true` to configure the Text Area to expand to the
-width of its container.
+Set the `grow` prop of the Text Area to `true` to configure the Text Area to expand to the width of
+its container.
 
 <ExampleCodeBlock code={Grow} />
 
-The `grow` prop may also be applied directly to the Text Area if Form Field is not being used.
-
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Text Area. `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/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,13 +10,10 @@ export default () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Alert}
-      hintId="hint-alert"
-      hintText="Please enter your review."
-      label="Leave a Review"
-    >
-      <TextArea onChange={handleChange} value={value} />
+    <FormField error="alert">
+      <FormField.Label>Please enter your review.</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Hint>Please enter your review.</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea disabled onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} disabled onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,13 +10,10 @@ export default () => {
   };
 
   return (
-    <FormField
-      error={FormField.ErrorType.Error}
-      hintId="hint-error"
-      hintText="Please enter your review."
-      label="Leave a Review"
-    >
-      <TextArea onChange={handleChange} value={value} />
+    <FormField error="error">
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
+      <FormField.Hint>Please enter your review.</FormField.Hint>
     </FormField>
   );
 };

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField grow={true} label="Leave a Review">
-      <TextArea onChange={handleChange} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} grow onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Leave a Review" labelPosition={FormField.LabelPosition.Left}>
-      <TextArea onChange={handleChange} value={value} />
+    <FormField orientation="horizontal">
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/text-area/examples/Placeholder.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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,14 @@ export default () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea onChange={handleChange} placeholder="Let us know how we did!" value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input
+        as={TextArea}
+        onChange={handleChange}
+        placeholder="Let us know how we did!"
+        value={value}
+      />
     </FormField>
   );
 };

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -17,8 +17,9 @@ export default () => {
 
   return (
     <>
-      <FormField label="Leave a Review">
-        <TextArea onChange={handleChange} ref={ref} value={value} />
+      <FormField>
+        <FormField.Label>Leave a Review</FormField.Label>
+        <FormField.Input as={TextArea} onChange={handleChange} ref={ref} value={value} />
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Text Area</PrimaryButton>
     </>

package/dist/mdx/react/text-area/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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,9 @@ export default () => {
   };
 
   return (
-    <FormField label="Leave a Review" required={true}>
-      <TextArea onChange={handleChange} value={value} />
+    <FormField isRequired={true}>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input as={TextArea} onChange={handleChange} value={value} />
     </FormField>
   );
 };

package/dist/mdx/react/text-area/examples/ResizeConstraints.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 {TextArea} from '@workday/canvas-kit-react/text-area';
 
 export default () => {
@@ -10,8 +10,14 @@ export default () => {
   };
 
   return (
-    <FormField label="Leave a Review">
-      <TextArea onChange={handleChange} resize={TextArea.ResizeDirection.Vertical} value={value} />
+    <FormField>
+      <FormField.Label>Leave a Review</FormField.Label>
+      <FormField.Input
+        as={TextArea}
+        onChange={handleChange}
+        resize={TextArea.ResizeDirection.Vertical}
+        value={value}
+      />
     </FormField>
   );
 };

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

@@ -1,4 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {SymbolDoc, Specifications, InformationHighlight} from '@workday/canvas-kit-docs';
 
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
@@ -28,6 +28,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
 
 Text Input should be used in tandem with [Form Field](/components/inputs/form-field/) to meet
@@ -64,13 +76,10 @@ the width of its container.
 
 The `grow` prop may also be applied directly to the Text Input if Form Field is not being used.
 
-### Label Position
-
-Set the `labelPosition` prop of the wrapping Form Field to designate the position of the label
-relative to the Text Input. `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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.657-next.0",
+  "version": "11.0.0-alpha.664-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.657-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.657-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.657-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.657-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.664-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.664-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.664-next.0",
+    "@workday/canvas-kit-styling": "^10.3.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "524bc66bc3431b68ff6340f66a53f30a8b83e541"
+  "gitHead": "518377818f85c915b6199f66d73fd7e5e38ce7fa"
 }