From fe017562d7fd1feaa47386dc42cf109c7a8954b6 Mon Sep 17 00:00:00 2001
From: Caroline Taymor and Kenny Wang <kwang@pivotal.io>
Date: Wed, 15 Jul 2015 11:30:59 -0700
Subject: [PATCH] feat(modal): Modals passthrough className, id, and style

modal, modalBody, and modalFooter passthrough these attributes

[Finishes #98913332]
---
 spec/pivotal-ui-react/modals/modals_spec.js  | 45 ++++++++++++++++++--
 src/pivotal-ui-react/modals/modals.js        |  7 +--
 src/pivotal-ui/components/modals/modals.scss |  2 +-
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/spec/pivotal-ui-react/modals/modals_spec.js b/spec/pivotal-ui-react/modals/modals_spec.js
index 959b4819c..67f40d1ee 100644
--- a/spec/pivotal-ui-react/modals/modals_spec.js
+++ b/spec/pivotal-ui-react/modals/modals_spec.js
@@ -40,9 +40,10 @@ describe('Modals', function() {
           return (
             <div>
               <DefaultButton id="openButton" onClick={this._openModal}>Open Modal</DefaultButton>
-              <Modal title="What a Header!" ref="modal">
-                <ModalBody>Text in a body</ModalBody>
-                <ModalFooter>
+              <Modal title="What a Header!" ref="modal"
+                     className="content-class" id="content-id" style={{opacity: '0.5'}}>
+                <ModalBody className="body-class" id="body-id" style={{opacity: '1'}}>Text in a body</ModalBody>
+                <ModalFooter className="footer-class" id="footer-id" style={{opacity: '0'}}>
                   <p>Text in a footer</p>
                   <DefaultButton id="closeButton" onClick={this._closeModal}>Close</DefaultButton>
                 </ModalFooter>
@@ -89,6 +90,44 @@ describe('Modals', function() {
       it('renders a modal-backdrop', function() {
         expect('.modal-backdrop').toExist();
       });
+
+      describe('when attributes are provided', function() {
+        it('sets className on the modal content div', function() {
+          expect('.modal-content').toHaveClass('content-class');
+        });
+
+        it('sets id on the modal content div', function() {
+          expect('.modal-content').toHaveAttr('id', 'content-id');
+        });
+
+        it('sets style on the modal content div', function() {
+          expect('.modal-content').toHaveCss({opacity: '0.5'});
+        });
+
+        it('sets className on the modal-body div', () => {
+          expect('.modal-body').toHaveClass('body-class');
+        });
+
+        it('sets id on the modal-body div', () => {
+          expect('.modal-body').toHaveAttr('id', 'body-id');
+        });
+
+        it('sets style on the modal-body div', () => {
+          expect('.modal-body').toHaveCss({opacity: '1'});
+        });
+
+        it('sets className on the modal-footer div', () => {
+          expect('.modal-footer').toHaveClass('footer-class');
+        });
+
+        it('sets id on the modal-footer div', () => {
+          expect('.modal-footer').toHaveAttr('id', 'footer-id');
+        });
+
+        it('sets style on the modal-footer div', () => {
+          expect('.modal-footer').toHaveCss({opacity: '0'});
+        });
+      });
     }
 
     function itKeepsTheModalOpen() { itOpensTheModal(); }
diff --git a/src/pivotal-ui-react/modals/modals.js b/src/pivotal-ui-react/modals/modals.js
index cc6074f41..ae9922d3b 100644
--- a/src/pivotal-ui-react/modals/modals.js
+++ b/src/pivotal-ui-react/modals/modals.js
@@ -1,6 +1,7 @@
 var React = require('react/addons');
 var {DefaultH4} = require('pui-react-typography');
 require('classlist-polyfill');
+import {mergeProps} from '../../../src/pivotal-ui-react/helpers/helpers';
 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
 /**
@@ -96,7 +97,7 @@ var Modal = React.createClass({
       modal = (
         <div className="modal modal-basic" style={{ display: 'block'}} key="bananas" ref="modal" onClick={this.childrenClick}>
           <div className="modal-dialog">
-            <div className="modal-content">
+            <div {...mergeProps(this.props, {className: 'modal-content'})}>
               <div className="modal-header">
                 <button type="button" className="close" onClick={this.close}>
                   <span>×</span>
@@ -131,7 +132,7 @@ var Modal = React.createClass({
  */
 var ModalBody = React.createClass({
   render() {
-    return <div className="modal-body">{this.props.children}</div>;
+    return <div {...mergeProps(this.props, {className: 'modal-body'})}>{this.props.children}</div>;
   }
 });
 
@@ -144,7 +145,7 @@ var ModalBody = React.createClass({
  */
 var ModalFooter = React.createClass({
   render() {
-    return <div className="modal-footer">{this.props.children}</div>;
+    return <div {...mergeProps(this.props, {className: 'modal-footer'})}>{this.props.children}</div>;
   }
 });
 
diff --git a/src/pivotal-ui/components/modals/modals.scss b/src/pivotal-ui/components/modals/modals.scss
index 7cfa355ad..72a27da59 100644
--- a/src/pivotal-ui/components/modals/modals.scss
+++ b/src/pivotal-ui/components/modals/modals.scss
@@ -282,7 +282,7 @@ var MyModal = React.createClass({
     return (
       <div>
         <UI.DefaultButton id='openButton' onClick={this._openModal}>Open Modal</UI.DefaultButton>
-        <UI.Modal title='What a Header!' ref='modal'>
+        <UI.Modal title='What a Header!' ref='modal' className='optional-custom-class'>
           <UI.ModalBody>Text in a body</UI.ModalBody>
           <UI.ModalFooter>
             <UI.DefaultButton id='closeButton' onClick={this._closeModal}>Close</UI.DefaultButton>