@workday/canvas-kit-docs 6.3.2 → 6.3.6

package/dist/mdx/preview-react/_examples/SelectWithFormik.mdx

@@ -0,0 +1,8 @@
+import SelectWithFormik from './examples/SelectWithFormik';
+
+
+# Canvas Kit Examples
+
+## Select With Formik
+
+<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithFormik.mdx

@@ -0,0 +1,8 @@
+import TextInputWithFormik from './examples/TextInputWithFormik';
+
+
+# Canvas Kit Examples
+
+## Text Input With Formik
+
+<ExampleCodeBlock code={TextInputWithFormik} />

package/dist/mdx/preview-react/_examples/examples/SelectWithFormik.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {useFormik} from 'formik';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {
+  FormField,
+  useFormFieldInput,
+  useFormFieldModel,
+} from '@workday/canvas-kit-preview-react/form-field';
+
+export default () => {
+  const formik = useFormik({
+    initialValues: {
+      selectedBook: '',
+    },
+    onSubmit: data => {
+      console.log(data);
+    },
+  });
+
+  const model = useFormFieldModel();
+  const formFieldInputProps = useFormFieldInput(model);
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <FormField orientation="vertical" alignItems="stretch">
+        <FormField.Label>Choose a book</FormField.Label>
+        <Select
+          name="selectedBook"
+          options={bookList}
+          onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
+          value={formik.values.selectedBook}
+          grow
+          {...formFieldInputProps}
+        />
+      </FormField>
+    </form>
+  );
+};
+
+const bookList = [
+  {label: 'Dessert Person by Claire Saffitz', value: 'dessert person'},
+  {label: 'Elements of Pizza by Ken Forkish', value: 'the elements of pizza'},
+  {label: 'Flour Water Salt Yeast by Ken Forkish', value: 'flour water salt yeast'},
+  {label: 'Mastering Pasta by Marc Verti', value: 'mastering pasta'},
+  {label: 'Patisserie by Christophe Felder', value: 'patisserie'},
+  {label: 'Tartine by Elisabeth Prueitt & Chad Robertson', value: 'tartine'},
+];

package/dist/mdx/preview-react/{text-input/examples/LoginForm.tsx → _examples/examples/TextInputWithFormik.tsx}

@@ -48,9 +48,9 @@ export default () => {
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
-      <VStack spacing='xs' alignItems='flex-start'>
+      <VStack spacing="xs" alignItems="flex-start">
         <TextInput
-          orientation='vertical'
+          orientation="vertical"
           isRequired={true}
           hasError={formik.touched.email && !!formik.errors.email}
         >
@@ -66,7 +66,7 @@ export default () => {
           <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
         </TextInput>
         <TextInput
-          orientation='vertical'
+          orientation="vertical"
           id={passwordId}
           hasError={formik.touched.password && !!formik.errors.password}
           isRequired={true}

package/dist/mdx/preview-react/form-field/FormField.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 
 import Custom from './examples/Custom';
+import WithSelect from './examples/Select';
 
 
 # Canvas Kit Form Field
@@ -20,8 +21,19 @@ yarn add @workday/canvas-kit-preview-react
 
 ### Customizing With Behavior Hooks Example
 
-If you need full customization you can use the form field behavior hooks to build your own solution.
-It is also easy it work with custom components or third party libraries and get the CKR
+If you need full customization you can use the `FormField` behavior hooks to build your own
+solution. It is also easy it work with custom components or third party libraries and get the CKR
 accessibility guarantees by using the `as` prop.
 
-<ExampleCodeBlock code={Custom} />
+<ExampleCodeBlock code={Custom} />
+
+### Use with Select
+
+For some custom inputs, such as Canvas Kit's `Select`, you won't be able to reliably cast the
+`FormField.Input` with the `as` prop. Instead you'll want to use `FormField`'s hooks for the
+implementation. In the example below, we're using the `useFormFieldModel` hook to hoist the model
+and providing it to the `useFormFieldInput` behavior hook. Then we pass the model to the `FormField`
+component and the input props to `Select`. This connects `Select` to the `FormField` components and
+provides it with all the accessible attributes it needs.
+
+<ExampleCodeBlock code={WithSelect} />

package/dist/mdx/preview-react/form-field/examples/Custom.tsx

@@ -45,7 +45,7 @@ export default () => {
 
   const model = useFormFieldModel({isRequired: true});
 
-  const layoutProps = useFormFieldOrientation('vertical')
+  const layoutProps = useFormFieldOrientation('vertical');
 
   return (
     <Stack {...layoutProps}>

package/dist/mdx/preview-react/form-field/examples/Select.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {
+  FormField,
+  useFormFieldInput,
+  useFormFieldModel,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+
+export default () => {
+  const [selected, setSelected] = React.useState(wineList[0].value);
+  // Hoist the FormField model so we can pass it to `useFormFieldInput`
+  const model = useFormFieldModel({isRequired: true});
+  // Get all the FormField-related input props to pass to `Select`
+  const formFieldInputProps = useFormFieldInput(model);
+
+  return (
+    <FormField orientation="vertical" model={model}>
+      <FormField.Label>Choose a wine</FormField.Label>
+      <Select
+        options={wineList}
+        value={selected}
+        onChange={event => setSelected(event.currentTarget.value)}
+        {...formFieldInputProps}
+      />
+      <FormField.Hint>When in doubt, go with the Chianti.</FormField.Hint>
+    </FormField>
+  );
+};
+
+export default [
+  {label: 'Beaujolais', value: 'beaujolais'},
+  {label: 'Bordeaux', value: 'bordeaux'},
+  {label: 'Cabernet Sauvignon', value: 'cabernet sauvignon'},
+  {label: 'Champagne', value: 'champagne'},
+  {label: 'Chardonnay', value: 'chardonnay'},
+  {label: 'Chianti', value: 'chianti'},
+  {label: 'Malbec', value: 'malbec'},
+  {label: 'Merlot', value: 'merlot'},
+  {label: 'Pinot Grigio', value: 'pinot grigio'},
+  {label: 'Pinot Gris', value: 'pinot gris'},
+  {label: 'Pinot Noir', value: 'pinot noir'},
+  {label: 'Primitivo', value: 'primitivo'},
+  {label: 'Prosecco', value: 'prosecco'},
+  {label: 'Riesling', value: 'riesling'},
+  {label: 'Rioja', value: 'rioja'},
+  {label: 'Rosé', value: 'rosé'},
+  {label: 'Sauvignon Blanc', value: 'sauvignon blanc'},
+  {label: 'Syrah', value: 'syrah'},
+  {label: 'Zinfandel', value: 'zinfandel'},
+];

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
 import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
@@ -16,10 +16,15 @@ export default () => {
     value.length < 3 ? 'success' : value.length < 7 ? 'alert' : 'error'
   );
 
-  const hintColor = value.length < 3 ? colors.greenApple600 : value.length < 7 ? colors.cantaloupe600 : colors.cinnamon500
+  const hintColor =
+    value.length < 3
+      ? colors.greenApple600
+      : value.length < 7
+      ? colors.cantaloupe600
+      : colors.cinnamon500;
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Add a comment</TextArea.Label>
       <TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>

package/dist/mdx/preview-react/text-area/examples/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/Disabled.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field disabled onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/Error.tsx

@@ -31,7 +31,7 @@ export default () => {
   };
 
   return (
-    <TextArea hasError={hasError} orientation='vertical'>
+    <TextArea hasError={hasError} orientation="vertical">
       <TextArea.Label>A three letter word</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
       <TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>

package/dist/mdx/preview-react/text-area/examples/Grow.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' alignItems='stretch'>
+    <TextArea orientation="vertical" alignItems="stretch">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/HiddenLabel.tsx

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
+import {accessibleHide} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,7 +12,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' spacing='zero'>
+    <TextArea orientation="vertical" spacing="zero">
       <TextArea.Label css={{...accessibleHide}}>Email</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/LabelPositionHorizontal.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='horizontal'>
+    <TextArea orientation="horizontal">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/LabelPositionVertical.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical' spacing='xxxs'>
+    <TextArea orientation="vertical" spacing="xxxs">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/Placeholder.tsx

@@ -9,13 +9,9 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field
-        placeholder="Let us know how we did!"
-        onChange={handleChange}
-        value={value}
-      />
+      <TextArea.Field placeholder="Let us know how we did!" onChange={handleChange} value={value} />
     </TextArea>
   );
 };

package/dist/mdx/preview-react/text-area/examples/RefForwarding.tsx

@@ -13,12 +13,12 @@ export default () => {
   };
 
   const handleClick = () => {
-    changeFocus(ref.current)
+    changeFocus(ref.current);
   };
 
   return (
-    <VStack spacing='xxxs' alignItems='flex-start'>
-      <TextArea orientation='vertical'>
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextArea orientation="vertical">
         <TextArea.Label>Leave a review</TextArea.Label>
         <TextArea.Field onChange={handleChange} value={value} ref={ref} />
       </TextArea>

package/dist/mdx/preview-react/text-area/examples/Required.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextArea isRequired={true} orientation='vertical'>
+    <TextArea isRequired={true} orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <TextArea.Field onChange={handleChange} value={value} />
     </TextArea>

package/dist/mdx/preview-react/text-area/examples/ResizeConstraints.tsx

@@ -14,7 +14,7 @@ export default () => {
   };
 
   return (
-    <TextArea orientation='vertical'>
+    <TextArea orientation="vertical">
       <TextArea.Label>Leave a review</TextArea.Label>
       <StyledField onChange={handleChange} value={value} />
     </TextArea>

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

@@ -16,7 +16,6 @@ import ThemedAlert from './examples/ThemedAlert';
 import ThemedError from './examples/ThemedError';
 import Error from './examples/Error';
 import Alert from './examples/Alert';
-import LoginForm from './examples/LoginForm';
 
 
 # Canvas Kit Text Input
@@ -128,12 +127,6 @@ used in an outer ring.
 
 <ExampleCodeBlock code={ThemedAlert} />
 
-#### Full example
-
-Login Form using Formik
-
-<ExampleCodeBlock code={LoginForm} />
-
 ## Props
 
 Undocumented props are spread to the underlying `<input>` element.

package/dist/mdx/preview-react/text-input/examples/Alert.tsx

@@ -17,14 +17,9 @@ export default () => {
   );
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
-      <TextInput.Field
-        css={alertStyles}
-        onChange={handleChange}
-        value={value}
-        type="password"
-      />
+      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} type="password" />
       <TextInput.Hint paddingTop={space.xxs}>
         <strong>Password Strength: </strong>
         {value.length < 3 ? (

package/dist/mdx/preview-react/text-input/examples/Basic.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Disabled.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} disabled />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Error.tsx

@@ -31,7 +31,7 @@ export default () => {
   };
 
   return (
-    <TextInput hasError={hasError} orientation='vertical'>
+    <TextInput hasError={hasError} orientation="vertical">
       <TextInput.Label>A three letter word</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>

package/dist/mdx/preview-react/text-input/examples/Grow.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical' alignItems='stretch'>
+    <TextInput orientation="vertical" alignItems="stretch">
       <TextInput.Label>Street Address</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import {jsx} from '@emotion/core';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
+import {accessibleHide} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,7 +12,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical' spacing='zero'>
+    <TextInput orientation="vertical" spacing="zero">
       <TextInput.Label css={{...accessibleHide}}>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='horizontal'>
+    <TextInput orientation="horizontal">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/LabelPositionVertical.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical' spacing='xxxs'>
+    <TextInput orientation="vertical" spacing="xxxs">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Password.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Password</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} type="password" />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/Placeholder.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/RefForwarding.tsx

@@ -13,12 +13,12 @@ export default () => {
   };
 
   const handleClick = () => {
-    changeFocus(ref.current)
+    changeFocus(ref.current);
   };
 
   return (
-    <VStack spacing='xxxs' alignItems='flex-start'>
-      <TextInput orientation='vertical'>
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput orientation="vertical">
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} ref={ref} />
       </TextInput>

package/dist/mdx/preview-react/text-input/examples/Required.tsx

@@ -9,7 +9,7 @@ export default () => {
   };
 
   return (
-    <TextInput isRequired={true} orientation='vertical'>
+    <TextInput isRequired={true} orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field onChange={handleChange} value={value} />
     </TextInput>

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -37,7 +37,7 @@ const AlertInput = () => {
   const alertStyles = useThemedRing('alert');
 
   return (
-    <TextInput orientation='vertical'>
+    <TextInput orientation="vertical">
       <TextInput.Label>Email</TextInput.Label>
       <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
       <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>

package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx

@@ -25,12 +25,10 @@ export default () => {
 
   return (
     <CanvasProvider theme={theme}>
-      <TextInput hasError={!value} isRequired={true} orientation='vertical'>
+      <TextInput hasError={!value} isRequired={true} orientation="vertical">
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>
-          {!value && 'Please enter an email.'}
-        </TextInput.Hint>
+        <TextInput.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</TextInput.Hint>
       </TextInput>
     </CanvasProvider>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.3.2",
+  "version": "6.3.6",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.3.2"
+    "@workday/canvas-kit-react": "^6.3.6"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "5f58fc1dee07c295db44d0b064b6ef384dcdc9c8"
+  "gitHead": "3322ef6ba113940373412840edd14d35a7a3093c"
 }