@workday/canvas-kit-docs 6.8.10 → 6.9.0-next.3

package/dist/mdx/{labs-react → react}/layout/examples/Stack/BasicStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Stack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Stack, Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => (
   <Stack spacing="xs" border="solid 2px" flexDirection="column">

package/dist/mdx/{labs-react → react}/layout/examples/Stack/HStackCards.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import {HStack, Stack, Flex} from '@workday/canvas-kit-labs-react/layout';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {HStack, Stack, Flex, Box} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {type} from '@workday/canvas-kit-react/tokens';
 
 const Card = ({heading = '', body = ''}) => (
-  <Flex flex={1} flexBasis="auto" depth={2} padding="s" backgroundColor="frenchVanilla100">
+  <Flex flex={1} flexBasis="auto" depth={1} padding="s" backgroundColor="frenchVanilla100">
     <Stack flexDirection="column" spacing="xs">
       <h3 style={{...type.levels.heading.small, margin: 0}}>{heading}</h3>
       <Box maxWidth={240}>

package/dist/mdx/{labs-react → react}/layout/examples/Stack/NestedStacks.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Stack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Stack, Flex} from '@workday/canvas-kit-react/layout';
 
 const Cell = (props: {children: React.ReactNode}) => {
   return (

package/dist/mdx/react/layout/examples/Stack/ShouldWrapChildren.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {Stack, Box} from '@workday/canvas-kit-react/layout';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  arrowLeftIcon,
+  arrowRightIcon,
+  exportIcon,
+  homeIcon,
+  relatedActionsIcon,
+  resetIcon,
+  starIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  return (
+    <Stack border="solid 2px" shouldWrapChildren spacing="xxxs" padding="xxxs">
+      <SecondaryButton aria-label="go to previous page" icon={arrowLeftIcon} />
+      <SecondaryButton aria-label="go to next page" icon={arrowRightIcon} />
+      <SecondaryButton aria-label="reload current page" icon={resetIcon} />
+      <SecondaryButton aria-label="go to home page" icon={homeIcon} />
+      <Box marginInlineStart="m">
+        <SecondaryButton aria-label="share current page" icon={exportIcon} />
+      </Box>
+      <SecondaryButton aria-label="bookmark current page" icon={starIcon} />
+      <SecondaryButton aria-label="view related actions" icon={relatedActionsIcon} />
+    </Stack>
+  );
+};

package/dist/mdx/{labs-react → react}/layout/examples/Stack/StackCard.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import {Stack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Stack, Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {type} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
   return (
     <Flex backgroundColor="soap100" alignItems="flex-start" padding="s">
-      <Flex depth={2} padding="s" backgroundColor="frenchVanilla100">
+      <Flex depth={1} padding="s" backgroundColor="frenchVanilla100">
         <Stack flexDirection="column" spacing="xs">
           <h3 style={{...type.levels.heading.small, margin: 0}}>Stack</h3>
           <span style={{...type.levels.body.small}}>

package/dist/mdx/{labs-react → react}/layout/examples/Stack/StackItems.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {Stack} from '@workday/canvas-kit-labs-react/layout';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {Stack, Box} from '@workday/canvas-kit-react/layout';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => (

package/dist/mdx/{labs-react → react}/layout/examples/Stack/VStackCards.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {VStack, Stack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {VStack, Stack, Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {type} from '@workday/canvas-kit-react/tokens';
 
 const Card = ({heading = '', body = ''}) => (
-  <Flex flex={1} flexBasis="auto" depth={2} padding="s" backgroundColor="frenchVanilla100">
+  <Flex flex={1} flexBasis="auto" depth={1} padding="s" backgroundColor="frenchVanilla100">
     <Stack flexDirection="column" spacing="xs">
       <h3 style={{...type.levels.heading.small, margin: 0}}>{heading}</h3>
       <span style={{...type.levels.body.small}}>{body}</span>

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

@@ -0,0 +1,123 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+import Basic from './examples/Basic';
+import ContextMenu from './examples/ContextMenu';
+import Icons from './examples/Icons';
+
+
+# Canvas Kit Menu
+
+`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)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Basic Example
+
+`Menu` is typically triggered by an action such as pressing a button. The `Menu` comes with a
+`Target` subcomponent and a Popup.
+
+<ExampleCodeBlock code={Basic} />
+
+`Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
+model which composes a list model and a popup model and sets up accessibility features for you.
+
+`Menu` follows the
+[Actions Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html)
+using roving tabindex. Below is table of supported keyboard shortcuts and associated actions.
+
+| Key                | Action                                                                                                       |
+| ------------------ | ------------------------------------------------------------------------------------------------------------ |
+| `Enter` or `Space` | Activates the menu item and then closes the menu                                                             |
+| `Escape`           | Closes the menu                                                                                              |
+| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
+| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item     |
+| `Home`             | Moves focus to the first menu item                                                                           |
+| `End`              | Moves focus to the last menu item                                                                            |
+
+### Context Menu
+
+<ExampleCodeBlock code={ContextMenu} />
+
+### Icons
+
+<ExampleCodeBlock code={Icons} />
+
+## Components
+
+### Menu
+
+### Usage
+
+`Menu` is a combination of as popup and a list. It usually has some type of target element that
+expands/collapses the menu and a `menu` role and and several `menuitem` roles. Focus is managed uses
+[roving tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex) for maximum
+compatibility. A `Menu` can have two modes: `single` and `multiple`. This mode determines both how
+many items can be selected as well as the default behavior when a menuitem is clicked. For the
+`single` mode, selecting a `menuitem` will select and close the menu. For the `multiple` mode,
+clicking a `menuitem` will toggle selection and will not close the menu.
+
+#### Props
+
+<ArgsTable of={Menu} />
+
+#### Usage
+
+Like all compound components, the `Menu` component is a container component. It is responsible for
+putting a `MenuModel` in the React context for all the menu subcomponents. You can either pass this
+component model config or a "hoisted" model.
+
+With model config:
+
+```tsx
+<Menu mode="multiple">{/* Child components */}</Menu>
+```
+
+With a hoisted model:
+
+```tsx
+const model = useMenuModel({
+  mode: 'multiple',
+});
+
+// we now have access to `model.state` and `model.events`
+
+<Menu model={model}>{/* Child components */}</Menu>;
+```
+
+### Menu.Target
+
+#### Usage
+
+`Menu.Target` is similar to all `Popup.Target` types. The component only provides behavior and no
+styling. The `as` prop is used to determine which component is rendered. This component should
+forward the `ref` and apply any additional props directly to an element. The default `as` is a
+`SecondaryButton`. Any Canvas Kit component should work with an `as`.
+
+An example changing to a `PrimaryButton`
+
+```tsx
+<Menu.Target as={PrimaryButton}>Primary Button Text</Menu.Target>
+```
+
+This element will apply `aria-haspopup` and `aria-expanded` to inform screen readers there's a popup
+associated with the element.
+
+#### Props
+
+Undocumented props are spread to the element provided by the `as` which is a `SecondaryButton` by
+default.
+
+<ArgsTable of={Menu.Target} />
+
+## Specifications
+
+<Specifications file="Menu.spec.ts" name="Menu" />

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+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.Item>First Item</Menu.Item>
+            <Menu.Item>Second Item</Menu.Item>
+            <Menu.Divider />
+            <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
+            <Menu.Item>Fourth Item</Menu.Item>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <p>
+        Selected: <span data-testid="output">{selected}</span>
+      </p>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <Menu onSelect={data => setSelected(data.id)}>
+      <Menu.TargetContext>Open Menu</Menu.TargetContext>
+      <Menu.Popper>
+        <Menu.Card>
+          <Menu.List>
+            <Menu.Item>First Item</Menu.Item>
+            <Menu.Item>Second Item</Menu.Item>
+            <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
+            <Menu.Item>Fourth Item</Menu.Item>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <p>
+        Selected: <span data-testid="output">{selected}</span>
+      </p>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  setupIcon,
+  uploadCloudIcon,
+  userIcon,
+  taskContactIcon,
+} from '@workday/canvas-system-icons-web';
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+export default () => {
+  return (
+    <Menu>
+      <Menu.Card>
+        <Menu.List>
+          <Menu.Item>
+            <Menu.Item.Icon icon={uploadCloudIcon} />
+            <Menu.Item.Text>First Item</Menu.Item.Text>
+          </Menu.Item>
+          <Menu.Item>
+            <Menu.Item.Icon icon={setupIcon} />
+            <Menu.Item.Text>Second Item (with a really really really long label)</Menu.Item.Text>
+          </Menu.Item>
+          <Menu.Item aria-disabled>
+            <Menu.Item.Icon icon={uploadCloudIcon} />
+            <Menu.Item.Text>Third Item</Menu.Item.Text>
+            <Menu.Item.Icon icon={taskContactIcon} />
+          </Menu.Item>
+          <Menu.Item>
+            <Menu.Item.Icon icon={userIcon} />
+            <Menu.Item.Text></Menu.Item.Text>
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item>
+            <Menu.Item.Icon icon={taskContactIcon} />
+            <Menu.Item.Text>Fifth Item (with divider)</Menu.Item.Text>
+          </Menu.Item>
+        </Menu.List>
+      </Menu.Card>
+    </Menu>
+  );
+};

package/dist/mdx/react/modal/Modal.mdx

@@ -6,6 +6,8 @@ import WithoutCloseIcon from './examples/WithoutCloseIcon';
 import CustomFocus from './examples/CustomFocus';
 import ReturnFocus from './examples/ReturnFocus';
 import CustomTarget from './examples/CustomTarget';
+import BodyOverflow from './examples/BodyOverflow';
+import FullOverflow from './examples/FullOverflow';
 
 
 # Canvas Kit Modal
@@ -78,6 +80,25 @@ requires a `label` prop.
 
 <ExampleCodeBlock code={CustomTarget} />
 
+### Body Content Overflow
+
+The Modal automatically handles overflowing content inside the `Modal.Body` element. If contents are
+larger than the browser's height will allow, the content will overflow with a scrollbar. You may
+need to restrict the height of your browser to observe the overflow.
+
+<ExampleCodeBlock code={BodyOverflow} />
+
+### Full overlay scrolling
+
+If content is large, scrolling the entire overlay container is an option. Use the
+`Modal.OverflowOverlay` component instead of the `Modal.Overlay` component. The `Modal.Card`'s
+`maxHeight` and `height` will need to be reset to `inherit` to prevent any internal overflow.
+
+This has the effect of scrolling the heading, close button, and any action buttons. If this type of
+scrolling behavior is not desired, try the [Body Content Overflow](#body-content-overflow) method.
+
+<ExampleCodeBlock code={FullOverflow} />
+
 ## Components
 
 ### Modal
@@ -94,12 +115,13 @@ container component will build a default one using `useModalModel`. `Modal` is a
 
 The `Modal.Target` is any element that is meant to show the Modal. The default component rendered by
 this component is a `SecondaryButton` element. You can override this by passing the desired
-component via `as`. Many examples above use `as={DeleteButton}`. If you want to render an
-`IconButton` instead, use `as={IconButton}`. The `Modal.Target` is an alias for `Popup.Target` and
-uses the `usePopupTarget` hook, which provides a `ref` and an `onClick`. The provided `ref` will be
-used to return focus to this element when the Modal is closed. If the provided component does not
-forward the `ref` to an element, the fallback is to capture an element in the `onClick`. This can be
-overridden by providing a `returnFocusRef` to the model.
+component via `as`. Many examples above use `as={DeleteButton}`. If you want to render an icon
+button instead, pass an icon to the the `icon` prop and pass no children to the button. The
+`Modal.Target` is an alias for `Popup.Target` and uses the `usePopupTarget` hook, which provides a
+`ref` and an `onClick`. The provided `ref` will be used to return focus to this element when the
+Modal is closed. If the provided component does not forward the `ref` to an element, the fallback is
+to capture an element in the `onClick`. This can be overridden by providing a `returnFocusRef` to
+the model.
 
 <ArgsTable of={Modal.Target} />
 
@@ -137,8 +159,8 @@ cannot use this component. The default element is an `h2` and can be changed via
 
 The `Modal.CloseIcon` is the 'X' icon in the top corner of a Modal. It always requires an
 `aria-label` which must be translated. It uses the `usePopupCloseIcon` which adds an `onClick` that
-will close the Modal. The default component rendered is an `IconButton` can be changed via the `as`.
-All props that `IconButton` takes are also available by default.
+will close the Modal. The default component rendered is an `TertiaryButton` with just an icon that
+can be changed via the `as`. All props that `TertiaryButton` takes are also available by default.
 
 <ArgsTable of={Modal.CloseIcon} />
 
@@ -150,9 +172,10 @@ Modal. It uses the `usePopupCloseButton` behavior hook which adds an `onClick` t
 you'll have to hoist the model. The default component rendered is a `SecondaryButton` and can be
 changed via the `as` prop. This component doesn't contain any styles and will take on the styles of
 the component given to it. For example, `as={DeleteButton}` will render a delete button.
-`as={IconButton}` will render an `IconButton`. If you give it a base element like `as="button"`, you
-are responsible for styling the element. You can add your own `onClick` to perform side effects.
-Your callback will be merged with the `onClick` that closes the Modal.
+`as={TertiaryButton}` with no children and an `icon` will render a `TertiaryButton` styled icon
+button. If you give it a base element like `as="button"`, you are responsible for styling the
+element. You can add your own `onClick` to perform side effects. Your callback will be merged with
+the `onClick` that closes the Modal.
 
 <ArgsTable of={Modal.CloseButton} />
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack, Box} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const handleDelete = () => {
@@ -17,7 +17,9 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Are you sure you want to delete the item?</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Are you sure you want to delete the item?
+            </Box>
             <HStack spacing="s">
               <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete

package/dist/mdx/react/modal/examples/BodyOverflow.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {HStack, VStack, Stack, Box} from '@workday/canvas-kit-react/layout';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const handleDelete = () => {
+    console.log('Deleted item');
+  };
+
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+          </Modal.Body>
+          <HStack spacing="s" paddingTop="s">
+            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Modal.CloseButton>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
+          </HStack>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -3,7 +3,7 @@ import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import FormField from '@workday/canvas-kit-react/form-field';
 import TextInput from '@workday/canvas-kit-react/text-input';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack, Box} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const ref = React.useRef<HTMLInputElement>(null);
@@ -24,7 +24,9 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Enter name to confirm deletion</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Enter name to confirm deletion
+            </Box>
             <FormField label="Item name">
               <TextInput ref={ref} value={value} onChange={e => setValue(e.currentTarget.value)} />
             </FormField>

package/dist/mdx/react/modal/examples/FullOverflow.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {HStack} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const handleDelete = () => {
+    console.log('Deleted item');
+  };
+
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.OverflowOverlay>
+        <Modal.Card maxHeight="inherit" height="inherit">
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+            <p>Are you sure you want to delete the item?</p>
+          </Modal.Body>
+          <HStack spacing="s">
+            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Modal.CloseButton>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
+          </HStack>
+        </Modal.Card>
+      </Modal.OverflowOverlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
-import {DeleteButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack, Box} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-preview-react/select';
 
 export default () => {
@@ -39,7 +39,9 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Are you sure you want to delete the item?</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Are you sure you want to delete the item?
+            </Box>
             <HStack spacing="s">
               <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete

package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx

@@ -10,7 +10,7 @@ import {
   useDisableBodyScroll,
 } from '@workday/canvas-kit-react/popup';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack, Box} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();
@@ -32,7 +32,9 @@ export default () => {
         <Modal.Card>
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <p>Are you sure you want to delete the item?</p>
+            <Box as="p" marginTop={0} marginBottom="m">
+              Are you sure you want to delete the item?
+            </Box>
             <HStack spacing="s">
               <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete

package/dist/mdx/react/pagination/PropTables.splitprops.tsx

@@ -11,7 +11,7 @@ import {
 export const PaginationHoistedComponent = (_: {model: PaginationModel}) => <div />;
 
 // <ArgsTable of={Pagination.PageButton} /> generates a props table with
-// IconButton props. Use this dummy component instead to limit the props shown.
+// Button props. Use this dummy component instead to limit the props shown.
 export const PageButtonComponent = (_: {pageNumber: number}) => <div />;
 
 // <ArgsTable of={Pagination.PageListComponent} /> generates a very large props