@workday/canvas-kit-docs 6.0.4 → 6.1.0

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,21 @@
+import React from 'react';
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextArea orientation='vertical'>
+      <TextArea.Label>Leave a review</TextArea.Label>
+      <TextArea.Field
+        placeholder="Let us know how we did!"
+        onChange={handleChange}
+        value={value}
+      />
+    </TextArea>
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {changeFocus} from '@workday/canvas-kit-react/common';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+  const ref = React.useRef(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleClick = () => {
+    changeFocus(ref.current)
+  };
+
+  return (
+    <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>
+      <SecondaryButton onClick={handleClick}>Focus Text Area</SecondaryButton>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,22 @@
+import React from 'react';
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+import {styled} from '@workday/canvas-kit-react/common';
+
+const StyledField = styled(TextArea.Field)({
+  resize: 'vertical',
+});
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextArea orientation='vertical'>
+      <TextArea.Label>Leave a review</TextArea.Label>
+      <StyledField onChange={handleChange} value={value} />
+    </TextArea>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/TextInput.mdx

@@ -1,11 +1,12 @@
 import {Specifications} from '@workday/canvas-kit-docs';
 
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import Grow from './examples/Grow';
-import LabelPosition from './examples/LabelPosition';
+import LabelPositionHorizontal from './examples/LabelPositionHorizontal';
+import LabelPositionVertical from './examples/LabelPositionVertical';
 import Placeholder from './examples/Placeholder';
 import RefForwarding from './examples/RefForwarding';
 import Required from './examples/Required';
@@ -27,7 +28,7 @@ Text Inputs allow users to enter words or characters without styling.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-react
+yarn add @workday/canvas-kit-preview-react
 ```
 
 ## Usage
@@ -38,21 +39,21 @@ yarn add @workday/canvas-kit-react
 
 ### Disabled
 
-Set the `disabled` prop of the TextInput.Field to prevent users from interacting with it.
+Use `TextInput.Field`s `disabled` prop to prevent users from interacting with it.
 
 <ExampleCodeBlock code={Disabled} />
 
 ### Placeholder
 
-Set the `placeholder` prop of the TextInput.Field to display a sample of its expected format or
-value before a value has been provided.
+Use `TextInput.Field`s `placeholder` prop to display a sample of its expected format or value before
+a value has been provided.
 
 <ExampleCodeBlock code={Placeholder} />
 
 ### Required
 
-Set the `isRequired` property property from useTextInputModel to indicate that the field is
-required. This will also add an red asterisk next to your TextInput.Label.
+Use `TextInput.Field`'s `isRequired` prop (or use with the `useTextInputModel` hook) to indicate
+that the field is required. This will also add a red asterisk to `TextInput.Label`.
 
 <ExampleCodeBlock code={Required} />
 
@@ -67,34 +68,42 @@ All the TextInput subcomponents support
 ### Grow
 
 There are lots of ways to accomplish this. The TextInput.Field extends from Box so it is easy to
-extend full width, e.g. setting width prop to 100%, or you can wrap the whole TextInput in it a Flex
-and set the growth that way, etc.
+extend full width, e.g. setting width prop to 100%, or you can set the `alignItems` prop to
+`stretch` on `TextInput`, etc.
 
 <ExampleCodeBlock code={Grow} />
 
 ### Label Position
 
-Setting the Label position can be done using HStack or VStack
+Use the `orientation` property to set `TextInput.Label`'s position. You can override the default
+spacing using the `spacing` prop. Below are examples of both positions:
 
-<ExampleCodeBlock code={LabelPosition} />
+#### Horizontal
+
+<ExampleCodeBlock code={LabelPositionHorizontal} />
+
+#### Vertical
+
+<ExampleCodeBlock code={LabelPositionVertical} />
 
 ### Visually Hiding The Label
 
-If your label is just for screen reader users you can add the isVisuallyHidden to TextInput.Label
+If your label is just for screen reader users you can use the `accessibleHide` utility class from
+`@workday/canvas-kit-react/common`. You will likely want to set the `spacing` prop on `TextInput` to
+`zero`.
 
 <ExampleCodeBlock code={HiddenLabel} />
 
 ### Type
 
-Set the `type` prop TextInput.Field to any allowed string, e.g. password to change the input field
-type.
+Use `TextInput.Field`'s `type` prop to customize the input type, e.g. `password`, `email`, etc.
 
 <ExampleCodeBlock code={Password} />
 
 ### Error States
 
-Use the `hasError` property from useTextInputModel to set the TextInput to the Error state. If you
-have an accompanying hint you can use the TextInput.Hint subcomponent.
+Use the `hasError` property from `useTextInputModel` to set the `TextInput` to the Error state. If
+you have an accompanying hint you can use the TextInput.Hint subcomponent.
 
 #### Errors
 
@@ -114,10 +123,23 @@ Use the `useThemedRing` hook to change the visual state of the input field.
 
 #### Themed Alerts
 
+If the your theme's `main` color doesn't meet accessibility contrast, the `darkest` color will be
+used in an outer ring.
+
 <ExampleCodeBlock code={ThemedAlert} />
 
 #### Full example
 
 Login Form using Formik
 
-<ExampleCodeBlock code={LoginForm} />
+<ExampleCodeBlock code={LoginForm} />
+
+## Props
+
+Undocumented props are spread to the underlying `<input>` element.
+
+<ArgsTable of={TextInput} />
+
+## Specifications
+
+<Specifications file="TextInputPreview.spec.ts" name="Text Input" />

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

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const [value, setValue] = React.useState('foo');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing(
+    value.length < 3 ? 'error' : value.length < 5 ? 'alert' : 'success'
+  );
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Password</TextInput.Label>
+      <TextInput.Field
+        css={alertStyles}
+        onChange={handleChange}
+        value={value}
+        type="password"
+      />
+      <TextInput.Hint paddingTop={space.xxs}>
+        <strong>Password Strength: </strong>
+        {value.length < 3 ? (
+          <span>Weak</span>
+        ) : value.length < 5 ? (
+          <span>Average</span>
+        ) : (
+          <span>Strong</span>
+        )}
+      </TextInput.Hint>
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react/text-input/examples/HiddenLabel.tsx → preview-react/text-input/examples/Basic.tsx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -9,8 +9,8 @@ export default () => {
   };
 
   return (
-    <TextInput>
-      <TextInput.Label isVisuallyHidden={true}>Email</TextInput.Label>
+    <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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} disabled />
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/Error.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
@@ -32,12 +31,10 @@ export default () => {
   };
 
   return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput hasError={hasError}>
-        <TextInput.Label>A three letter word</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
-      </TextInput>
-    </VStack>
+    <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>
+    </TextInput>
   );
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+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';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical' spacing='xxxs'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

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

@@ -3,7 +3,7 @@ import React from 'react';
 import {useFormik} from 'formik';
 import * as yup from 'yup';
 
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {HStack, VStack} from '@workday/canvas-kit-labs-react/layout';
 import {IconButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
@@ -48,8 +48,12 @@ export default () => {
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
-      <VStack spacing="xs" alignItems="flex-start">
-        <TextInput isRequired={true} hasError={formik.touched.email && !!formik.errors.email}>
+      <VStack spacing='xs' alignItems='flex-start'>
+        <TextInput
+          orientation='vertical'
+          isRequired={true}
+          hasError={formik.touched.email && !!formik.errors.email}
+        >
           <TextInput.Label>Email</TextInput.Label>
           <TextInput.Field
             name="email"
@@ -62,7 +66,8 @@ export default () => {
           <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
         </TextInput>
         <TextInput
-          inputId={passwordId}
+          orientation='vertical'
+          id={passwordId}
           hasError={formik.touched.password && !!formik.errors.password}
           isRequired={true}
         >
@@ -81,7 +86,7 @@ export default () => {
               type="button"
               icon={showPassword ? invisibleIcon : visibleIcon}
               aria-label={showPassword ? 'Hide Password' : 'Show Password'}
-              aria-controls={passwordId}
+              aria-controls={`input-${passwordId}`}
               onClick={() => {
                 setShowPassword(state => !state);
                 passwordRef.current.focus();

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('SuperSecret1');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/RefForwarding.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {changeFocus} from '@workday/canvas-kit-react/common';
 import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,16 +13,16 @@ export default () => {
   };
 
   const handleClick = () => {
-    ref.current.focus();
+    changeFocus(ref.current)
   };
 
   return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
+    <VStack spacing='xxxs' alignItems='flex-start'>
+      <TextInput orientation='vertical'>
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} ref={ref} />
       </TextInput>
-      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
+      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
     </VStack>
   );
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <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

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        alert: {
+          main: colors.kiwi200,
+          darkest: colors.kiwi600,
+        },
+      },
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <AlertInput />
+    </CanvasProvider>
+  );
+};
+
+const AlertInput = () => {
+  const [value, setValue] = React.useState('invalid@email');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <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>
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/ThemedError.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 
@@ -26,15 +25,13 @@ export default () => {
 
   return (
     <CanvasProvider theme={theme}>
-      <VStack spacing="xxxs" alignItems="flex-start">
-        <TextInput hasError={!value} isRequired={true}>
-          <TextInput.Label>Email</TextInput.Label>
-          <TextInput.Field onChange={handleChange} value={value} />
-          <TextInput.Hint paddingTop={space.xxs}>
-            {!value && 'Please enter an email.'}
-          </TextInput.Hint>
-        </TextInput>
-      </VStack>
+      <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>
     </CanvasProvider>
   );
 };

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -0,0 +1,9 @@
+import Basic from './examples/GlobalHeader';
+
+
+# Canvas Kit Examples
+
+## GlobalHeader
+Developers building internal Workday applications will likely not need to create this component. However, if you're building components to be used outside of Workday, this is a helpful reference for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={Basic} />