Merge d5f2faa into f3b9e2c

Workday · Nov 16, 2020 · 7f480d6 · 7f480d6
2 parents f3b9e2c + d5f2faa
commit 7f480d6
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 40 deletions.
diff --git a/modules/modal/css/lib/modal.scss b/modules/modal/css/lib/modal.scss
@@ -3,7 +3,7 @@
     background: none;
   }
   to {
-    background: rgba(0,0,0,0.65);
+    background: rgba(0, 0, 0, 0.65);
   }
 }
 
@@ -19,17 +19,32 @@
 }
 
 .wdc-modal-bg {
-  align-items: center;
   animation-duration: 0.3s;
   animation-name: wdc-modal-bg-animation;
-  background: rgba(0,0,0,0.65);
-  display: flex;
-  height: 100vh;
-  justify-content: center;
+  background: rgba(0, 0, 0, 0.65);
+  display: inline-block;
   left: 0;
   position: fixed;
   top: 0;
-  width: 100vw;
+  bottom: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.wdc-modal-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1.75rem auto;
+  min-height: calc(100% - (1.75rem * 2));
+
+  // IE11 fix for setting min-height in a flex container
+  &::before {
+    display: block;
+    height: calc(100vh - (1.75rem * 2));
+    content: '';
+  }
 }
 
 .wdc-modal {

diff --git a/modules/modal/css/stories.tsx b/modules/modal/css/stories.tsx
@@ -33,37 +33,39 @@ class ModalWrapper extends React.Component<{}, ModalWrapperState> {
         </button>
         {open ? (
           <div className="wdc-modal-bg" onClick={this.onOverlayClick}>
-            <div
-              className="wdc-modal wdc-modal-padding-s"
-              style={{width: '440px'}}
-              role="dialog"
-              aria-labelledby="modal-heading"
-            >
-              <div className="wdc-modal-close">
+            <div className="wdc-modal-dialog">
+              <div
+                className="wdc-modal wdc-modal-padding-s"
+                style={{width: '440px'}}
+                role="dialog"
+                aria-labelledby="modal-heading"
+              >
+                <div className="wdc-modal-close">
+                  <button
+                    onClick={this.onCloseClick}
+                    className="wdc-btn-icon-plain"
+                    aria-label="Close"
+                  >
+                    <i className="wdc-icon" data-icon="x" data-category="system" />
+                  </button>
+                </div>
+                <h3 className="wdc-modal-heading" id="modal-heading">
+                  Delete Item
+                </h3>
+                <div style={{marginBottom: '24px'}} className="wdc-modal-body">
+                  Are you sure you'd like to delete the item titled 'My Item'?
+                </div>
                 <button
-                  onClick={this.onCloseClick}
-                  className="wdc-btn-icon-plain"
-                  aria-label="Close"
+                  className="wdc-btn wdc-btn-delete"
+                  onClick={this.onDeleteClick}
+                  style={{marginRight: '16px'}}
                 >
-                  <i className="wdc-icon" data-icon="x" data-category="system" />
+                  Delete Item
+                </button>
+                <button className="wdc-btn" onClick={this.onCancelClick}>
+                  Cancel
                 </button>
               </div>
-              <h3 className="wdc-modal-heading" id="modal-heading">
-                Delete Item
-              </h3>
-              <div style={{marginBottom: '24px'}} className="wdc-modal-body">
-                Are you sure you'd like to delete the item titled 'My Item'?
-              </div>
-              <button
-                className="wdc-btn wdc-btn-delete"
-                onClick={this.onDeleteClick}
-                style={{marginRight: '16px'}}
-              >
-                Delete Item
-              </button>
-              <button className="wdc-btn" onClick={this.onCancelClick}>
-                Cancel
-              </button>
             </div>
           </div>
         ) : null}

diff --git a/modules/modal/react/lib/ModalContent.tsx b/modules/modal/react/lib/ModalContent.tsx
@@ -75,8 +75,10 @@ const Container = styled('div')({
   position: 'fixed',
   top: 0,
   left: 0,
-  width: '100vw',
-  height: '100vh',
+  bottom: 0,
+  right: 0,
+  overflowX: 'hidden',
+  overflowY: 'auto',
   background: 'rgba(0,0,0,0.65)',
   animationName: `${fadeIn}`,
   animationDuration: '0.3s',
@@ -91,13 +93,18 @@ const Container = styled('div')({
 // 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',
   display: 'flex',
-  position: 'absolute',
-  left: 0,
-  top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+  margin: '1.75rem auto',
+  minHeight: 'calc(100% - (1.75rem * 2))',
+
+  // IE11 fix for setting min-height in a flex container
+  '&::before': {
+    display: 'block',
+    content: "''",
+    height: 'calc(100vh - (1.75rem * 2))',
+  },
 });
 
 const transformOrigin = {
@@ -184,6 +191,18 @@ const useInitialFocus = (
   }, [modalRef, firstFocusRef]);
 };
 
+const useRemoveBodyScroll = () => {
+  React.useLayoutEffect(() => {
+    const originalOverflow = document.documentElement.style.overflow;
+
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+};
+
 const ModalContent = ({
   ariaLabel,
   width = ModalWidth.s,
@@ -203,6 +222,7 @@ const ModalContent = ({
   useFocusTrap(stackRef);
   useInitialFocus(stackRef, firstFocusRef);
   useAssistiveHideSiblings(stackRef);
+  useRemoveBodyScroll();
 
   // special handling for clicking on the overlay
   const onOverlayClick = (event: React.MouseEvent<HTMLElement>) => {