@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/react/_examples/mdx/ContextualHelp.mdx

@@ -0,0 +1,36 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import ContextualHelpTooltip from './examples/ContextualHelp/ContextualHelpTooltip';
+import ContextualHelpDialogFocusRedirect from './examples/ContextualHelp/ContextualHelpDialogFocusRedirect';
+import ContextualHelpDialogFocusTrap from './examples/ContextualHelp/ContextualHelpDialogFocusTrap';
+
+
+
+## Contextual Help
+
+### Tooltip
+A Canvas Kit `Tooltip` can be used to provide additional information about why an element is disabled. 
+We should not, however, put one directly onto a disabled element because disabled elements do not receive focus
+(meaning the tooltip content is not accessible to keyboard users). Instead, we should provide a button next to the disabled
+element and apply the `Tooltip` to the button.
+
+**Note: We should avoid passing the `type` prop to the `Tooltip`. The default behavior is to assign an `aria-label` to the button
+(which is what we want)**
+<ExampleCodeBlock code={ContextualHelpTooltip} />
+
+### Contextual Help Popup Without Focus Trap
+If one would like to provide a bit more content than a `Tooltip` will allow (such as buttons or links) a popup should be used.
+In this example, a `Dialog` is used in conjunction with the `useFocusRedirect` hook to display some text and a link. It will
+not trap focus; instead, it will close and focus the next element if the user tabs out or clicks away. A `Tooltip` is still
+used on the `Dialog.Target` component so that it remains accessible for screen readers.
+
+`Dialog` inserts an invisible `<div>` element right after the button with an `aria-owns` attribute pointing to the 
+`Dialog.Card`. This allows screen readers to read the popup contents in a logical order with the target. In other words, the 
+screen reader will announce the `Dialog` right after the open button instead of out of order.
+
+Additionally, we apply `aria-describedby` to our `Dialog.Target` to associate it with the `FormField.Label`.
+<ExampleCodeBlock code={ContextualHelpDialogFocusRedirect} />
+
+### Contextual Help Dialog With Focus Trap
+The `useFocusTrap` hook can be used in contextual help where trapping focus within the `Dialog` is the goal. In this case, 
+focus will remain in the `Dialog` until it is closed. This example is otherwise identical to the one above.
+<ExampleCodeBlock code={ContextualHelpDialogFocusTrap} />

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusRedirect.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Dialog, useDialogModel} from '@workday/canvas-kit-react/dialog';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useFocusRedirect,
+  useInitialFocus,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  flexDirection: 'row',
+  gap: system.gap.sm,
+});
+
+const labelStyles = createStyles({
+  minWidth: 'unset',
+  width: '100%',
+});
+
+export function ContextualHelpDialogFocusRedirect() {
+  const dialogModel = useDialogModel();
+  useCloseOnOutsideClick(dialogModel);
+  useCloseOnEscape(dialogModel);
+  useInitialFocus(dialogModel);
+  useFocusRedirect(dialogModel);
+  useReturnFocus(dialogModel);
+
+  const labelId = useUniqueId();
+
+  return (
+    <Flex>
+      <FormField>
+        <Flex className={containerStyles}>
+          <FormField.Label className={labelStyles} id={labelId}>
+            Country
+          </FormField.Label>
+          <Dialog model={dialogModel}>
+            <Tooltip title="More Info">
+              <Dialog.Target
+                as={TertiaryButton}
+                size="small"
+                icon={infoIcon}
+                aria-describedby={labelId}
+              />
+            </Tooltip>
+            <Dialog.Popper placement="right">
+              <Dialog.Card>
+                <Dialog.CloseIcon aria-label="Close" />
+                <Dialog.Heading cs={{paddingTop: system.padding.xxl}}>Information</Dialog.Heading>
+                <Dialog.Body>
+                  This dialog does not trap focus, so tabbing out of it will cause it to close
+                </Dialog.Body>
+                <Flex
+                  cs={{gap: system.gap.md, padding: system.padding.xs, marginTop: system.gap.sm}}
+                >
+                  <Hyperlink href="/">Link</Hyperlink>
+                </Flex>
+              </Dialog.Card>
+            </Dialog.Popper>
+          </Dialog>
+        </Flex>
+        <FormField.Field>
+          <FormField.Input as={TextInput} />
+        </FormField.Field>
+      </FormField>
+    </Flex>
+  );
+}

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusTrap.tsx

@@ -0,0 +1,79 @@
+import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  useCloseOnEscape,
+  useCloseOnOutsideClick,
+  useFocusTrap,
+  useInitialFocus,
+  usePopupModel,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  flexDirection: 'row',
+  gap: system.gap.sm,
+});
+
+const labelStyles = createStyles({
+  minWidth: 'unset',
+  width: '100%',
+});
+
+export function ContextualHelpDialogFocusTrap() {
+  const dialogModel = usePopupModel();
+  useCloseOnOutsideClick(dialogModel);
+  useCloseOnEscape(dialogModel);
+  useInitialFocus(dialogModel);
+  useFocusTrap(dialogModel);
+  useReturnFocus(dialogModel);
+
+  const labelId = useUniqueId();
+
+  return (
+    <Flex>
+      <FormField>
+        <Flex className={containerStyles}>
+          <FormField.Label className={labelStyles} id={labelId}>
+            Name
+          </FormField.Label>
+          <Dialog model={dialogModel}>
+            <Tooltip title="More Info">
+              <Dialog.Target
+                as={TertiaryButton}
+                size="small"
+                icon={infoIcon}
+                aria-describedby={labelId}
+              />
+            </Tooltip>
+            <Dialog.Popper placement="right">
+              <Dialog.Card>
+                <Dialog.CloseIcon aria-label="Close" />
+                <Dialog.Heading cs={{paddingTop: system.padding.xl}}>Information</Dialog.Heading>
+                <Dialog.Body>
+                  This dialog traps focus. Focus will only return to the rest of the page when the
+                  dialog is closed
+                </Dialog.Body>
+                <Flex
+                  cs={{gap: system.gap.md, padding: system.padding.xs, marginTop: system.gap.sm}}
+                >
+                  <Hyperlink href="/">Link</Hyperlink>
+                </Flex>
+              </Dialog.Card>
+            </Dialog.Popper>
+          </Dialog>
+        </Flex>
+        <FormField.Field>
+          <FormField.Input as={TextInput} />
+        </FormField.Field>
+      </FormField>
+    </Flex>
+  );
+}

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpTooltip.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const outerContainerStyles = createStyles({
+  flexDirection: 'column',
+});
+
+const buttonContainerStyles = createStyles({
+  flexDirection: 'row',
+  gap: system.gap.xs,
+  alignItems: 'center',
+});
+
+export function ContextualHelpTooltip() {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex className={outerContainerStyles}>
+      <FormField isRequired>
+        <FormField.Label>Favorite Food</FormField.Label>
+        <FormField.Input as={TextInput} onChange={handleChange}></FormField.Input>
+      </FormField>
+      <Flex className={buttonContainerStyles}>
+        <PrimaryButton disabled={!value}>Submit</PrimaryButton>
+        <Tooltip title="All fields must be filled before submitting" placement="right">
+          <TertiaryButton icon={infoIcon} size="small" aria-label="Info" disabled={!!value} />
+        </Tooltip>
+      </Flex>
+    </Flex>
+  );
+}

package/dist/mdx/react/_examples/mdx/examples/CookieBanner.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, depth, type, space} from '@workday/canvas-kit-react/tokens';
 import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {StyledType, createComponent, styled} from '@workday/canvas-kit-react/common';
+import {colors, commonColors, depth, space, type} from '@workday/canvas-kit-react/tokens';
 
 const CookieBannerItem = createComponent('div')({
   displayName: 'CookieBanner.Item',

package/dist/mdx/react/_examples/mdx/examples/Density.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
+
 import {FormField, FormFieldGroup} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Switch} from '@workday/canvas-kit-react/switch';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {calc, createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const formStyles = createStyles({
-  margin: `${system.space.x3} ${system.space.zero}`,
+  margin: `${px2rem(12)} ${'0'}`,
   maxWidth: px2rem(600),
-  minWidth: system.space.zero,
+  minWidth: '0',
 });
 
 const formFieldGroupListStyles = createStyles({
@@ -23,7 +24,7 @@ const formFieldGroupListStyles = createStyles({
 const sideBySideInputs = createStencil({
   base: {
     display: 'inline-flex',
-    gap: system.space.x2,
+    gap: system.gap.sm,
     justifyContent: 'space-between',
   },
   modifiers: {
@@ -50,37 +51,37 @@ const sideBySideInputs = createStencil({
     {
       modifiers: {labelOrientation: 'horizontalStart', density: 'high'},
       styles: {
-        gap: system.space.x4,
+        gap: system.gap.md,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalStart', density: 'medium'},
       styles: {
-        gap: system.space.x6,
+        gap: system.gap.lg,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalStart', density: 'low'},
       styles: {
-        gap: system.space.x8,
+        gap: system.gap.xl,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalEnd', density: 'high'},
       styles: {
-        gap: system.space.x4,
+        gap: system.gap.md,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'},
       styles: {
-        gap: system.space.x6,
+        gap: system.gap.lg,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalEnd', density: 'low'},
       styles: {
-        gap: system.space.x8,
+        gap: system.gap.xl,
       },
     },
   ],
@@ -91,7 +92,7 @@ const zipCodeInput = createStyles({
 });
 
 const zipCodeContainerStyles = createStyles({
-  minWidth: system.space.zero,
+  minWidth: '0',
 });
 
 const formFieldStencil = createStencil({
@@ -102,10 +103,10 @@ const formFieldStencil = createStencil({
         gap: px2rem(2),
       },
       medium: {
-        gap: system.space.x1,
+        gap: system.gap.xs,
       },
       low: {
-        gap: system.space.x2,
+        gap: system.gap.sm,
       },
     },
     labelOrientation: {
@@ -118,37 +119,37 @@ const formFieldStencil = createStencil({
     {
       modifiers: {labelOrientation: 'horizontalStart', density: 'high'},
       styles: {
-        gap: system.space.x4,
+        gap: system.gap.md,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalStart', density: 'medium'},
       styles: {
-        gap: system.space.x6,
+        gap: system.gap.lg,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalStart', density: 'low'},
       styles: {
-        gap: system.space.x8,
+        gap: system.gap.xl,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalEnd', density: 'high'},
       styles: {
-        gap: system.space.x4,
+        gap: system.gap.md,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'},
       styles: {
-        gap: system.space.x6,
+        gap: system.gap.lg,
       },
     },
     {
       modifiers: {labelOrientation: 'horizontalEnd', density: 'low'},
       styles: {
-        gap: system.space.x8,
+        gap: system.gap.xl,
       },
     },
   ],
@@ -159,21 +160,21 @@ const selectStencil = createStencil({
   modifiers: {
     density: {
       high: {
-        height: system.space.x8,
-        padding: `${system.space.x1} ${system.space.x2}`,
+        height: system.size.sm,
+        padding: `${system.padding.xxs} ${system.padding.xs}`,
         '& + div': {
-          height: system.space.x8,
+          height: system.size.sm,
         },
       },
       medium: {
-        height: system.space.x10,
-        padding: `${system.space.x2}`,
+        height: system.size.md,
+        padding: `${system.padding.xs}`,
       },
       low: {
-        height: calc.add(system.space.x10, system.space.x2),
-        padding: `${system.space.x3} ${system.space.x2}`,
+        height: calc.add(system.size.md, base.size100),
+        padding: `${system.padding.sm} ${system.padding.xs}`,
         '& + div': {
-          height: calc.add(system.space.x10, system.space.x2),
+          height: calc.add(system.size.md, base.size100),
         },
       },
     },
@@ -187,17 +188,17 @@ const inputStencil = createStencil({
   modifiers: {
     density: {
       high: {
-        height: system.space.x8,
-        padding: `${system.space.x1} ${system.space.x2}`,
+        height: system.size.sm,
+        padding: `${system.padding.xxs} ${system.padding.xs}`,
       },
       medium: {
-        height: system.space.x10,
-        padding: `${system.space.x2}`,
+        height: system.size.md,
+        padding: `${system.padding.xs}`,
       },
 
       low: {
-        height: calc.add(system.space.x10, system.space.x2),
-        padding: `${system.space.x3} ${system.space.x2}`,
+        height: calc.add(system.size.md, base.size100),
+        padding: `${system.padding.sm} ${system.padding.xs}`,
       },
     },
   },
@@ -206,8 +207,8 @@ const inputStencil = createStencil({
 const creditCardInputStencil = createStencil({
   extends: inputStencil,
   base: {
-    width: calc.add(system.space.x10, system.space.x10),
-    minWidth: calc.add(system.space.x10, system.space.x10),
+    width: calc.add(system.size.md, system.size.md),
+    minWidth: calc.add(system.size.md, system.size.md),
     textAlign: 'center',
   },
 });
@@ -221,13 +222,13 @@ const flexContainerStencil = createStencil({
   modifiers: {
     density: {
       high: {
-        gap: system.space.x4,
+        gap: system.gap.md,
       },
       medium: {
-        gap: system.space.x6,
+        gap: system.gap.lg,
       },
       low: {
-        gap: system.space.x8,
+        gap: system.gap.xl,
       },
     },
   },
@@ -251,14 +252,14 @@ const containerAlignmentStencil = createStencil({
 
 const optionStyles = createStyles({
   display: 'flex',
-  gap: system.space.x3,
+  gap: px2rem(12),
   flexDirection: 'column',
 });
 
 const optionItemStyles = createStyles({
   display: 'flex',
   flexDirection: 'column',
-  gap: system.space.x3,
+  gap: px2rem(12),
   maxWidth: 'fit-content',
 });
 

package/dist/mdx/react/_examples/mdx/examples/MediaModal.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import {Modal} from '@workday/canvas-kit-react/modal';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps, Flex} from '@workday/canvas-kit-react/layout';
+import {Modal} from '@workday/canvas-kit-react/modal';
 import {Text} from '@workday/canvas-kit-react/text';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {space} from '@workday/canvas-kit-react/tokens';
-import {createComponent} from '@workday/canvas-kit-react/common';
 
 const MediaImage = createComponent('img')({
   displayName: 'Media.Image',

package/dist/mdx/react/_examples/mdx/examples/PageHeader.tsx

@@ -1,12 +1,10 @@
-import * as React from 'react';
-import {createComponent, styled} from '@workday/canvas-kit-react/common';
-
-import {colors, gradients, space} from '@workday/canvas-kit-react/tokens';
-
-import {Flex, FlexProps, SystemPropValues} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
+import {createStyles, handleCsProp} from '@workday/canvas-kit-styling';
+import {hamburgerIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+import {brand, system} from '@workday/canvas-tokens-web';
 
 interface HeaderItemProps extends FlexProps {}
 
@@ -15,18 +13,24 @@ export default () => (
     <PageHeader.Title>Page Header</PageHeader.Title>
     <PageHeader.Item>
       <TertiaryButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
-      <TertiaryButton aria-label="menu" icon={justifyIcon} variant="inverse" />
+      <TertiaryButton aria-label="menu" icon={hamburgerIcon} variant="inverse" />
     </PageHeader.Item>
   </PageHeader>
 );
 
 const PageHeaderItem = createComponent('div')({
   displayName: 'PageHeader.Item',
-  Component: ({gap = 'xxs', ...props}: HeaderItemProps, ref, Element) => (
-    <Flex gap={gap} ref={ref} as={Element} {...props} />
+  Component: (props: HeaderItemProps, ref, Element) => (
+    <Flex ref={ref} as={Element} {...handleCsProp(props, [{gap: system.gap.xs}])} />
   ),
 });
 
+const pageHeaderTitleStyles = createStyles({
+  padding: `${system.padding.xs} 0`,
+  margin: 0,
+  whiteSpace: 'nowrap',
+});
+
 const PageHeaderTitle = createComponent('h2')({
   displayName: 'PageHeader.Title',
   Component: ({children, ...props}, ref, Element) => (
@@ -35,10 +39,7 @@ const PageHeaderTitle = createComponent('h2')({
       ref={ref}
       size="medium"
       variant="inverse"
-      padding={`${space.xs} 0`}
-      margin={0}
-      whiteSpace="nowrap"
-      {...props}
+      {...handleCsProp(props, pageHeaderTitleStyles)}
     >
       {children}
     </Heading>
@@ -47,14 +48,16 @@ const PageHeaderTitle = createComponent('h2')({
 
 const PageHeader = createComponent('header')({
   displayName: 'PageHeader',
-  Component: (props, ref, Element) => <Header ref={ref} as={Element} {...props} />,
+  Component: (props: any, ref, Element) => (
+    <Element ref={ref} {...handleCsProp(props, pageHeaderStyles)} />
+  ),
   subComponents: {Item: PageHeaderItem, Title: PageHeaderTitle},
 });
 
-const Header = styled('header')({
-  padding: `${space.xs} ${space.xl}`,
-  backgroundImage: gradients.blueberry,
-  color: colors.frenchVanilla100,
+const pageHeaderStyles = createStyles({
+  padding: `${system.padding.xs} ${system.padding.xl}`,
+  backgroundImage: brand.gradient.primary,
+  color: system.color.fg.inverse,
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale',
   display: 'flex',

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

@@ -1,31 +1,27 @@
-import * as React from 'react';
 import {useFormik} from 'formik';
-import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
+import * as React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {
-  activityStreamIcon,
-  avatarIcon,
-  uploadCloudIcon,
-  userIcon,
-} from '@workday/canvas-system-icons-web';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
+import {cloudArrowUpIcon, cloudIcon, commentIcon, userIcon} from '@workday/canvas-system-icons-web';
 
 export default [
   {
     label: 'Dessert Person by Claire Saffitz',
     serverId: 1,
-    icon: activityStreamIcon,
+    icon: commentIcon,
   },
   {
     label: 'Elements of Pizza by Ken Forkish',
     serverId: 2,
-    icon: avatarIcon,
+    icon: cloudIcon,
   },
   {
     label: 'Flour Water Salt Yeast by Ken Forkish',
     serverId: 3,
-    icon: uploadCloudIcon,
+    icon: cloudArrowUpIcon,
   },
   {label: 'Mastering Pasta by Marc Verti', serverId: 4, icon: userIcon},
 ];