feat(modal): Add support for scrolling a modal

Fixes Workday#790

modules/react/modal/lib/ModalCard.tsx

@@ -14,7 +14,7 @@ export const ModalCard = createComponent('div')({
 
     const props = useModalCard(localModel, elemProps, ref);
     return (
-      <Popup.Card as={Element} width={440} borderWidth={0} {...props}>
+      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" {...props}>
         {children}
       </Popup.Card>
     );

modules/react/modal/lib/ModalOverlay.tsx

@@ -47,13 +47,20 @@ const Container = styled('div')<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const CenteringContainer = styled('div')({
-  height: '100vh',
+  maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+
+  // IE11 fix for setting min-height in a flex container
+  ':before': {
+    display: 'block',
+    content: "''",
+    height: '100vh',
+  },
 });
 
 export const ModalOverlay = createComponent('div')({

modules/react/modal/stories/Modal.stories.mdx

@@ -8,6 +8,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';
 
 <Meta title="Components/Popups/Modal/React" component={Modal} />
 
@@ -81,6 +83,31 @@ requires a `label` prop.
 
 <ExampleCodeBlock code={CustomTarget} />
 
+### Body Content Overflow
+
+There are a few ways to handle body content overflowing. The easiest is to use `Modal.Card` as a
+vertical stack using `VStack` and setting the max height to the view height minus the desired margin
+around the card (default margin is `xl` or `40px`). The `VStack` is a flexbox container than
+controls the height of the children. From there, you set up the content area to have an
+`overflow: scroll` style. Usually, you want the header and action buttons to stay put. In this
+example, the `Modal.Card` has an `as={VStack}` with no spacing, and a max height of
+`calc(100vh - ${space.xl} * 2)` which is the viewport height minus the default margin x 2 (top and
+bottom). The `Modal.Heading`, `Modal.Body`, and `HStack` are the 3 flexbox children that will try to
+equally fill the container up to the max height defined. The `overflow: scroll` on the `Modal.Body`
+is what restricts the content to an overflow container so that it scrolls. The effectively fixes the
+position of the heading and action buttons.
+
+<ExampleCodeBlock code={BodyOverflow} />
+
+### Full overlay scrolling
+
+If content is large, scrolling the entire overlay container is an option. An `overflow: scroll` must
+be added to the `Modal.Overlay` element to cause the whole overlay to be scrollable. 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-scrolling) method.
+
+<ExampleCodeBlock code={FullOverflow} />
+
 ## Components
 
 ### Modal

modules/react/modal/stories/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} from '@workday/canvas-kit-labs-react';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export const BodyOverflow = () => {
+  const handleDelete = () => {
+    console.log('Deleted item');
+  };
+
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card as={VStack} spacing={0} maxHeight={`calc(100vh - ${space.xl} * 2)`}>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body style={{overflow: 'scroll'}}>
+            <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>
+  );
+};

modules/react/modal/stories/examples/FullOverflow.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} from '@workday/canvas-kit-labs-react';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export const FullOverflow = () => {
+  const handleDelete = () => {
+    console.log('Deleted item');
+  };
+
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay style={{overflow: 'scroll'}}>
+        <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">
+            <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
+              Delete
+            </Modal.CloseButton>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
+          </HStack>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};