From 174c54496bdee3fd5aea745cfd78a53a66589304 Mon Sep 17 00:00:00 2001
From: Caroline Taymor and Kenny Wang <kwang@pivotal.io>
Date: Wed, 15 Jul 2015 10:00:37 -0700
Subject: [PATCH] feat(panels): Adds passthroughs for className, id, and style

className, id, and style passthrough to the panel and
innerClassName passes through to the panel-body

[Finishes #98986988]
---
 spec/pivotal-ui-react/panels/panels_spec.js  | 26 +++++++++++++++++---
 src/pivotal-ui-react/panels/panels.js        | 18 ++++++--------
 src/pivotal-ui/components/panels/panels.scss |  6 +++++
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/spec/pivotal-ui-react/panels/panels_spec.js b/spec/pivotal-ui-react/panels/panels_spec.js
index 0a9f80812..1a6c79680 100644
--- a/spec/pivotal-ui-react/panels/panels_spec.js
+++ b/spec/pivotal-ui-react/panels/panels_spec.js
@@ -39,15 +39,24 @@ describe('Panel', function() {
     });
   });
 
-  describe('when a className is provided', function() {
+  describe('when attributes are provided', function() {
     beforeEach(function() {
-      React.render(<Panel className="foo myClass">Sup</Panel>, root);
+      React.render(<Panel className="foo myClass" innerClassName="inner-class"
+                          id="outer-id"
+                          style={{opacity: '0.5'}}>Sup</Panel>, root);
     });
 
-    it('sets the className as a class on the panel', function() {
+    it('sets className, id, and style on the panel outer div', function() {
       expect('.panel').toHaveClass('foo');
       expect('.panel').toHaveClass('myClass');
+      expect('.panel').toHaveAttr('id', 'outer-id');
+      expect('.panel').toHaveCss({opacity: '0.5'});
     });
+
+    it('sets innerClassName on the panel-body div', () => {
+      expect('.panel-body').toHaveClass('inner-class');
+    });
+
   });
 
   describe('when padding is provided', function() {
@@ -100,6 +109,17 @@ describe('Panel', function() {
       });
     });
   });
+
+  describe('when scrollable is not set', () => {
+    beforeEach(function() {
+      React.render(<Panel>Sup</Panel>, root);
+    });
+
+    it('does not add the class "panel-scrollable"', () => {
+      expect('.panel').not.toHaveClass('panel-scrollable');
+    });
+  });
+
 });
 
 describe('ShadowPanel', function() {
diff --git a/src/pivotal-ui-react/panels/panels.js b/src/pivotal-ui-react/panels/panels.js
index b6b5eea14..8fffdfafc 100644
--- a/src/pivotal-ui-react/panels/panels.js
+++ b/src/pivotal-ui-react/panels/panels.js
@@ -51,25 +51,23 @@ var Panel = React.createClass({
   },
 
   render() {
-    var {kind, padding, scrollable, children, ...other} = this.props;
-
-    var bodyClasses = classnames('panel-body', padding);
+   const {kind, innerClassName, padding, scrollable, children, ...other} = this.props;
+    const panelStyle = (typeof scrollable === 'number') ? {maxHeight: `${scrollable}px`} : null;
+    const props = mergeProps(other, {
+      className: ['panel', kind, {'panel-scrollable': scrollable}],
+      style: panelStyle
+    });
 
-    var title = this.props.title ? (
+    const title = this.props.title ? (
       <div className="panel-header">
         <h5 className="panel-title-alt">{this.props.title}</h5>
       </div>
     ) : null;
 
-    var props = mergeProps(other, {
-      className: ['panel', kind, {'panel-scrollable': scrollable}],
-      style: (scrollable ? {maxHeight: scrollable} : {})
-    });
-
     return (
       <div {...props}>
         {title}
-        <div className={bodyClasses}>{children}</div>
+        <div className={classnames('panel-body', padding, innerClassName)}>{children}</div>
       </div>
     );
   }
diff --git a/src/pivotal-ui/components/panels/panels.scss b/src/pivotal-ui/components/panels/panels.scss
index 1287adf40..dcc348448 100644
--- a/src/pivotal-ui/components/panels/panels.scss
+++ b/src/pivotal-ui/components/panels/panels.scss
@@ -678,6 +678,11 @@ See examples below.
 <UI.Panel className="bg-neutral-8">
   <p>Base Panel</p>
 </UI.Panel>
+
+<UI.Panel className="bg-neutral-8 optional-class"
+  innerClassName="opt-inner-class">
+  <p>Base Panel</p>
+</UI.Panel>
 ```
 */
 
@@ -727,6 +732,7 @@ Add a "padding" attribute (i.e. `pal`, `pbn`, etc.) to change the padding on the
 <UI.Panel className="bg-neutral-8" padding="paxxl">
   <p>Base Panel</p>
 </UI.Panel>
+
 ```
 
 */