@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/{loading-animation → loading-dots}/lib/LoadingDots.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/react';
-import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {styled} from '@workday/canvas-kit-react/common';
 
 /**
@@ -60,7 +60,7 @@ const Container = styled('div')({
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export default function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
+export function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
   const {...elemProps} = props;
 
   return (

package/loading-dots/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/loading-dots",
+  "module": "../dist/es6/loading-dots",
+  "sideEffects": false,
+  "types": "../dist/es6/loading-dots"
+}

package/menu/index.ts

@@ -2,7 +2,7 @@ export {useMenuModel} from './lib/useMenuModel';
 export {Menu} from './lib/Menu';
 
 export {useMenuCard} from './lib/MenuCard';
-export {useMenuItem} from './lib/MenuItem';
+export {useMenuItem, StyledMenuItem} from './lib/MenuItem';
 export {useMenuList} from './lib/MenuList';
 export {useMenuPopper} from './lib/MenuPopper';
 export {useMenuTarget, useMenuTargetContext} from './lib/MenuTarget';

package/menu/lib/Menu.tsx

@@ -18,9 +18,15 @@ export interface MenuProps {
 }
 
 /**
- * An accessible dropdown menu component. A dropdown menu usually contains a target element that
- * opens to a menu.
- * @example
+ * `Menu` is a combination of a 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
+ * using [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.
+ *
+ * ```tsx
  * <Menu>
  *   <Menu.Target>Open</Menu.Target>
  *   <Menu.Popper>
@@ -32,11 +38,29 @@ export interface MenuProps {
  *     </Menu.Card>
  *   </Menu.Popper>
  * </Menu>
+ * ```
  */
 export const Menu = createContainer()({
   displayName: 'Menu',
   modelHook: useMenuModel,
   subComponents: {
+    /**
+     * `Menu.Target` is similar to all {@link PopupTarget 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 {@link SecondaryButton}. Any Canvas Kit component should
+     * work with an `as`.
+     *
+     * An example changing to a {@link 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.
+     */
+    Target: MenuTarget,
     /**
      * The menu card is a non-semantic element used to give the dropdown menu its distinct visual
      * cue that the dropdown menu is floating above other content. A menu card usually contains a
@@ -47,7 +71,7 @@ export const Menu = createContainer()({
      * The menu list follows the Collections API. A list can either contain static items
      * or a render prop and `items` to the model.
      *
-     * @example
+     * ```tsx
      * const MyComponent = () => {
      *   const model = useMenuModel({
      *     items: [
@@ -59,27 +83,33 @@ export const Menu = createContainer()({
      *   return (
      *     <Menu model={model}>
      *       <Menu.List>
-     *         {(item) => <Menu.Item name={item.id}>{item.text}</Menu.Item>}
+     *         {(item) => <Menu.Item data-id={item.id}>{item.text}</Menu.Item>}
      *       </Menu.List>
      *     </Menu>
      *   )
      * }
+     * ```
      */
     List: MenuList,
     /**
-     * A menu item has an optional `name` prop that identifies the item in the menu list and will be
-     * passed to the optional `onSelect` callback of the menu model. A menu item can contain any
-     * HTML. If more complex HTML is provided, consider
+     * A `Menu.Item` has an optional `data-id` prop that identifies the item in the `Menu.List` and
+     * will be passed to the optional `onSelect` callback of the `Menu` model. A `Menu.Item` can
+     * contain any HTML. If more complex HTML is provided, add `data-text` to the `Menu.Item`
+     * component if using the static API. If you're using the dynamic API, pass `getTextValue` to
+     * the model.
      */
     Item: MenuItem,
     Divider: MenuDivider,
-    Target: MenuTarget,
+    /**
+     * A `Menu.TargetContext` is the same as a {@link MenuTarget Menu.Target}, except it adds a
+     * `context` event handler instead of a `click` handler to trigger context menus.
+     */
     TargetContext: MenuTargetContext,
     /**
-     * The "Popper" of a menu. The popper will appear around the `Menu.Target`. It renders a `div`
-     * element that is portalled to the `document.body` which is controlled by the `PopupStack. The
-     * `PopupStack` is not part of React. This means no extra props given to this component will be
-     * forwarded to the `div` element, but the `ref` will be forwarded.
+     * The "Popper" of a menu. The popper will appear around the {@link MenuTarget Menu.Target}. It
+     * renders a `div` element that is portalled to the `document.body` which is controlled by the
+     * {@link PopupStack}. The `PopupStack` is not part of React. This means no extra props given to
+     * this component will be forwarded to the `div` element, but the `ref` will be forwarded.
      */
     Popper: MenuPopper,
   },

package/menu/lib/MenuCard.tsx

@@ -61,6 +61,7 @@ export const MenuCard = createSubcomponent('div')({
       maxWidth={`calc(100vw - ${space.l})`}
       transformOrigin={transformOrigin}
       padding="zero"
+      depth={3}
       {...elemProps}
     >
       {elemProps.children}

package/menu/lib/MenuContextTarget.tsx

@@ -22,14 +22,12 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     onKeyDown(event: React.KeyboardEvent) {
       // eslint-disable-next-line default-case
       switch (event.key) {
-        case 'Down':
-        case 'ArrowDown': // IE11
-        case 'Up':
-        case 'ArrowUp': // IE11
+        case 'ArrowDown':
+        case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
           model.events.show(event);
       }
     },
-  };
+  } as const;
 });
 
 export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);

package/menu/lib/MenuItem.tsx

@@ -40,15 +40,14 @@ export interface MenuItemProps {
   'aria-disabled'?: boolean;
 }
 
-const StyledItem = styled(Box.as('button'))<StyledType>(
+export const StyledMenuItem = styled(Box.as('button'))<StyledType>(
   ({theme}) => {
     return {
       ...type.levels.subtext.large,
-      '& > *:not(style) ~ *:not(style)': {
-        marginLeft: space.xxs,
-      },
-      display: 'block',
+      display: 'grid',
+      alignItems: 'center',
       width: '100%',
+      gap: space.s,
       padding: `${space.xxs} ${space.s}`,
       boxSizing: 'border-box',
       cursor: 'pointer',
@@ -56,9 +55,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
       borderWidth: 0,
       textAlign: 'left',
       transition: 'background-color 80ms, color 80ms',
-      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-        fill: iconColors.active,
-      },
       '&:hover, &[aria-selected=true]': {
         backgroundColor: theme.canvas.palette.primary.lightest,
         color: colors.blackPepper300,
@@ -66,16 +62,19 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           fill: iconColors.hover,
         },
         '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.active,
+          fill: iconColors.hover,
         },
       },
-      '&:focus': {
+      '&:focus, &.focus': {
         outline: 'none',
         backgroundColor: theme.canvas.palette.primary.main,
         color: typeColors.inverse,
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
           fill: iconColors.inverse,
         },
+        '*:hover .wd-icon-fill': {
+          fill: iconColors.inverse,
+        },
         '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
           fill: iconColors.inverse,
         },
@@ -84,37 +83,37 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
       [`[data-whatinput]`]: {
         backgroundColor: 'inherit',
         color: colors.blackPepper300,
-        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.active,
-        },
         '&:hover, &[aria-selected=true]': {
           backgroundColor: theme.canvas.palette.primary.lightest,
           '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
             fill: iconColors.hover,
           },
         },
-        '&:focus': {
+        '&:focus, &.focus': {
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.active,
+            fill: iconColors.hover,
           },
         },
       },
       backgroundColor: 'inherit',
-      '&:disabled, &[aria-disabled]': {
+      '&:disabled, &[aria-disabled=true]': {
         color: colors.licorice100,
         cursor: 'default',
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
           fill: iconColors.disabled,
         },
-        '&:focus': {
+        '&:focus, &.focus': {
           backgroundColor: colors.blueberry200,
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.disabled,
           },
-          '&:hover, &[aria-selected=true]': {
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-              fill: iconColors.disabled,
-            },
+        },
+        '&:hover, &[aria-selected=true]': {
+          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: iconColors.disabled,
+          },
+          '*:hover .wd-icon-fill': {
+            fill: iconColors.disabled,
           },
         },
       },
@@ -134,7 +133,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
 export const useMenuItem = composeHooks(
   createElemPropsHook(useMenuModel)(
     (model, ref, elemProps: {'data-id': string} = {'data-id': ''}) => {
-      const {localRef, elementRef} = useLocalRef(ref);
+      const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
       const id = elemProps['data-id'];
 
       // focus on the item with the cursor
@@ -143,14 +142,11 @@ export const useMenuItem = composeHooks(
           if (model.state.cursorId === id) {
             // delay focus changes to allow PopperJS to position
             requestAnimationFrame(() => {
-              localRef.current.focus();
+              localRef.current?.focus();
             });
           }
         }
-        // We only need to run when the ID has changed. If the static API is used, the first time
-        // this is run, the id will be blank
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [id]);
+      }, [id, localRef, model.state.cursorId, model.state.mode]);
 
       return {
         ref: elementRef,
@@ -158,7 +154,10 @@ export const useMenuItem = composeHooks(
         onClick:
           model.state.mode === 'single'
             ? (event: React.SyntheticEvent) => {
-                model.events.hide(event);
+                // only hide if the item isn't disabled
+                if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                  model.events.hide(event);
+                }
               }
             : undefined,
       };
@@ -174,15 +173,15 @@ export const MenuItem = createSubcomponent('button')({
   modelHook: useMenuModel,
   elemPropsHook: useMenuItem,
   subComponents: {
-    Icon: SystemIcon,
+    Icon: styled(SystemIcon)({alignSelf: 'start'}),
     Text: styled('span')({flexGrow: 1, alignSelf: 'center'}),
   },
 })<MenuItemProps>(({children, ...elemProps}, Element) => {
   return (
     <OverflowTooltip placement="left">
-      <StyledItem minHeight={space.xl} as={Element} {...elemProps}>
+      <StyledMenuItem minHeight={space.xl} as={Element} {...elemProps}>
         {children}
-      </StyledItem>
+      </StyledMenuItem>
     </OverflowTooltip>
   );
 });

package/menu/lib/MenuList.tsx

@@ -5,25 +5,31 @@ import {
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
+  composeHooks,
 } from '@workday/canvas-kit-react/common';
-import {ListBox} from '@workday/canvas-kit-react/collection';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
+import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
 
-export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
+export interface MenuListProps<T = any>
+  extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode;
+  children: ListProps<T>['children'];
 }
 
-export const useMenuList = createElemPropsHook(useMenuModel)(model => {
-  return {
-    role: 'menu',
-    'aria-labelledby': model.state.id,
-  };
-});
+export const useMenuList = composeHooks(
+  createElemPropsHook(useMenuModel)(model => {
+    return {
+      role: 'menu',
+      'aria-labelledby': model.state.id,
+    };
+  }),
+  useReturnFocus,
+  useFocusRedirect
+);
 
 export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',
@@ -38,7 +44,7 @@ export const MenuList = createSubcomponent('div')({
       borderRadius="zero"
       padding="zero"
       marginY="xxs"
-      spacing="zero"
+      gap="zero"
       overflowY="auto"
       flexDirection={model.state.orientation === 'vertical' ? 'column' : 'row'}
       {...elemProps}

package/menu/lib/MenuTarget.tsx

@@ -14,7 +14,7 @@ export interface MenuTargetProps {
   children?: React.ReactNode;
 }
 
-const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
+export const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
   return {
     id: model.state.id,
     'aria-haspopup': 'true',
@@ -22,14 +22,12 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     onKeyDown(event: React.KeyboardEvent) {
       // eslint-disable-next-line default-case
       switch (event.key) {
-        case 'Down':
-        case 'ArrowDown': // IE11
-        case 'Up':
-        case 'ArrowUp': // IE11
+        case 'ArrowDown':
+        case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
           model.events.show(event);
       }
     },
-  };
+  } as const;
 });
 
 export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);

package/menu/lib/useMenuModel.tsx

@@ -2,9 +2,7 @@ import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
-  useFocusRedirect,
   usePopupModel,
-  useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {
   multiSelectionManager,
@@ -18,16 +16,17 @@ export const useMenuModel = createModelHook({
     ...usePopupModel.defaultConfig,
     /** Determines the default selection manager used as well as if the menu closes when an item is selected */
     mode: 'single' as 'single' | 'multiple',
+    // don't virtualize menus by default to avoid oddities with card width
+
+    shouldVirtualize: false,
   },
   requiredConfig: {
     ...useListModel.requiredConfig,
     ...usePopupModel.requiredConfig,
   },
 })(config => {
-  // don't virtualize menus by default to avoid oddities with card width
   const list = useListModel(
     useListModel.mergeConfig(config, {
-      shouldVirtualize: false,
       selection: config.mode === 'single' ? singleSelectionManager : multiSelectionManager,
     })
   );
@@ -43,8 +42,6 @@ export const useMenuModel = createModelHook({
 
   useAlwaysCloseOnOutsideClick(popup);
   useCloseOnEscape(popup);
-  useReturnFocus(popup);
-  useFocusRedirect(popup);
 
   const state = {mode: config.mode, ...list.state, ...popup.state};
 
@@ -53,5 +50,5 @@ export const useMenuModel = createModelHook({
     ...popup.events,
   };
 
-  return {...list, state, events};
+  return {...list, ...popup, state, events};
 });

package/menu/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/menu",
   "module": "../dist/es6/menu",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/menu"
 }

package/modal/lib/Modal.tsx

@@ -7,19 +7,91 @@ import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
 import {ModalOverflowOverlay} from './ModalOverflowOverlay';
+import {ModalBody} from './ModalBody';
 
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Modal` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Modal`
+ * container component will build a default one using `useModalModel`. `Modal` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export const Modal = createContainer()({
   displayName: 'Modal',
   modelHook: useModalModel,
   subComponents: {
-    Body: Popup.Body,
-    Card: ModalCard,
-    CloseIcon: Popup.CloseIcon,
+    /**
+     * The `Modal.Target` is any element that is meant to show the Modal. The default component
+     * rendered by this component is a {@link 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 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 {@link PopupTarget 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.
+     */
     Target: Popup.Target,
-    Heading: ModalHeading,
+    /**
+     * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+     * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+     * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+     * default element is a `div` element and can be changed via the `as` prop.
+     */
     Overlay: ModalOverlay,
-    OverflowOverlay: ModalOverflowOverlay,
+    /**
+     * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
+     * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
+     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
+     * instead. The default element is a `div` and can be changed via the `as` prop.
+     */
+    Card: ModalCard,
+    /**
+     * The `Modal.Heading` semantically labels the Modal via adding an `id` that the
+     * {@link ModalCard Modal.Card} points to via `aria-labelledby`. If this component is not used,
+     * you must add an `aria-label` to the `Modal.Card` to label the Modal for screen reader users.
+     * This component uses the `useModalHeading` behavior hook which sets an `id` and also does some
+     * focus management logic for situations where there is no
+     * {@link ModalCloseIcon Modal.CloseIcon} component used. Please use `Modal.Heading` and don't
+     * use your own unless you also use the `useModalHeading` hook in your component. Consult
+     * accessibility if you cannot use this component. The default element is an `h2` and can be
+     * changed via the `as` prop.
+     */
+    Heading: ModalHeading,
+    /**
+     * 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
+     * {@link TertiaryButton} with just an icon that can be changed via the `as`. All props that
+     * `TertiaryButton` takes are also available by default.
+     */
+    CloseIcon: Popup.CloseIcon,
+    /**
+     * The `Modal.CloseButton` is a convenience component that attaches an `onClick` listener to
+     * close the Modal. It uses the `usePopupCloseButton` behavior hook which adds an `onClick` that
+     * calls `model.events.hide()`. If you don't use this component, you'll have to add your own
+     * `onClick` and you'll have to hoist the model. The default component rendered is a
+     * {@link 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={TertiaryButton}` with no children and
+     * an `icon` will render a {@link 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.
+     */
     CloseButton: Popup.CloseButton,
+    Body: ModalBody,
+    /**
+     * If content is large, scrolling the entire overlay container is an option. Use the
+     * `Modal.OverflowOverlay` component instead of the {@link ModalOverlay Modal.Overlay}
+     * component. The {@link ModalCard Modal.Card}'s `maxHeight` and `height` will need to be reset
+     * to `inherit` to prevent any internal overflow.
+     *
+     * This component should be used in place of the {@link ModalOverlay Modal.Overlay} component if
+     * full body overflow is desired.
+     */
+    OverflowOverlay: ModalOverflowOverlay,
   },
 })<ExtractProps<typeof Dialog, never>>(elemProps => {
   return <>{elemProps.children}</>;

package/modal/lib/ModalBody.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  getTheme,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {Popup} from '@workday/canvas-kit-react/popup';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+import {useModalModel} from './hooks';
+
+export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
+
+const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      marginBottom: space.zero,
+      padding: `${space.xxxs} ${space.xxs} ${space.xxs} ${space.xxs}`,
+    },
+  };
+});
+
+export const ModalBody = createSubcomponent('div')({
+  displayName: 'Modal.Body',
+  modelHook: useModalModel,
+})<ModalBodyProps>((elemProps, Element) => {
+  return <ResponsiveModalBody as={Element} {...elemProps} />;
+});

package/modal/lib/ModalCard.tsx

@@ -1,18 +1,35 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  StyledType,
+  styled,
+  getTheme,
+} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
+const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    margin: space.xl,
+    [canvasTheme.breakpoints.down('s')]: {
+      margin: space.s, // 16px all around margin on smaller screen sizes
+      padding: space.s, // brings total padding between edge and content to 24px
+      borderRadius: space.m, // 24px border radius on smaller devices.
+    },
+  };
+});
+
 export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return (
-    <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...elemProps} />
-  );
+  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
 });

package/modal/lib/ModalHeading.tsx

@@ -1,16 +1,33 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  getTheme,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
+const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      marginBottom: space.zero,
+      padding: `${space.xxs} ${space.xxs} ${space.xxxs} ${space.xxs}`,
+    },
+  };
+});
+
 export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <Popup.Heading as={Element} {...elemProps} />;
+  return <ResponsiveModalHeading as={Element} {...elemProps} />;
 });