@workday/canvas-kit-docs 5.3.0-next.6 → 5.3.0-next.9

package/dist/mdx/labs-react/text-input/examples/LoginForm.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import {useFormik} from 'formik';
+import * as yup from 'yup';
+
+import {TextInput} from '@workday/canvas-kit-labs-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 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
+          inputId={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={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/labs-react/text-input/examples/Password.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+
+export default () => {
+  const [value, setValue] = React.useState('SuperSecret1');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput>
+        <TextInput.Label>Password</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} type="password" />
+      </TextInput>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
+      </TextInput>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+  const ref = React.useRef(null);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const handleClick = () => {
+    ref.current.focus();
+  };
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} ref={ref} />
+      </TextInput>
+      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput isRequired={true}>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} />
+      </TextInput>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {CanvasProvider, PartialEmotionCanvasTheme, styled} from '@workday/canvas-kit-react/common';
+import {colors, CSSProperties, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        alert: {
+          main: colors.kiwi500,
+          darkest: colors.kiwi600,
+        },
+      },
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <AlertInput />
+    </CanvasProvider>
+  );
+};
+
+const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
+  ({alertStyles}) => alertStyles
+);
+
+const AlertInput = () => {
+  const [value, setValue] = React.useState('invalid@email');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <VStack spacing="xxxs" alignItems="flex-start">
+      <TextInput>
+        <TextInput.Label>Email</TextInput.Label>
+        <StyledField alertStyles={alertStyles} onChange={handleChange} value={value} />
+        <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
+      </TextInput>
+    </VStack>
+  );
+};

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {VStack} from '@workday/canvas-kit-labs-react/layout';
+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}>
+      <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>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -3,7 +3,6 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
-import ControlButton from './examples/ControlButton';
 import CustomMenuItem from './examples/CustomMenuItem';
 import Icons from './examples/Icons';
 import ManyItems from './examples/ManyItems';
@@ -11,7 +10,7 @@ import ManyItems from './examples/ManyItems';
 
 # Canvas Kit Menu
 
-Menus display a list of options when triggered by an action or UI element like an icon or button.
+`Menu` displays a list of options when triggered by an action or UI element like an icon or button.
 
 [> Workday Design Reference](https://design.workday.com/components/popups/menus)
 
@@ -25,8 +24,15 @@ yarn add @workday/canvas-kit-preview-react
 
 ### Basic Example
 
+`Menu` is typically triggered by an action such as pressing a button. Here's an example of how you
+might implement that behavior using a [`Popup`](/components/popups/popup/).
+
 <ExampleCodeBlock code={Basic} />
 
+`Menu` will automatically assign focus to itself when it appears provided you set the `isOpen` prop
+correctly, so you do **not** need to use the `useInitialFocus` `Popup` hook. You **will**, however,
+need to use `useReturnFocus` to return focus back to the triggering button after closing the `Menu`.
+
 `Menu` follows the
 [Actions Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
 using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
@@ -42,10 +48,8 @@ actions.
 | `End`              | Moves focus to the last menu item                                                                                                                |
 | `A-Z / a-z`        | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
 
-If you're using a menu button, you will need to add your own keyboard shortcuts, aria attributes,
-and focus management. See the example below.
-
-<ExampleCodeBlock code={ControlButton} />
+Note that although `Menu` includes support for keyboard shortcuts for the menu itself, you'll need
+to add your own keyboard handling and aria attributes to the triggering button.
 
 ### Context Menu
 
@@ -59,7 +63,6 @@ custom menu items, be sure to use semantic `<li>` elements with the following at
 
 - `role="menuitem"`
 - `tabindex={-1}`
-- `id`s following this pattern: `${MenuId}-${index}`
 
 Below is an example:
 
@@ -79,19 +82,22 @@ Below is an example:
 
 #### Usage
 
-`Menu` renders a styled `<ul>` element with a role of `menu` and follows the
+`Menu` renders a styled `<ul role="menu">` element within a [`Card`](/components/containers/card/)
+and follows the
 [Active Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
 using `aria-activedescendant`.
 
 #### Props
 
+Undocumented props are spread to the underlying `<ul>` element.
+
 <ArgsTable of={Menu} />
 
 ### MenuItem
 
 #### Usage
 
-`MenuItem` renders a `<li>` element with the correct attributes to ensure it is accessible. If you
+`MenuItem` renders an `<li>` element with the correct attributes to ensure it is accessible. If you
 choose to implement your own custom menu items, be sure to use semantic `<li>` elements with the
 following attributes:
 
@@ -101,6 +107,8 @@ following attributes:
 
 #### Props
 
+Undocumented props are spread to the underlying `<li>` element.
+
 <ArgsTable of={MenuItem} />
 
 ## Specifications

package/dist/mdx/preview-react/menu/examples/Basic.tsx

@@ -1,17 +1,72 @@
 import React from 'react';
-
 import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  usePopupModel,
+  useAlwaysCloseOnOutsideClick,
+  useReturnFocus,
+  useCloseOnEscape,
+} from '@workday/canvas-kit-react/popup';
+
+const menuId = 'basic-menu';
 
 export default () => {
+  const model = usePopupModel();
+
+  useAlwaysCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useReturnFocus(model);
+
+  const isOpen = model.state.visibility !== 'hidden';
+
+  const handleButtonKeyDown = (event: React.KeyboardEvent) => {
+    let isShortcut = false;
+    if (event.key === `Spacebar` || event.key === ` ` || event.key === `Enter`) {
+      isShortcut = true;
+      if (isOpen) {
+        model.events.hide();
+      } else {
+        model.events.show();
+      }
+    } else if (event.key === `ArrowDown` || event.key === `ArrowUp`) {
+      isShortcut = true;
+      model.events.show();
+    }
+
+    if (isShortcut) {
+      // Prevent ArrowDown and ArrowUp keys from scrolling the entire page
+      event.preventDefault();
+    }
+  };
+
   return (
-    <Menu title="Menu Title">
-      <MenuItem>First Item</MenuItem>
-      <MenuItem>Second Item (with a really really really long label)</MenuItem>
-      <MenuItem isDisabled>Third Item (disabled)</MenuItem>
-      <MenuItem>
-        Fourth Item (<b>with markup</b>)
-      </MenuItem>
-      <MenuItem hasDivider>Fifth Item (with divider)</MenuItem>
-    </Menu>
+    <Popup model={model}>
+      <Popup.Target
+        as={SecondaryButton}
+        onKeyDown={handleButtonKeyDown}
+        aria-expanded={isOpen}
+        aria-haspopup={true}
+        aria-controls={isOpen ? menuId : undefined}
+      >
+        Open Menu
+      </Popup.Target>
+      <Popup.Popper placement="bottom-start">
+        {/*
+          isOpen must be set for focus to be properly assigned to the Menu;
+          onClose must be set in order to the Menu to close properly after
+          selecting a MenuItem
+        */}
+        <Menu id={menuId} isOpen={isOpen} onClose={model.events.hide}>
+          <MenuItem>First Item</MenuItem>
+          <MenuItem>Second Item (with a really really really long label)</MenuItem>
+          <MenuItem isDisabled>Third Item (disabled)</MenuItem>
+          <MenuItem>
+            Fourth Item (<b>with markup</b>)
+          </MenuItem>
+          <MenuItem hasDivider>Fifth Item (with divider)</MenuItem>
+        </Menu>
+      </Popup.Popper>
+    </Popup>
   );
 };

package/dist/mdx/preview-react/menu/examples/ContextMenu.tsx

@@ -1,49 +1,65 @@
 import * as React from 'react';
 
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createComponent, useForkRef} from '@workday/canvas-kit-react/common';
 import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 import {
   Popup,
+  PopupModelContext,
   usePopupModel,
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
 } from '@workday/canvas-kit-react/popup';
 
-import {ContextMenuTarget} from './ContextMenuTarget';
+const ContextMenuTarget = createComponent('div')({
+  displayName: 'Popup.ContextMenuTarget',
+  Component: ({children, ...elemProps}, ref, Element) => {
+    const model = React.useContext(PopupModelContext);
+    const elementRef = useForkRef(ref, model.state.targetRef as any);
 
-export default () => {
-  const canvasTheme = {
-    canvas: {
-      direction: ContentDirection.LTR,
-    },
-  };
+    const onContextMenu = (event: React.MouseEvent) => {
+      if (model.state.visibility === 'visible') {
+        model.events.hide({event});
+      } else if (model.state.visibility === 'hidden') {
+        model.events.show({event});
+      }
+
+      // Prevent the default context menu from showing to avoid double menus
+      event.preventDefault();
+    };
 
+    return (
+      <Element ref={elementRef} onContextMenu={onContextMenu} {...elemProps}>
+        {children}
+      </Element>
+    );
+  },
+});
+
+export default () => {
   const model = usePopupModel();
 
   useAlwaysCloseOnOutsideClick(model);
   useCloseOnEscape(model);
 
   return (
-    <CanvasProvider theme={canvasTheme}>
-      <Popup model={model}>
-        <ContextMenuTarget style={{display: 'inline'}} tabIndex={0}>
-          Right click on this text (Context menu target)
-        </ContextMenuTarget>
-        <Popup.Popper>
-          <Menu onClose={model.events.hide}>
-            <MenuItem>Back</MenuItem>
-            <MenuItem>Forward</MenuItem>
-            <MenuItem>Reload</MenuItem>
-            <MenuItem hasDivider>Bookmark Page</MenuItem>
-            <MenuItem>Save Page As...</MenuItem>
-            <MenuItem>Select All</MenuItem>
-            <MenuItem hasDivider>Take Screenshot</MenuItem>
-            <MenuItem hasDivider>View Page Source</MenuItem>
-            <MenuItem>Inspect Accessibility Properties</MenuItem>
-            <MenuItem>Inspect</MenuItem>
-          </Menu>
-        </Popup.Popper>
-      </Popup>
-    </CanvasProvider>
+    <Popup model={model}>
+      <ContextMenuTarget style={{display: 'inline'}} tabIndex={0}>
+        Right click on this text (Context menu target)
+      </ContextMenuTarget>
+      <Popup.Popper>
+        <Menu onClose={model.events.hide}>
+          <MenuItem>Back</MenuItem>
+          <MenuItem>Forward</MenuItem>
+          <MenuItem>Reload</MenuItem>
+          <MenuItem hasDivider>Bookmark Page</MenuItem>
+          <MenuItem>Save Page As...</MenuItem>
+          <MenuItem>Select All</MenuItem>
+          <MenuItem hasDivider>Take Screenshot</MenuItem>
+          <MenuItem hasDivider>View Page Source</MenuItem>
+          <MenuItem>Inspect Accessibility Properties</MenuItem>
+          <MenuItem>Inspect</MenuItem>
+        </Menu>
+      </Popup.Popper>
+    </Popup>
   );
 };

package/dist/mdx/preview-react/menu/examples/CustomMenuItem.tsx

@@ -4,10 +4,10 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem>First Item</MenuItem>
       <MenuItem>Second Item</MenuItem>
-      <li role="menuItem" id="customMenu-3" tabIndex={-1} style={{listStyle: 'none'}}>
+      <li role="menuitem" tabIndex={-1} style={{listStyle: 'none'}}>
         Third Item (custom)
       </li>
     </Menu>

package/dist/mdx/preview-react/menu/examples/ManyItems.tsx

@@ -8,7 +8,7 @@ export default () => {
       {'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen'
         .split(' ')
         .map(item => {
-          return <MenuItem>Item {item}</MenuItem>;
+          return <MenuItem key={item}>Item {item}</MenuItem>;
         })}
     </Menu>
   );

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

@@ -23,7 +23,7 @@ Text Areas allow users to enter and edit multiple lines of text.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-react
+yarn add @workday/canvas-kit-labs-react
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.3.0-next.6+d59e27a5",
+  "version": "5.3.0-next.9+47f4d0a9",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.3.0-next.6+d59e27a5"
+    "@workday/canvas-kit-react": "^5.3.0-next.9+47f4d0a9"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "d59e27a5eb115f0cb755825851f31a7cd76f584f"
+  "gitHead": "47f4d0a90fddfb15752be9e6449be2979f934636"
 }

package/dist/mdx/preview-react/menu/examples/ContextMenuTarget.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import {createComponent, useForkRef} from '@workday/canvas-kit-react/common';
-import {PopupModelContext} from '@workday/canvas-kit-react/popup';
-
-interface ContextMenuTargetProps {
-  children: React.ReactNode;
-}
-
-export default createComponent('div')({
-  displayName: 'Popup.ContextMenuTarget',
-  Component: ({children, ...elemProps}: ContextMenuTargetProps, ref, Element) => {
-    const model = React.useContext(PopupModelContext);
-    const elementRef = useForkRef(ref, model.state.targetRef as any);
-
-    const onContextMenu = (event: React.MouseEvent) => {
-      if (model.state.visibility === 'visible') {
-        model.events.hide({event});
-      } else if (model.state.visibility === 'hidden') {
-        model.events.show({event});
-      }
-
-      // prevent the default context menu from showing to avoid double menus
-      event.preventDefault();
-    };
-
-    return (
-      <Element ref={elementRef} onContextMenu={onContextMenu} {...elemProps}>
-        {children}
-      </Element>
-    );
-  },
-});