fix(modal): handle overflowing content (#244)

openedx · May 11, 2018 · bd67902 · bd67902
1 parent f02adb2
commit bd67902
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 3 deletions.
diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss
@@ -3,8 +3,11 @@
 @import "~bootstrap/scss/_grid";
 @import "~bootstrap/scss/_utilities";
 
-.modal-open {
-  display: block;
+.modal.show {
+  position: fixed;
+  background-color: transparent;
+  max-height: 100%;
+  width: 100%;
 
   &:focus {
     .modal-dialog {
@@ -13,10 +16,47 @@
   }
 }
 
+.modal.is-ie11 {
+  // fix browser that likes to do things its own way
+  overflow-y: scroll;
+  height: auto;
+
+  .modal-content {
+    height: auto;
+    max-height: none;
+  }
+}
+
 .modal-backdrop {
   background-color: rgba(0,0,0,0.3);
 
   // Fade for backdrop
   &.fade { opacity: 0; }
   &.show { opacity: 1; }
 }
+
+.modal-dialog {
+  height: 100%;
+  margin: auto;
+  padding: $spacer / 2;
+
+  @media (min-width: map-get($grid-breakpoints, 'sm')) {
+    padding: $spacer;
+  }
+}
+
+.modal-content {
+  max-height: 100%;
+}
+
+.modal-header {
+  flex: 0 0 auto;
+}
+
+.modal-body {
+  overflow: auto;
+}
+
+.modal-footer {
+  flex: 0 0 auto;
+}
diff --git a/src/Modal/Modal.stories.jsx b/src/Modal/Modal.stories.jsx
@@ -225,4 +225,12 @@ storiesOf('Modal', module)
         parentSelector=".target-div-two"
       />
     </div>
+  ))
+  .add('modal with overflowing content', () => (
+    <Modal
+      open
+      title="Modal title."
+      body={'Overflowing body. '.repeat(600)}
+      onClose={() => {}}
+    />
   ));
diff --git a/src/Modal/Modal.test.jsx b/src/Modal/Modal.test.jsx
@@ -127,6 +127,36 @@ describe('<Modal />', () => {
       expect(modalFooter.find('button')).toHaveLength(1);
       expect(wrapper.find('button')).toHaveLength(1);
     });
+
+    it('renders with IE11-specific styling when IE11 is detected', () => {
+      const { MSInputMethodContext } = global;
+      const { documentMode } = global.document;
+
+      // mimic IE11
+      global.MSInputMethodContext = true;
+      global.document.documentMode = true;
+      wrapper = mount(<Modal {...defaultProps} />);
+      const modal = wrapper.find('.modal');
+      expect(modal.hasClass('is-ie11')).toEqual(true);
+
+      global.MSInputMethodContext = MSInputMethodContext;
+      global.document.documentMode = documentMode;
+    });
+
+    it('renders without IE11-specific styling when IE11 is not detected', () => {
+      const { MSInputMethodContext } = global;
+      const { documentMode } = global.document;
+
+      // mimic non-IE11 browser
+      global.MSInputMethodContext = false;
+      global.document.documentMode = false;
+      wrapper = mount(<Modal {...defaultProps} />);
+      const modal = wrapper.find('.modal');
+      expect(modal.hasClass('is-ie11')).toEqual(false);
+
+      global.MSInputMethodContext = MSInputMethodContext;
+      global.document.documentMode = documentMode;
+    });
   });
 
   describe('props received correctly', () => {

diff --git a/src/Modal/index.jsx b/src/Modal/index.jsx
@@ -22,6 +22,9 @@ class Modal extends React.Component {
     this.headerId = newId();
     this.el = document.createElement('div');
 
+    // Sets true for IE11, false otherwise: https://stackoverflow.com/a/22082397/6620612
+    this.isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+
     this.state = {
       open: props.open,
     };
@@ -93,7 +96,7 @@ class Modal extends React.Component {
               {body}
             </div>
           </div>
-          <div className={styles.col}>
+          <div className={styles['col-md-2']}>
             <Icon
               id={newId(`Modal-${variant.status}`)}
               className={[
@@ -183,6 +186,7 @@ class Modal extends React.Component {
               [styles['d-block']]: open,
               [styles.show]: open,
               [styles.fade]: !open,
+              [styles['is-ie11']]: this.isIE11,
             },
           )}
           role="dialog"