@workday/canvas-kit-docs 13.0.0-alpha.996-next.0 → 13.0.0

package/dist/mdx/react/banner/examples/Error.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {Banner} from '@workday/canvas-kit-react/banner';
 import {styled} from '@workday/canvas-kit-react/common';

package/dist/mdx/react/banner/examples/StickyAnimation.tsx

@@ -1,6 +1,3 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import {jsx, keyframes} from '@emotion/react';
 import React from 'react';
 
 import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
@@ -8,47 +5,66 @@ import {useTheme} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {loopIcon} from '@workday/canvas-system-icons-web';
 import {Banner} from '@workday/canvas-kit-react/banner';
+import {
+  createStencil,
+  createStyles,
+  createVars,
+  keyframes,
+  handleCsProp,
+  cssVar,
+} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const containerStyles: CSSProperties = {
+const containerStyles = createStyles({
   position: 'absolute',
   right: 0,
   overflow: 'hidden',
-};
+});
+const stickyAnimationVars = createVars('width', 'rerun');
+const stickAnimationKeyframes = keyframes({
+  '0%': {
+    transform: `translateX(${cssVar(stickyAnimationVars.width)})`,
+  },
+  '100%': {
+    transform: `translateX(0 * ${cssVar(stickyAnimationVars.rerun)})`,
+  },
+});
+
+const stickyAnimationStencil = createStencil({
+  base: {
+    marginY: system.space.x1,
+    marginInlineStart: system.space.x1,
+    marginInlineEnd: 0,
+    animationName: stickAnimationKeyframes,
+    animationDuration: '.3s',
+    animationTimingFunction: 'ease-out',
+  },
+});
 
 export default () => {
   const theme = useTheme();
   const bannerRef = React.useRef<HTMLButtonElement>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [styles, setStyles] = React.useState<CSSProperties>();
+  const [bannerWidth, setBannerWidth] = React.useState(0);
 
   const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes
 
   React.useLayoutEffect(() => {
-    let width = bannerRef.current.offsetWidth;
-    if (theme.canvas.direction === 'rtl') {
-      width *= -1;
-    }
-    const slideInKeyframes = keyframes({
-      '0%': {
-        transform: `translateX(${width}px)`,
-      },
-      '100%': {
-        transform: `translateX(0 * ${rerun})`,
-      },
-    });
-
-    setStyles({
-      marginY: space.xxxs,
-      marginInlineStart: space.xxxs,
-      maringInlineEnd: 0,
-      animation: `${slideInKeyframes} .3s ease-out forwards`,
-    });
+    const width = bannerRef.current.offsetWidth;
+    setBannerWidth(theme.canvas.direction === 'rtl' ? width * -1 : width);
   }, [theme.canvas.direction, rerun]);
 
   return (
     <Box height={64}>
-      <div css={containerStyles} ref={containerRef}>
-        <div css={styles}>
+      <div className={containerStyles} ref={containerRef}>
+        <div
+          key={rerun}
+          {...handleCsProp({}, [
+            stickyAnimationStencil(),
+            stickyAnimationVars({width: `${bannerWidth}px`, rerun: `${rerun}`}),
+          ])}
+        >
           <Banner
             onClick={() => setRerun(r => r + 1)}
             hasError={true}

package/dist/mdx/react/breadcrumbs/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 
 export default () => {

package/dist/mdx/react/button/button/Button.mdx

@@ -14,6 +14,7 @@ import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 import Grow from './examples/Grow';
 import CustomStyles from './examples/CustomStyles';
+import ThemeOverrides from './examples/ThemeOverrides';
 
 
 # Canvas Kit Button
@@ -91,6 +92,16 @@ or view the example below.
 
 <ExampleCodeBlock code={CustomStyles} />
 
+### Theme Overrides
+
+The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`. 
+
+> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
+
+> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
+
+<ExampleCodeBlock code={ThemeOverrides} />
+
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying

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

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
 import {Grid} from '@workday/canvas-kit-react/layout';
 import {plusIcon} from '@workday/canvas-system-icons-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const customContainer = createStyles({

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {trashIcon} from '@workday/canvas-system-icons-web';

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

@@ -1,7 +1,7 @@
-import React from 'react';
-
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ExternalHyperlink href="https://workday.com">External Hyperlink</ExternalHyperlink>
+  <ExternalHyperlink href="https://workday.com" iconLabel="Opens link in new window">
+    External Hyperlink
+  </ExternalHyperlink>
 );

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

@@ -12,7 +12,11 @@ const parentContainerStyles = createStyles({
 
 export default () => (
   <Box cs={parentContainerStyles}>
-    <ExternalHyperlink href="https://workday.com" variant="inverse">
+    <ExternalHyperlink
+      href="https://workday.com"
+      variant="inverse"
+      iconLabel="Opens link in new window"
+    >
       Hyperlink
     </ExternalHyperlink>
   </Box>

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => <Hyperlink href="#hyperlink">Hyperlink</Hyperlink>;

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {

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

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {
+  plusIcon,
+  relatedActionsVerticalIcon,
+  caretDownIcon,
+} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Heading} from '@workday/canvas-kit-react/text';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
+
+const customActionTheme = createStyles({
+  [brand.action.base]: 'teal',
+  [brand.action.accent]: 'white',
+  [brand.action.dark]: 'hsla(180, 100%, 20%)',
+  [brand.action.darkest]: 'hsla(180, 100%, 16%)',
+});
+
+export default () => (
+  <div>
+    <Heading size="medium" as="h3">
+      Override Primary Color Via Canvas Provider
+    </Heading>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            primary: {
+              main: 'navy',
+            },
+          },
+        },
+      }}
+    >
+      <Flex cs={parentContainerStyles}>
+        <PrimaryButton>Primary</PrimaryButton>
+        <PrimaryButton icon={plusIcon} iconPosition="start">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton icon={caretDownIcon} iconPosition="end">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+      </Flex>
+    </CanvasProvider>
+    <Heading size="medium" as="h3">
+      Override Action Color Via CSS Action Token
+    </Heading>
+    <div className={customActionTheme}>
+      <Flex cs={parentContainerStyles}>
+        <PrimaryButton>Primary</PrimaryButton>
+        <PrimaryButton icon={plusIcon} iconPosition="start">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton icon={caretDownIcon} iconPosition="end">
+          Primary
+        </PrimaryButton>
+        <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+      </Flex>
+    </div>
+  </div>
+);

package/dist/mdx/react/collection/mdx/examples/MultiSelection.tsx

@@ -8,6 +8,7 @@ import {
   useListModel,
   ListItemProps,
   ListBox,
+  getCursor,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 
@@ -47,7 +48,7 @@ export default () => {
         <Item data-id="third">Third</Item>
       </ListBox>
 
-      <p>Cursor ID: {model.state.cursorId}</p>
+      <p>Cursor ID: {getCursor(model.state)}</p>
       <p>
         Selected IDs: {(model.state.selectedIds !== 'all' ? model.state.selectedIds : []).join(',')}
       </p>

package/dist/mdx/react/collection/mdx/examples/Selection.tsx

@@ -7,6 +7,7 @@ import {
   useListModel,
   ListItemProps,
   ListBox,
+  getCursor,
 } from '@workday/canvas-kit-react/collection';
 import {
   composeHooks,
@@ -51,7 +52,7 @@ export default () => {
         <SelectableItem data-id="third">Third</SelectableItem>
       </ListBox>
 
-      <p>Cursor ID: {model.state.cursorId}</p>
+      <p>Cursor ID: {getCursor(model.state)}</p>
       <p>Selected ID: {model.state.selectedIds[0]}</p>
     </>
   );

package/dist/mdx/react/color-picker/color-preview/examples/Basic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ColorPreview} from '@workday/canvas-kit-react/color-picker';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex, Grid} from '@workday/canvas-kit-react/layout';

package/dist/mdx/{labs-react → react}/expandable/Expandable.mdx

@@ -16,7 +16,7 @@ import HoistedModel from './examples/HoistedModel';
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-labs-react
+yarn add @workday/canvas-kit-react
 ```
 
 ## Usage
@@ -79,4 +79,4 @@ the example below, we're hoisting the models to expand and collapse all three co
 
 ## Component API
 
-<SymbolDoc name="Expandable" fileName="/labs-react/" />
+<SymbolDoc name="Expandable" fileName="/react/" />

package/dist/mdx/{labs-react → react}/expandable/examples/Avatar.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
 
 export default () => (
-  <>
+  <div>
     <Expandable>
       <Expandable.Target headingLevel="h4">
         <Expandable.Icon iconPosition="start" />
-        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Avatar altText="Avatar" url={testAvatar} />
         <Expandable.Title>Title</Expandable.Title>
       </Expandable.Target>
 
@@ -17,12 +15,12 @@ export default () => (
     </Expandable>
     <Expandable>
       <Expandable.Target headingLevel="h4">
-        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Avatar altText="Avatar" url={testAvatar} />
         <Expandable.Title>Title</Expandable.Title>
         <Expandable.Icon iconPosition="end" />
       </Expandable.Target>
 
       <Expandable.Content>Content</Expandable.Content>
     </Expandable>
-  </>
+  </div>
 );

package/dist/mdx/{labs-react → react}/expandable/examples/Depth.tsx

@@ -1,7 +1,4 @@
-import React from 'react';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 export default () => {
   return (

package/dist/mdx/{labs-react → react}/expandable/examples/EndIcon.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 export default () => (
   <Expandable>

package/dist/mdx/{labs-react → react}/expandable/examples/HoistedModel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Expandable, useExpandableModel} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable, useExpandableModel} from '@workday/canvas-kit-react/expandable';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 

package/dist/mdx/{labs-react → react}/expandable/examples/LongTitle.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
 
@@ -8,7 +6,7 @@ export default () => (
   <Expandable>
     <Expandable.Target headingLevel="h4">
       <Expandable.Icon iconPosition="start" />
-      <Expandable.Avatar url={testAvatar} />
+      <Expandable.Avatar altText="Avatar" url={testAvatar} />
       <Expandable.Title>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
         onions, and oregano.

package/dist/mdx/{labs-react → react}/expandable/examples/RTL.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 
 export default () => {

package/dist/mdx/{labs-react → react}/expandable/examples/StartIcon.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 export default () => (
   <Expandable>

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

@@ -3,6 +3,9 @@ import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import Icons from './examples/Icons';
 import SelectableMenu from './examples/SelectableMenu';
+import Grouping from './examples/Grouping';
+import Nested from './examples/Nested';
+import NestedDynamic from './examples/Nested';
 
 # Canvas Kit Menu
 
@@ -69,6 +72,37 @@ behaviors depend on many other things. To see a full example of all these behavi
 
 <ExampleCodeBlock code={SelectableMenu} />
 
+### Grouping
+
+Grouping adds hierarchy and categorization to menu items. Group headers do not represent menu items
+and are not selectable with the keyboard or mouse.
+
+> **Note**: Grouping is not supported in virtual rendering. Menus by default have `shouldVirtualize`
+> set to `false`. Setting to `true` results in unspecified behavior. We use `react-virtual` which
+> doesn't support nested virtualization.
+
+<ExampleCodeBlock code={Grouping} />
+
+### Nested
+
+Menus support nesting. If you only have a few items and not very many nesting levels, the menu can
+be defined statically using JSX. A submenu is defined using the `<Menu.Submenu>` component. The
+`Submenu` is implemented as a special `Menu` subcomponent. The API of the submenu is the same as the
+`Menu` except the submenu's target is also a menu item. The component is named `TargetItem` to
+indicate this dual role.
+
+<ExampleCodeBlock code={Nested} />
+
+### Nested Dynamic Items
+
+Menu nesting is simpler with the dynamic API. In this example, a `renderItem` function is defined to
+allow recursive nesting of items using a data structure you define. A submenu will inherit the
+`getId` and `getTextValue` functions of the parent menu. While you can pass a specialize `getId` or
+`getTextValue` function to each submenu, it may be simpler to use the same one for the menu and
+submenus.
+
+<ExampleCodeBlock code={NestedDynamic} />
+
 ## Component API
 
 <SymbolDoc name="Menu" fileName="/react/" />

package/dist/mdx/react/menu/examples/Grouping.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <>
+      <Menu onSelect={data => setSelected(data.id)}>
+        <Menu.Target>Open Menu</Menu.Target>
+        <Menu.Popper>
+          <Menu.Card>
+            <Menu.List>
+              <Menu.Group title="First Group">
+                <Menu.Item>First Item</Menu.Item>
+                <Menu.Item>Second Item</Menu.Item>
+              </Menu.Group>
+              <Menu.Group title="Second Group">
+                <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
+                <Menu.Item aria-disabled>Fourth Item</Menu.Item>
+              </Menu.Group>
+            </Menu.List>
+          </Menu.Card>
+        </Menu.Popper>
+        <BodyText size="small" marginTop="s">
+          Selected: <span data-testid="output">{selected}</span>
+        </BodyText>
+      </Menu>
+    </>
+  );
+};

package/dist/mdx/react/menu/examples/Icons.tsx

@@ -31,7 +31,7 @@ export default () => {
             </Menu.Item>
             <Menu.Item data-text="User">
               <Menu.Item.Icon icon={userIcon} />
-              <Menu.Item.Text></Menu.Item.Text>
+              <Menu.Item.Text>User</Menu.Item.Text>
             </Menu.Item>
             <Menu.Divider />
             <Menu.Item data-text="Fifth Item (with divider)">

package/dist/mdx/react/menu/examples/Nested.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <Menu
+      id="first-menu"
+      onSelect={data => {
+        setSelected(data.id);
+      }}
+    >
+      <Menu.Target>Open Menu</Menu.Target>
+      <Menu.Popper>
+        <Menu.Card>
+          <Menu.List>
+            <Menu.Item data-id="first-item">First Item</Menu.Item>
+            <Menu.Submenu id="second-menu">
+              <Menu.Submenu.TargetItem data-id="second-item">Second Item</Menu.Submenu.TargetItem>
+              <Menu.Submenu.Popper>
+                <Menu.Submenu.Card>
+                  <Menu.Submenu.List>
+                    <Menu.Submenu.Item data-id="first-sub-item">First Sub Item</Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="second-sub-item">First Sub Item</Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="third-sub-item">Third Sub Item</Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="fourth-sub-item">Fourth Sub Item</Menu.Submenu.Item>
+                  </Menu.Submenu.List>
+                </Menu.Submenu.Card>
+              </Menu.Submenu.Popper>
+            </Menu.Submenu>
+            <Menu.Divider />
+            <Menu.Item data-id="third-item">
+              Third Item (with a really, really, really long label)
+            </Menu.Item>
+            <Menu.Item aria-disabled data-id="fourth-item">
+              Fourth Item
+            </Menu.Item>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" marginTop="s">
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};