feat(modal): Modals passthrough className, id, and style

modal, modalBody, and modalFooter passthrough these attributes [Finishes #98913332]
pivotal-cf · Jul 15, 2015 · fe01756 · fe01756
1 parent ea0d732
commit fe01756
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>