@workday/canvas-kit-docs 7.3.0-next.0 → 7.3.1

package/dist/commonjs/lib/specs.js

@@ -6172,6 +6172,102 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ToastLabs.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Toast",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the 'Basic' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Alert' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Dialog' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with no close icon or action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of status"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to polite"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with an alert",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of alert"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to assertive"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with a close button and action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of dialog"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-label set to notification"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-describedby"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Tooltip.spec.ts",

package/dist/es6/lib/specs.js

@@ -6172,6 +6172,102 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "ToastLabs.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Toast",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the 'Basic' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Alert' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the 'Toast Dialog' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with no close icon or action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of status"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to polite"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with an alert",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of alert"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-live set to assertive"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-atomic set to true"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the toast with a close button and action button",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have a role of dialog"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-label set to notification"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-describedby"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Tooltip.spec.ts",

package/dist/mdx/labs-react/toast/examples/Basic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  return (
+    <Toast>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      </Toast.Body>
+    </Toast>
+  );
+};

package/dist/mdx/labs-react/toast/examples/RTL.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+      <Toast mode="dialog">
+        <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+        <Toast.Body>
+          <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        </Toast.Body>
+        <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+      </Toast>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/toast/examples/ToastAlert.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {exclamationCircleIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => (
+  <Toast mode="alert">
+    <Toast.Icon icon={exclamationCircleIcon} color={colors.cinnamon500} />
+    <Toast.Body>
+      <Toast.Message>There was an error with your workbook.</Toast.Message>
+    </Toast.Body>
+  </Toast>
+);

package/dist/mdx/labs-react/toast/examples/ToastDialog.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => (
+  <Toast mode="dialog">
+    <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+    <Toast.Body>
+      <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      <Toast.Link href="#hreflink">Custom Link</Toast.Link>
+    </Toast.Body>
+  </Toast>
+);

package/dist/mdx/labs-react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <Toast mode="dialog">
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        <Toast.Link href="#hyperlink">Custom Link</Toast.Link>
+      </Toast.Body>
+      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+    </Toast>
+  );
+};

package/dist/mdx/labs-react/toast/examples/WithCloseButton.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const handleClose = () => console.log('close button clicked');
+
+  return (
+    <Toast>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+      </Toast.Body>
+      <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+    </Toast>
+  );
+};

package/dist/mdx/labs-react/toast/examples/WithPopper.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+import {Popper, SecondaryButton} from '@workday/canvas-kit-react';
+
+export default () => {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div ref={containerRef}>
+      <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
+      <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
+        <Toast mode="dialog">
+          <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+          <Toast.Body>
+            <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+          </Toast.Body>
+          <Toast.CloseIcon aria-label="Close" onClick={handleClose} />
+        </Toast>
+      </Popper>
+    </div>
+  );
+};

package/dist/mdx/labs-react/toast/toast.mdx

@@ -0,0 +1,185 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+import {Toast} from '@workday/canvas-kit-labs-react/toast';
+import Basic from './examples/Basic';
+import ToastAlert from './examples/ToastAlert';
+import WithCloseButton from './examples/WithCloseButton';
+import ToastDialog from './examples/ToastDialog';
+import WithActionLinkAndCloseIcon from './examples/WithActionLinkAndCloseIcon';
+import WithPopper from './examples/WithPopper';
+import RTL from './examples/RTL';
+
+
+# Canvas Kit Toast
+
+`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+that contains updates or messages about the status of an application's process.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Basic Example
+
+`Toast` includes a container `Toast` component and the following subcomponents: `Toast.Body`,
+`Toast.CloseIcon`, `Toast.Icon`, `Toast.Message`, and `Toast.Link`.
+
+`Toast` supports different modes through the `mode` prop: `status`, `alert`, and `dialog`. Each mode
+conveys a different purpose of the message and assigns the necessary ARIA attributes to support that
+purpose and provide an accessible experience.
+
+By default, `mode` is set to `status`, which indicates the message contains advisory information
+such as a successful action.
+
+<ExampleCodeBlock code={Basic} />
+
+A `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of
+`status`.
+
+Here's a more complete example with a button which triggers a dismissable `Toast`. The `Toast` is
+positioned using `Popper`.
+
+<ExampleCodeBlock code={WithPopper} />
+
+### Alert
+
+Set the `mode` prop to `alert` to convey urgent and important information such as an error.
+
+<ExampleCodeBlock code={ToastAlert} />
+
+An `alert` `Toast` will wrap the message within an `assertive` ARIA live region with a `role` of
+`alert`.
+
+### Dialog
+
+Set the `mode` prop to `dialog` to convey the presence of a follow-up action.
+
+<ExampleCodeBlock code={ToastDialog} />
+
+The `Toast` will be given a role of `dialog` along with an `aria-label` to indicate that it's a
+notification.
+
+> **Note**: You must use the `Toast.Message` subcomponent when the `mode` is `dialog` so that `id`
+> is tied to the message for accessibility. You can also pass in a `model` with `useToastModel` to
+> provide a specific `id` for the `Toast.Message`:
+
+```tsx
+export const CustomIDToast = () => {
+  const model = useToastModel({
+    id: '12df5',
+    mode: 'dialog',
+  });
+  return (
+    <Toast model={model}>
+      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+      <Toast.Body>
+        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        <Toast.Link href="#href">View More Details</Toast.Link>
+      </Toast.Body>
+    </Toast>
+  );
+};
+```
+
+### Close Icon Button
+
+Include the `Toast.CloseIcon` subcomponent to display a close button within the Toast.
+
+<ExampleCodeBlock code={WithCloseButton} />
+
+`Toast.CloseIcon` may be included within a `dialog` `Toast` to create a `Toast` with both an action
+link and a close button.
+
+<ExampleCodeBlock code={WithActionLinkAndCloseIcon} />
+
+### Right-to-Left (RTL)
+
+`Toast` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RTL} />
+
+## Components
+
+### Toast
+
+#### Usage
+
+`Toast` defines a container for all `Toast` subcomponents. `Toast` will render with the appropriate
+ARIA attributes based on which `mode` is selected. It also accepts a `model` if you wish to provide
+a specific `id`.
+
+`Toast` renders a `Popup.Card` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast} />
+
+### Toast.Body
+
+#### Usage
+
+`Toast.Body` defines a container for the contents of the `Toast`, including `Toast.Message` and
+`Toast.Link`.
+
+`Toast.Body` renders a `Popup.Body` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Body} />
+
+### Toast.Icon
+
+#### Usage
+
+`Toast.Icon` renders a decorative icon for the `Toast`. When using `Toast.Icon`, be sure to set a
+complementary `mode` to the `Toast`. For example, if the icon conveys an error, set the `mode` to
+`alert`.
+
+`Toast.Icon` renders a `SystemIcon` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Icon} />
+
+### Toast.Message
+
+#### Usage
+
+`Toast.Message` defines a container for the message of the `Toast`. It accepts any `React.ReactNode`
+as its children. `Toast.Message` is assigned a unique `id` so that it may be read aloud by screen
+readers when the `Toast` `mode` is set to `dialog`.
+
+`Toast.Message` renders a `Box` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Message} />
+
+### Toast.Link
+
+#### Usage
+
+Use `Toast.Link` to provide an action in the `Toast`. `Toast.Link` should always be used in
+conjunction with `dialog` `mode` to provide an accessible experience.
+
+`Toast.Link` renders a `Hyperlink` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.Link} />
+
+### Toast.CloseIcon
+
+#### Usage
+
+Use `Toast.CloseIcon` to provide a close button to dismiss the `Toast`.
+
+`Toast.Link` renders a `Popup.CloseIcon` under the hood.
+
+#### Props
+
+<ArgsTable of={Toast.CloseIcon} />

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

@@ -17,16 +17,16 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginTop={0} marginBottom="m">
+            <Box as="p" marginY="zero">
               Are you sure you want to delete the item?
             </Box>
-            <HStack spacing="s">
-              <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Modal.CloseButton>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </HStack>
           </Modal.Body>
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
+            <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/BodyOverflow.tsx

@@ -2,8 +2,7 @@ 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';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const handleDelete = () => {
@@ -43,7 +42,7 @@ export default () => {
             <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">
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>

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

@@ -27,16 +27,16 @@ export default () => {
             <Box as="p" marginTop={0} marginBottom="m">
               Enter name to confirm deletion
             </Box>
-            <FormField label="Item name">
+            <FormField label="Item name" style={{marginBottom: 0}}>
               <TextInput ref={ref} value={value} onChange={e => setValue(e.currentTarget.value)} />
             </FormField>
-            <HStack spacing="s">
-              <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Modal.CloseButton>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </HStack>
           </Modal.Body>
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
+            <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/FullOverflow.tsx

@@ -42,7 +42,7 @@ export default () => {
             <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">
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>

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

@@ -39,16 +39,16 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginTop={0} marginBottom="m">
+            <Box as="p" marginY="zero">
               Are you sure you want to delete the item?
             </Box>
-            <HStack spacing="s">
-              <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Modal.CloseButton>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </HStack>
           </Modal.Body>
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
+            <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/WithoutCloseIcon.tsx

@@ -32,16 +32,16 @@ export default () => {
         <Modal.Card>
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginTop={0} marginBottom="m">
+            <Box as="p" marginY="zero">
               Are you sure you want to delete the item?
             </Box>
-            <HStack spacing="s">
-              <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Modal.CloseButton>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </HStack>
           </Modal.Body>
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
+            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Modal.CloseButton>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
+          </HStack>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -9,7 +9,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();
@@ -27,18 +27,20 @@ export default () => {
     <Popup model={model}>
       <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
       <Popup.Popper placement="bottom">
-        <Popup.Card width={400} padding="s">
+        <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Delete Item</Popup.Heading>
           <Popup.Body>
-            <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-            <HStack spacing="s">
-              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
-            </HStack>
+            <Box as="p" marginY="zero">
+              Are you sure you'd like to delete the item titled 'My Item'?
+            </Box>
           </Popup.Body>
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
+            <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Popup.CloseButton>
+            <Popup.CloseButton>Cancel</Popup.CloseButton>
+          </HStack>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -10,7 +10,7 @@ import {
   useFocusRedirect,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();
@@ -39,13 +39,15 @@ export default () => {
         <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
         <div aria-owns={popupId} style={{position: 'absolute'}} />
         <Popup.Popper>
-          <Popup.Card width={400} padding="s">
+          <Popup.Card width={400}>
             <Popup.CloseIcon aria-label="Close" />
             <Popup.Heading>Delete Item</Popup.Heading>
             <Popup.Body>
-              <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+              <Box as="p" marginY="zero">
+                Are you sure you'd like to delete the item titled 'My Item'?
+              </Box>
             </Popup.Body>
-            <HStack spacing="s">
+            <HStack spacing="s" padding="xxs" marginTop="xxs">
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>

package/dist/mdx/react/popup/examples/FocusTrap.tsx

@@ -10,7 +10,7 @@ import {
   useReturnFocus,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();
@@ -39,13 +39,15 @@ export default () => {
         <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
         <div aria-owns={popupId} style={{position: 'absolute'}} />
         <Popup.Popper>
-          <Popup.Card width={400} padding="s">
+          <Popup.Card width={400}>
             <Popup.CloseIcon aria-label="Close" />
             <Popup.Heading>Delete Item</Popup.Heading>
             <Popup.Body>
-              <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+              <Box as="p" marginY="zero">
+                Are you sure you'd like to delete the item titled 'My Item'?
+              </Box>
             </Popup.Body>
-            <HStack spacing="s">
+            <HStack spacing="s" padding="xxs" marginTop="xxs">
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>

package/dist/mdx/react/popup/examples/InitialFocus.tsx

@@ -8,7 +8,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const initialFocusRef = React.useRef(null);
@@ -25,13 +25,15 @@ export default () => {
     <Popup model={model}>
       <Popup.Target>Send Message</Popup.Target>
       <Popup.Popper placement={'bottom'}>
-        <Popup.Card width={400} padding="16px">
+        <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Confirmation</Popup.Heading>
           <Popup.Body>
-            <p id="popup-message">Your message has been sent!</p>
+            <Box as="p" marginY="zero" id="popup-message">
+              Your message has been sent!
+            </Box>
           </Popup.Body>
-          <HStack spacing="s">
+          <HStack spacing="s" padding="xxs" marginTop="xxs">
             <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
               OK
             </Popup.CloseButton>

package/dist/mdx/react/popup/examples/NestedPopups.tsx

@@ -36,25 +36,27 @@ export default () => {
           <Popup.Card aria-label="Popup 1">
             <Popup.CloseIcon aria-label="Close" size="small" />
             <Popup.Body>
-              <p>Contents of Popup 1</p>
+              <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>
             </Popup.Body>
-            <Popup model={popup2}>
-              <Popup.Target>Open Popup 2</Popup.Target>
-              <Popup.Popper>
-                <Popup.Card aria-label="Popup 2">
-                  <Popup.CloseIcon aria-label="Close" size="small" />
-                  <Popup.Body>
-                    <p>Contents of Popup 2</p>
-                  </Popup.Body>
-                  <HStack spacing="s">
-                    <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
-                      Close Both (as)
-                    </Popup.CloseButton>
-                    <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
-                  </HStack>
-                </Popup.Card>
-              </Popup.Popper>
-            </Popup>
+            <HStack spacing="s" padding="xxs" marginTop="xxs">
+              <Popup model={popup2}>
+                <Popup.Target>Open Popup 2</Popup.Target>
+                <Popup.Popper>
+                  <Popup.Card aria-label="Popup 2">
+                    <Popup.CloseIcon aria-label="Close" size="small" />
+                    <Popup.Body>
+                      <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>
+                    </Popup.Body>
+                    <HStack spacing="s" padding="xxs" marginTop="xxs">
+                      <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
+                        Close Both (as)
+                      </Popup.CloseButton>
+                      <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
+                    </HStack>
+                  </Popup.Card>
+                </Popup.Popper>
+              </Popup>
+            </HStack>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

package/dist/mdx/react/popup/examples/RTL.tsx

@@ -3,18 +3,20 @@ import React from 'react';
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   return (
     <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <Popup.Card width={400} padding="s">
+      <Popup.Card width={400}>
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>
         <Popup.Body>
-          <p>האם ברצונך למחוק פריט זה</p>
+          <Box as="p" marginY="zero">
+            האם ברצונך למחוק פריט זה
+          </Box>
         </Popup.Body>
-        <HStack spacing="s">
+        <HStack spacing="s" padding="xxs" marginTop="xxs">
           <DeleteButton>לִמְחוֹק</DeleteButton>
           <SecondaryButton>לְבַטֵל</SecondaryButton>
         </HStack>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.3.0-next.0+0ec455ac",
+  "version": "7.3.1",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.3.0-next.0+0ec455ac"
+    "@workday/canvas-kit-react": "^7.3.1"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "0ec455ac3784594025a176e8f569b97deab5e0d4"
+  "gitHead": "41e6eb9532da50e341fe07b805becc2516f9d420"
 }