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

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.662-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.662-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.662-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.662-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.662-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": "ffa75d9e1edd782bf454f8a88dffdc6fca2695fa"
+  "gitHead": "518377818f85c915b6199f66d73fd7e5e38ce7fa"
 }