@workday/canvas-kit-docs 5.2.11 → 5.3.0-next.18

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/preview-react/text-input/examples/LoginForm.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import {useFormik} from 'formik';
+import * as yup from 'yup';
+
+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';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const passwordMinimum = 8;
+  const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
+  const emailRequired = 'Email is required';
+  const passwordRequired = 'Password is required';
+
+  const validationSchema = yup.object({
+    email: yup
+      .string()
+      .email('Enter a valid email')
+      .required(emailRequired),
+    password: yup
+      .string()
+      .min(passwordMinimum, passwordHint)
+      .required(passwordRequired),
+  });
+
+  const passwordRef = React.useRef<HTMLInputElement>(null);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const passwordId = useUniqueId();
+
+  const formik = useFormik({
+    initialValues: {
+      email: 'example@baz.com',
+      password: 'foobarbaz',
+    },
+    validationSchema: validationSchema,
+    onSubmit: values => {
+      passwordRef.current.type = 'password';
+
+      // Send data to server
+      setTimeout(() => {
+        alert(JSON.stringify(values, null, 2));
+      }, 0);
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} action=".">
+      <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"
+            autoComplete="username"
+            placeholder="yourName@example.com"
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            value={formik.values.email}
+          />
+          <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
+        </TextInput>
+        <TextInput
+          orientation='vertical'
+          id={passwordId}
+          hasError={formik.touched.password && !!formik.errors.password}
+          isRequired={true}
+        >
+          <TextInput.Label>Password</TextInput.Label>
+          <HStack spacing="xxs">
+            <TextInput.Field
+              type={showPassword ? 'text' : 'password'}
+              name="password"
+              autoComplete="current-password"
+              ref={passwordRef}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.password}
+            />
+            <IconButton
+              type="button"
+              icon={showPassword ? invisibleIcon : visibleIcon}
+              aria-label={showPassword ? 'Hide Password' : 'Show Password'}
+              aria-controls={`input-${passwordId}`}
+              onClick={() => {
+                setShowPassword(state => !state);
+                passwordRef.current.focus();
+              }}
+            />
+          </HStack>
+          <TextInput.Hint>
+            {(formik.touched.password && formik.errors.password) || passwordHint}
+          </TextInput.Hint>
+        </TextInput>
+
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+      </VStack>
+    </form>
+  );
+};

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/preview-react/text-input/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 {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+  const ref = React.useRef(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleClick = () => {
+    changeFocus(ref.current)
+  };
+
+  return (
+    <VStack spacing='xxxs' alignItems='flex-start'>
+      <TextInput orientation='vertical'>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} ref={ref} />
+      </TextInput>
+      <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/preview-react/text-input/examples/ThemedError.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+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';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        error: {
+          main: colors.islandPunch400,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <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/button/button/Button.mdx

@@ -7,8 +7,11 @@ import {
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
+import PrimaryInverse from './examples/PrimaryInverse';
 import Secondary from './examples/Secondary';
+import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
+import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 
 
@@ -35,8 +38,17 @@ Primary Buttons are high emphasis. Use once per screen to draw attention to the
 action. Multiple primary buttons make it confusing for the user to understand what action they
 should take. Not all screens require a Primary Button.
 
+Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+
 <ExampleCodeBlock code={Primary} />
 
+Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
+Button, the default outline as well as the hover and focus states are different. Use this variant
+when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={PrimaryInverse} />
+
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.
@@ -49,10 +61,16 @@ Secondary Buttons have a medium level of emphasis. Use them for non-critical act
 Buttons can be used on most pages without restrictions and work well for multiple actions of equal
 weight. They can be used in conjunction with a Primary Button or independently.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Secondary} />
 
+Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button on
+a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={SecondaryInverse} />
+
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.
@@ -66,10 +84,17 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
 not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
-Use the `inverse` variants on dark or colorful backgrounds.
+Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
+for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Tertiary} />
 
+Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button on
+a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={TertiaryInverse} />
+
+
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <PrimaryButton>Click Me</PrimaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <PrimaryButton>Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <PrimaryButton variant="inverse">Primary</PrimaryButton>
+    <PrimaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Primary
+    </PrimaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <SecondaryButton>Click Me</SecondaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <SecondaryButton>Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <SecondaryButton variant="inverse">Secondary</SecondaryButton>
+    <SecondaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Secondary
+    </SecondaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => <TertiaryButton>Click Me</TertiaryButton>;
+export default () => (
+  <HStack spacing="s" padding="s">
+    <TertiaryButton>Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <HStack spacing="s" backgroundColor="blueberry400" padding="s">
+    <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
+    <TertiaryButton icon={plusIcon} iconPosition="right" variant="inverse">
+      Tertiary
+    </TertiaryButton>
+  </HStack>
+);

package/dist/mdx/react/tabs/Tabs.mdx

@@ -2,9 +2,11 @@ import {Tabs} from '@workday/canvas-kit-react/tabs';
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import NamedKeys from './examples/NamedKeys';
+import NamedTabs from './examples/NamedTabs';
 import RightToLeft from './examples/RightToLeft';
+import OverflowTabs from './examples/OverflowTabs';
 import DisabledTab from './examples/DisabledTab';
+import Icons from './examples/Icons';
 import SinglePanel from './examples/SinglePanel';
 import AlternativeTabStop from './examples/AlternativeTabStop';
 import HoistedModel from './examples/HoistedModel';
@@ -38,10 +40,26 @@ yarn add @workday/canvas-kit-react
 in a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the
 [W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
 
-In this example, we set up a basic `Tabs` component with five tabs.
+In this example, we set up a basic `Tabs` component with five tabs. This example uses a static API
+that does not support overflow.
 
 <ExampleCodeBlock code={Basic} />
 
+### Overflow Tabs
+
+Tabs is a responsive component based on the width of its container. If the rendered tabs exceed the
+width of the `Tabs.List`, an overflow menu will be rendered. This only works against the dynamic API
+where you give the `TabsModel` an array of items to be rendered. The dynamic API handles the React
+`key` for you based on the item's identifier. The dynamic API requires either an `id` on each item
+object or a `getId` function that returns an identifier based on the item. The below example uses an
+`id` property on each item.
+
+The dynamic API takes in any object, but since nothing is known about your object, a
+[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it
+should render.
+
+<ExampleCodeBlock code={OverflowTabs} />
+
 ### Hoisted Model
 
 By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
@@ -55,13 +73,13 @@ trigger an event to change the active tab.
 
 <ExampleCodeBlock code={HoistedModel} />
 
-### Named Keys
+### Named Tabs
 
 `Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named keys for the
+`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
 `Tabs.Item` and `Tabs.Panel` subcomponents.
 
-<ExampleCodeBlock code={NamedKeys} />
+<ExampleCodeBlock code={NamedTabs} />
 
 ### Right-to-Left (RTL)
 
@@ -75,6 +93,14 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 <ExampleCodeBlock code={DisabledTab} />
 
+### Tab Icons
+
+Tabs can have icons. You must set `hasIcon` on the `Tabs.Item` and use the `Icon` and `Text`
+subcomponent. The `hasIcon` changes the `Tabs.Item` to change where overflow detection is from the
+`Tabs.Item` element to the `Tabs.Item.Text` element.
+
+<ExampleCodeBlock code={Icons} />
+
 ### Alternative Tab Stop
 
 By default, tab panels are focusable for accessibility. If the contents of a tab panel have a

package/dist/mdx/react/tabs/examples/DisabledTab.tsx

@@ -8,7 +8,7 @@ export default () => {
     <Tabs>
       <Tabs.List>
         <Tabs.Item>First Tab</Tabs.Item>
-        <Tabs.Item disabled>Disabled Tab</Tabs.Item>
+        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>