[added] Class name on body when modal is open

jnoleau · Jul 15, 2015 · adecf62 · adecf62
1 parent 0e94233
commit adecf62
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -3,6 +3,7 @@ var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
 var ModalPortal = React.createFactory(require('./ModalPortal'));
 var ariaAppHider = require('../helpers/ariaAppHider');
 var injectCSS = require('../helpers/injectCSS');
+var elementClass = require('element-class');
 
 var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
 
@@ -48,6 +49,12 @@ var Modal = module.exports = React.createClass({
   },
 
   renderPortal: function(props) {
+    if (props.isOpen) {
+      elementClass(document.body).add('ReactModal__Body--open');
+    } else {
+      elementClass(document.body).remove('ReactModal__Body--open');
+    }
+
     if (props.ariaHideApp) {
       ariaAppHider.toggle(props.isOpen, props.appElement);
     }

diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "webpack-dev-server": "1.10.1"
   },
   "dependencies": {
-    "classnames": "^2.1.3"
+    "classnames": "^2.1.3",
+    "element-class": "^0.2.0"
   },
   "peerDependencies": {
     "react": ">=0.13.3"

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -115,6 +115,18 @@ describe('Modal', function () {
     equal(modal.portal.refs.content.getDOMNode().style.width, '20px');
   });
 
+  it('adds class to body when open', function() {
+    var modal = renderModal({isOpen: false});
+    equal(document.body.className.contains('ReactModal__Body--open'), false);
+
+    modal.setProps({ isOpen: true});
+    equal(document.body.className.contains('ReactModal__Body--open'), true);
+
+    modal = renderModal({isOpen: false});
+    equal(document.body.className.contains('ReactModal__Body--open'), false);
+    unmountModal();
+  });
+
   it('adds --after-open for animations', function() {
     var modal = renderModal({isOpen: true});
     var overlay = document.querySelector('.ReactModal__Overlay');