From adecf62a8183ef45e4e00d74a532d2a02b7c8c86 Mon Sep 17 00:00:00 2001
From: mzabriskie <mzabriskie@gmail.com>
Date: Wed, 15 Jul 2015 00:06:51 -0600
Subject: [PATCH] [added] Class name on body when modal is open

---
 lib/components/Modal.js |  7 +++++++
 package.json            |  3 ++-
 specs/Modal.spec.js     | 12 ++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/lib/components/Modal.js b/lib/components/Modal.js
index 1d45cc45..841d28de 100644
--- 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
index 6dbacf7f..59c290ce 100644
--- 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
index 126188cf..2678df8a 100644
--- 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');