@workday/canvas-kit-docs 14.0.1 → 14.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.1",
+  "version": "14.0.3",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,12 +45,12 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.1",
-    "@workday/canvas-kit-preview-react": "^14.0.1",
-    "@workday/canvas-kit-react": "^14.0.1",
-    "@workday/canvas-kit-styling": "^14.0.1",
+    "@workday/canvas-kit-labs-react": "^14.0.3",
+    "@workday/canvas-kit-preview-react": "^14.0.3",
+    "@workday/canvas-kit-react": "^14.0.3",
+    "@workday/canvas-kit-styling": "^14.0.3",
     "@workday/canvas-system-icons-web": "^3.0.36",
-    "@workday/canvas-tokens-web": "^3.0.0",
+    "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "edf930a6ee2e7b3d78453d6842a11ed6ca444f61"
+  "gitHead": "241a81d0e3d2ef4db433277fcdb453df5700be4d"
 }

package/dist/mdx/react/_examples/mdx/AccessibilityOverview.mdx

@@ -1,18 +0,0 @@
-## Accessibility Overview Coming Soon!
-
-Canvas Kit is built with accessibility in mind. We continuously strive to provide a robust set of
-accessible components that are easy to customize for your specific needs.
-
-## What you can expect
-
-- Introduction to the accessibility tree
-- Introduction to the accessible name and description calculation
-- Supporting Windows 11 high contrast desktop themes
-- Responsiveness and reflow
-- Introduction to ARIA live regions
-
-### Bigger and better examples
-
-- Page layouts with landmark regions and structured content headings
-- Cards, clickable cards, and lists of cards
-- Forms and error handling

package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx

@@ -1,73 +0,0 @@
-import React, {useState} from 'react';
-
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {system} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-
-const fruits = [
-  'Apples',
-  'Oranges',
-  'Bananas',
-  'Lemons',
-  'Limes',
-  'Strawberries',
-  'Raspberries',
-  'Blackberries',
-];
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${system.color.bg.caution.stronger}`,
-  backgroundColor: system.color.bg.caution.default,
-  padding: system.space.x2,
-});
-
-const listStyles = createStyles({
-  paddingLeft: system.space.zero,
-});
-
-const listItemStyles = createStyles({
-  listStyle: 'none',
-  paddingLeft: system.space.zero,
-});
-
-const flexStyles = createStyles({
-  gap: system.space.x4,
-});
-
-let filteredFruits = fruits;
-
-export default () => {
-  const [filter, setFilter] = useState('');
-  function handleFilter(e) {
-    filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);
-    setFilter(e.target.value);
-  }
-
-  return (
-    <>
-      <Flex cs={flexStyles}>
-        <Heading size="small">Fruits</Heading>
-        <AriaLiveRegion>
-          <BodyText size="small" cs={liveRegionStyle}>
-            {`Showing ${filteredFruits.length} of ${fruits.length}`}
-          </BodyText>
-        </AriaLiveRegion>
-      </Flex>
-      <FormField>
-        <FormField.Label>Filter Items:</FormField.Label>
-        <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
-      </FormField>
-      <ul className={listStyles}>
-        {filteredFruits.map(i => (
-          <BodyText size="small" as="li" cs={listItemStyles} key={i}>
-            {i}
-          </BodyText>
-        ))}
-      </ul>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/HiddenLiveRegion.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
-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 {Text} from '@workday/canvas-kit-react/text';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-let liveRegionStr = '';
-
-const flexStyles = createStyles({
-  gap: system.space.x4,
-  alignItems: 'center',
-});
-
-export default () => {
-  const [message, setMessage] = React.useState('');
-
-  function handleChange(e) {
-    setMessage(e.target.value);
-  }
-
-  function handleSendMessage(e) {
-    e.preventDefault();
-    liveRegionStr = message;
-    setMessage('');
-  }
-
-  return (
-    <>
-      <Flex as="form" aria-label="Hidden Live Region" onSubmit={handleSendMessage} cs={flexStyles}>
-        <FormField>
-          <FormField.Label>Type your message:</FormField.Label>
-          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
-        </FormField>
-        <PrimaryButton type="submit">Send Message</PrimaryButton>
-      </Flex>
-      <AriaLiveRegion>
-        <Text as={AccessibleHide}>{liveRegionStr}</Text>
-      </AriaLiveRegion>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/IconButtonsWithLiveBadges.tsx

@@ -1,98 +0,0 @@
-import React, {useState} from 'react';
-import {AccessibleHide, AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
-import {notificationsIcon, inboxIcon, assistantIcon} from '@workday/canvas-system-icons-web';
-import {space} from '@workday/canvas-kit-react/tokens';
-import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {CountBadge} from '@workday/canvas-kit-react/badge';
-
-const MyTasksLiveBadge = ({cnt}) => {
-  // use tooltip to assign name,
-  // use AriaLiveRegion inside button,
-  // assign name to live region referencing the button,
-  // use BadgeCount inside live region,
-  // use AccessibleHide to create invisible word "new" after badge
-  // use aria-describedby on button, referencing live region container to set description
-  // Safari + VO => not working at all
-  // JAWS 2024 + Chrome / Edge => works as expected :)
-  // NVDA + Chrome / Edge => works as expected :)
-  // Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
-  const badgeID = useUniqueId();
-  const myTasksID = useUniqueId();
-
-  return (
-    <Tooltip title="My Tasks">
-      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
-        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </AriaLiveRegion>
-      </TertiaryButton>
-    </Tooltip>
-  );
-};
-
-// use AriaLiveRegion around the button,
-// use Tooltip to assign the name of the button,
-// make sure Tooltip title string includes count value
-// Chrome + VO => Announces name "notifications X new" and innerText 'X'
-// Safari + VO => Works as expected :)
-// JAWS 2024 => Announces full button name twice (previous state, then new state)
-// JAWS 2024 + Firefox => Works as expected :)
-// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
-const NotificationsLiveBadge = ({cnt}) => (
-  <AriaLiveRegion>
-    <Tooltip title={`Notifications ${cnt} new`}>
-      <TertiaryButton icon={notificationsIcon}>
-        <CountBadge count={cnt} />
-      </TertiaryButton>
-    </Tooltip>
-  </AriaLiveRegion>
-);
-
-const AssistantLiveBadge = ({cnt}) => {
-  // use AriaLiveRegion around the button
-  // use muted type Tooltip (avoid using aria-label to name button)
-  // use AccessibleHide inside of button to compose name
-  // Chrome + VO => announces twice
-  // Safari + VO => works as expected :)
-  const lbl = 'Workday Assistant';
-
-  return (
-    <AriaLiveRegion>
-      <Tooltip title={lbl} type="muted">
-        <TertiaryButton icon={assistantIcon}>
-          <AccessibleHide>{lbl}</AccessibleHide>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </TertiaryButton>
-      </Tooltip>
-    </AriaLiveRegion>
-  );
-};
-
-export default () => {
-  const [counter, setCounter] = useState(0);
-  const [notifications, setNotifications] = useState(0);
-  const [assistant, setAssistant] = useState(0);
-
-  const handleAddTask = () => setCounter(prev => prev + 1);
-  const handleAddNotification = () => setNotifications(prev => prev + 1);
-  const handleAssistant = () => setAssistant(prev => prev + 1);
-
-  return (
-    <>
-      <Flex padding={space.s} gap={space.s} as="header">
-        <AssistantLiveBadge cnt={assistant} />
-        <NotificationsLiveBadge cnt={notifications} />
-        <MyTasksLiveBadge cnt={counter} />
-      </Flex>
-      <Flex padding={space.s} gap={space.s} as="main">
-        <SecondaryButton onClick={handleAssistant}>Add a Message</SecondaryButton>
-        <SecondaryButton onClick={handleAddNotification}>Add a Notification</SecondaryButton>
-        <SecondaryButton onClick={handleAddTask}>Add an item to My Tasks</SecondaryButton>
-      </Flex>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/TextInputWithLiveError.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {system} from '@workday/canvas-tokens-web';
-import {createStyles} from '@workday/canvas-kit-styling';
-
-const hintStyles = createStyles({
-  height: system.space.x6,
-});
-export default () => {
-  const errMsg = 'Error: First name is required.';
-  const [hasError, setHasError] = React.useState('no');
-  const inputRef = React.useRef(null);
-  const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
-  const handleSubmit = () => hasError && changeFocus(inputRef.current);
-
-  return (
-    <>
-      <FormField error={hasError === 'error' ? 'error' : undefined} isRequired={true}>
-        <FormField.Label>First Name:</FormField.Label>
-        <FormField.Input as={TextInput} onBlur={handleBlur} ref={inputRef} />
-        <FormField.Hint cs={hintStyles}>
-          <AriaLiveRegion>{hasError === 'error' && errMsg}</AriaLiveRegion>
-        </FormField.Hint>
-      </FormField>
-      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
-    </>
-  );
-};

package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/VisibleLiveRegion.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-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 {Text} from '@workday/canvas-kit-react/text';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling';
-
-const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${system.color.border.caution.default}`,
-  backgroundColor: system.color.bg.caution.default,
-  padding: system.space.x4,
-  display: 'block',
-  marginBlockStart: system.space.x4,
-  marginBlockEnd: system.space.x4,
-  width: calc.multiply(system.space.x16, 7),
-});
-
-const flexGapStyles = createStyles({
-  gap: system.space.x4,
-  alignItems: 'center',
-});
-
-let liveRegionStr = 'This is an ARIA Live Region!';
-
-export default () => {
-  const [message, setMessage] = React.useState('');
-
-  function handleChange(e) {
-    setMessage(e.target.value);
-  }
-
-  function handleSendMessage(e) {
-    e.preventDefault();
-    liveRegionStr = message;
-    setMessage('');
-  }
-
-  return (
-    <>
-      <AriaLiveRegion>
-        <Text cs={liveRegionStyle}>{liveRegionStr}</Text>
-      </AriaLiveRegion>
-      <Flex
-        as="form"
-        aria-label="Visible Live Region"
-        onSubmit={handleSendMessage}
-        cs={flexGapStyles}
-      >
-        <FormField>
-          <FormField.Label>Type your message:</FormField.Label>
-          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
-        </FormField>
-        <PrimaryButton type="submit">Send Message</PrimaryButton>
-      </Flex>
-    </>
-  );
-};

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

@@ -1,295 +0,0 @@
-import * as React from 'react';
-import {
-  AccessibleHide,
-  AriaLiveRegion,
-  composeHooks,
-  createComponent,
-  createElemPropsHook,
-  createSubcomponent,
-  ExtractProps,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {system} from '@workday/canvas-tokens-web';
-import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {
-  notificationsIcon,
-  inboxIcon,
-  justifyIcon,
-  assistantIcon,
-  searchIcon,
-} from '@workday/canvas-system-icons-web';
-
-import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
-import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {LoadReturn} from '@workday/canvas-kit-react/collection';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {
-  Combobox,
-  useComboboxModel,
-  useComboboxInput,
-  useComboboxLoader,
-} from '@workday/canvas-kit-react/combobox';
-import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {CountBadge} from '@workday/canvas-kit-react/badge';
-
-interface HeaderItemProps extends FlexProps {}
-interface LiveCountBadgeProps extends FlexProps {
-  cnt: number;
-}
-
-const tasks = ['Request Time Off', 'Create Expense Report', 'Change Benefits'];
-
-const styleOverrides = {
-  headerWrapper: createStyles({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    boxSizing: 'border-box',
-    ...system.type.subtext.large,
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    backgroundColor: system.color.bg.default,
-    padding: system.space.x1,
-  }),
-  inputGroupInner: createStyles({
-    marginLeft: '1rem',
-    width: px2rem(20),
-    transition: 'opacity 100ms ease',
-  }),
-  comboboxContainer: createStyles({
-    margin: 'auto',
-    width: '100%',
-    maxWidth: calc.multiply(system.space.x20, 6),
-  }),
-  comboboxInput: createStyles({
-    borderRadius: px2rem(1000),
-    width: '20rem',
-  }),
-  comboboxMenuList: createStyles({
-    maxHeight: px2rem(200),
-  }),
-  menuButtonStyles: createStyles({
-    textDecoration: 'none',
-    color: system.color.fg.strong,
-  }),
-  notificationContainerStyles: createStyles({
-    boxSizing: 'border-box',
-    position: 'relative',
-  }),
-  countBadgeStyles: createStyles({
-    boxSizing: 'border-box',
-    position: 'absolute',
-    top: calc.negate(system.space.x1),
-    insetInlineEnd: calc.negate(system.space.x1),
-  }),
-  actionButtonStyles: createStyles({
-    gap: system.space.x4,
-    margin: system.space.x4,
-  }),
-};
-
-const useAutocompleteInput = composeHooks(
-  createElemPropsHook(useComboboxModel)(model => {
-    return {
-      onKeyPress(event: React.KeyboardEvent) {
-        model.events.show(event);
-      },
-    };
-  }),
-  useComboboxInput
-);
-
-const AutoCompleteInput = createSubcomponent(TextInput)({
-  modelHook: useComboboxModel,
-  elemPropsHook: useAutocompleteInput,
-})<ExtractProps<typeof Combobox.Input, never>>((elemProps, Element) => {
-  return <Combobox.Input as={Element} {...elemProps} />;
-});
-
-export default () => {
-  const [notifications, setNotifications] = React.useState(0);
-
-  function handleAdd() {
-    setNotifications(prev => prev + 1);
-  }
-
-  function handleClear() {
-    setNotifications(0);
-  }
-
-  return (
-    <>
-      <GlobalHeader>
-        <GlobalHeader.Item>
-          <Tooltip title="Global Navigation" type="describe">
-            <TertiaryButton icon={justifyIcon} cs={styleOverrides.menuButtonStyles}>
-              MENU
-            </TertiaryButton>
-          </Tooltip>
-          <Tooltip title="Workday Home">
-            <TertiaryButton>
-              <img src="https://design.workday.com/images/ck-dub-logo-blue.svg" alt="" />
-            </TertiaryButton>
-          </Tooltip>
-        </GlobalHeader.Item>
-        <GlobalHeader.Item cs={styleOverrides.comboboxContainer}>
-          <Autocomplete aria-label="Search Workday" />
-        </GlobalHeader.Item>
-        <GlobalHeader.Item>
-          <Tooltip title="Assistant">
-            <TertiaryButton icon={assistantIcon} />
-          </Tooltip>
-
-          <NotificationLiveBadge cnt={notifications} />
-
-          <Tooltip title="My Tasks">
-            <TertiaryButton icon={inboxIcon} />
-          </Tooltip>
-          <Tooltip title="Profile">
-            <Avatar name="Avatar" />
-          </Tooltip>
-        </GlobalHeader.Item>
-      </GlobalHeader>
-      <Flex cs={styleOverrides.actionButtonStyles}>
-        <SecondaryButton onClick={handleAdd}>Add notification</SecondaryButton>
-        <TertiaryButton onClick={handleClear}>Clear</TertiaryButton>
-      </Flex>
-    </>
-  );
-};
-
-const GlobalHeaderItem = createComponent('div')({
-  displayName: 'GlobalHeader.Item',
-  Component: ({gap = 's', ...props}: HeaderItemProps, ref) => (
-    <Flex gap={gap} alignItems="center" marginX={system.space.x3} ref={ref} {...props} />
-  ),
-});
-
-const GlobalHeader = createComponent('header')({
-  displayName: 'GlobalHeader',
-  Component: (props, ref) => (
-    <header className={styleOverrides.headerWrapper} ref={ref} {...props} />
-  ),
-  subComponents: {Item: GlobalHeaderItem},
-});
-
-const Autocomplete = createComponent('div')({
-  displayName: 'Autocomplete',
-  Component: props => {
-    const [searchText, setSearchText] = React.useState('');
-
-    function handleChange(e) {
-      setSearchText(e.target.value);
-    }
-
-    const {model, loader} = useComboboxLoader(
-      {
-        // You can start with any number that makes sense.
-        total: 0,
-
-        // Pick whatever number makes sense for your API
-        pageSize: 20,
-
-        // A load function that will be called by the loader. You must return a promise that returns
-        // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
-        async load({pageNumber, pageSize, filter}) {
-          return new Promise<LoadReturn<string>>(resolve => {
-            // simulate a server response by resolving after a period of time
-            setTimeout(() => {
-              // simulate paging and filtering based on pre-computed items
-              const start = (pageNumber - 1) * pageSize;
-              const end = start + pageSize;
-              const filteredTasks = tasks.filter(i => {
-                if (searchText.trim() === '' || typeof searchText !== 'string') {
-                  return true;
-                }
-                return i.toLowerCase().includes(searchText.trim().toLowerCase());
-              });
-
-              const total = filteredTasks.length;
-              const items = filteredTasks.slice(start, end);
-
-              resolve({
-                items,
-                total,
-              });
-            }, 300);
-          });
-        },
-        onShow() {
-          // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
-          // visible
-          loader.load();
-        },
-      },
-      useComboboxModel
-    );
-
-    return (
-      <Combobox model={model}>
-        <InputGroup>
-          <InputGroup.InnerStart cs={styleOverrides.inputGroupInner}>
-            <SystemIcon icon={searchIcon} />
-          </InputGroup.InnerStart>
-          <InputGroup.Input
-            as={AutoCompleteInput}
-            cs={styleOverrides.comboboxInput}
-            onChange={handleChange}
-            value={searchText}
-            {...props}
-          />
-        </InputGroup>
-        <Combobox.Menu.Popper>
-          <Combobox.Menu.Card>
-            {model.state.items.length === 0 ? (
-              <StyledMenuItem as="span">No Results Found</StyledMenuItem>
-            ) : (
-              model.state.items.length > 0 && (
-                <Combobox.Menu.List maxHeight={px2rem(200)}>
-                  {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
-                </Combobox.Menu.List>
-              )
-            )}
-          </Combobox.Menu.Card>
-        </Combobox.Menu.Popper>
-      </Combobox>
-    );
-  },
-});
-
-const NotificationLiveBadge = createComponent('span')({
-  displayName: 'NotificationLiveBadge',
-  Component: ({cnt = 0, ...props}: LiveCountBadgeProps) => {
-    const btnId = useUniqueId();
-    const badgeId = useUniqueId();
-
-    return (
-      <Flex cs={styleOverrides.notificationContainerStyles}>
-        <Tooltip title="Notifications">
-          <TertiaryButton
-            id={btnId}
-            icon={notificationsIcon}
-            aria-describedby={cnt > 0 ? badgeId : undefined}
-            {...props}
-          />
-        </Tooltip>
-        <AriaLiveRegion aria-labelledby={btnId}>
-          {cnt > 0 && (
-            <>
-              <CountBadge
-                id={badgeId}
-                count={cnt}
-                limit={100}
-                cs={styleOverrides.countBadgeStyles}
-              />
-              <AccessibleHide>New</AccessibleHide>
-            </>
-          )}
-        </AriaLiveRegion>
-      </Flex>
-    );
-  },
-});