fix(modal): Add Backdrop style

openedx · Dec 20, 2017 · f9221d9 · f9221d9
2 parents e55f193 + f39744d
commit f9221d9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -695,7 +695,7 @@ exports[`Storyshots Modal basic usage 1`] = `
 <div
   aria-labelledby="id2"
   aria-modal={true}
-  className="modal show modal-open"
+  className="modal modal-open modal-backdrop show"
   role="dialog"
 >
   <div
@@ -757,7 +757,7 @@ exports[`Storyshots Modal configurable buttons 1`] = `
 <div
   aria-labelledby="id3"
   aria-modal={true}
-  className="modal show modal-open"
+  className="modal modal-open modal-backdrop show"
   role="dialog"
 >
   <div
@@ -846,7 +846,7 @@ exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
 <div
   aria-labelledby="id5"
   aria-modal={true}
-  className="modal show modal-open"
+  className="modal modal-open modal-backdrop show"
   role="dialog"
 >
   <div
@@ -917,7 +917,7 @@ exports[`Storyshots Modal configurable close button 1`] = `
 <div
   aria-labelledby="id6"
   aria-modal={true}
-  className="modal show modal-open"
+  className="modal modal-open modal-backdrop show"
   role="dialog"
 >
   <div
@@ -979,7 +979,7 @@ exports[`Storyshots Modal configurable title and body 1`] = `
 <div
   aria-labelledby="id4"
   aria-modal={true}
-  className="modal show modal-open"
+  className="modal modal-open modal-backdrop show"
   role="dialog"
 >
   <div
@@ -1051,7 +1051,7 @@ exports[`Storyshots Modal modal invoked via a button 1`] = `
   <div
     aria-labelledby="id7"
     aria-modal={true}
-    className="modal show"
+    className="modal fade"
     role="dialog"
   >
     <div
@@ -1123,7 +1123,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
 <div
   aria-labelledby="id8"
   aria-modal={true}
-  className="modal show modal-open"
+  className="modal modal-open modal-backdrop show"
   role="dialog"
 >
   <div

diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss
@@ -1,5 +1,14 @@
+@import "~bootstrap/scss/_variables";
 @import "~bootstrap/scss/_modal";
 
 .modal-open {
     display: block;
 }
+
+.modal-backdrop {
+  background-color: rgba(0,0,0,0.3);
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: 1; }
+}
diff --git a/src/Modal/Modal.test.jsx b/src/Modal/Modal.test.jsx
@@ -7,7 +7,10 @@ import Button from '../Button';
 
 
 const modalOpen = (isOpen, wrapper) => {
-  expect(wrapper.childAt(0).hasClass('modal-open')).toEqual(isOpen);
+  expect(wrapper.find('.modal').hasClass('modal-open')).toEqual(isOpen);
+  expect(wrapper.find('.modal').hasClass('modal-backdrop')).toEqual(isOpen);
+  expect(wrapper.find('.modal').hasClass('show')).toEqual(isOpen);
+  expect(wrapper.find('.modal').hasClass('fade')).toEqual(!isOpen);
   expect(wrapper.state('open')).toEqual(isOpen);
 };
 const title = 'Modal title';

diff --git a/src/Modal/index.jsx b/src/Modal/index.jsx
@@ -99,8 +99,23 @@ class Modal extends React.Component {
   }
 
   render() {
+    const { open } = this.state;
+
     return (
-      <div className={classNames(styles.modal, styles.show, { [styles['modal-open']]: this.state.open })} role="dialog" aria-modal aria-labelledby={this.headerId}>
+      <div
+        className={classNames(
+          styles.modal,
+          {
+            [styles['modal-open']]: open,
+            [styles['modal-backdrop']]: open,
+            [styles.show]: open,
+            [styles.fade]: !open,
+          },
+        )}
+        role="dialog"
+        aria-modal
+        aria-labelledby={this.headerId}
+      >
         <div className={styles['modal-dialog']}>
           <div className={styles['modal-content']}>
             <div className={styles['modal-header']}>