Merge pull request react-bootstrap#664 from taion/panel-title-class-name

[fixed] Forward classes to panel title
Leonard-Li777 · May 15, 2015 · a964ea2 · a964ea2
2 parents 054df8f + 592a346
commit a964ea2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/src/Panel.js b/src/Panel.js
@@ -156,17 +156,19 @@ const Panel = React.createClass({
     if (!React.isValidElement(header) || Array.isArray(header)) {
       header = collapsible ?
         this.renderCollapsableTitle(header) : header;
-    } else if (collapsible) {
-
-      header = cloneElement(header, {
-        className: classNames(this.prefixClass('title')),
-        children: this.renderAnchor(header.props.children)
-      });
     } else {
+      const className = classNames(
+        this.prefixClass('title'), header.props.className
+      );
 
-      header = cloneElement(header, {
-        className: classNames(this.prefixClass('title'))
-      });
+      if (collapsible) {
+        header = cloneElement(header, {
+          className,
+          children: this.renderAnchor(header.props.children)
+        });
+      } else {
+        header = cloneElement(header, {className});
+      }
     }
 
     return (

diff --git a/test/PanelSpec.js b/test/PanelSpec.js
@@ -58,6 +58,18 @@ describe('Panel', function () {
     assert.equal(header.firstChild.firstChild.innerHTML, 'Heading');
   });
 
+  it('Should have custom component header with custom class', function () {
+    let header = <h3 className="custom-class">Heading</h3>,
+        instance = ReactTestUtils.renderIntoDocument(
+          <Panel header={header}>Panel content</Panel>
+        );
+    header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'panel-heading').getDOMNode();
+    assert.equal(header.firstChild.nodeName, 'H3');
+    assert.ok(header.firstChild.className.match(/\bpanel-title\b/));
+    assert.ok(header.firstChild.className.match(/\bcustom-class\b/));
+    assert.equal(header.firstChild.innerHTML, 'Heading');
+  });
+
   it('Should have footer', function () {
     let instance = ReactTestUtils.renderIntoDocument(
       <Panel footer="Footer">Panel content</Panel>