From 1d8b7c7cf8a21d1606e0a1ea72cb337436914faf Mon Sep 17 00:00:00 2001
From: Huey Hu <thehuey@gmail.com>
Date: Mon, 13 Apr 2015 17:10:04 -0700
Subject: [PATCH] [fixes] #516 [added] TabbedArea NavItem renderTab() className

TabbedArea TabPane rendering doesn't carry across the className
property.  This means it is not easy for users to customize
the look/feel of the tabs.

Added className to the properties copied in the renderTab function
and also pass additional properties down via ...other
---
 src/TabbedArea.js      |  9 +++++----
 test/TabbedAreaSpec.js | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/TabbedArea.js b/src/TabbedArea.js
index 23fb06f584..8618614e98 100644
--- a/src/TabbedArea.js
+++ b/src/TabbedArea.js
@@ -108,12 +108,13 @@ const TabbedArea = React.createClass({
   },
 
   renderTab(child) {
-    let key = child.props.eventKey;
+    let {eventKey, className, tab } = child.props;
     return (
       <NavItem
-        ref={'tab' + key}
-        eventKey={key}>
-        {child.props.tab}
+        ref={'tab' + eventKey}
+        eventKey={eventKey}
+        className={className} >
+        {tab}
       </NavItem>
     );
   },
diff --git a/test/TabbedAreaSpec.js b/test/TabbedAreaSpec.js
index ace6c58b0a..2d4e60e3d1 100644
--- a/test/TabbedAreaSpec.js
+++ b/test/TabbedAreaSpec.js
@@ -182,4 +182,20 @@ describe('TabbedArea', function () {
 
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'nav-pills'));
   });
+
+  it('Should pass className to rendered Tab NavItem', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <TabbedArea activeKey={3}>
+        <TabPane tab="Tab 1" eventKey={1}>Tab 1 content</TabPane>
+        <TabPane className="pull-right" tab="Tab 2" eventKey={3}>Tab 3 content</TabPane>
+      </TabbedArea>
+    );
+
+    let tabPane = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
+
+    assert.equal(tabPane.length, 2);
+    assert.equal(tabPane[1].getDOMNode().getAttribute('class').match(/pull-right/)[0], 'pull-right');
+  });
+
+
 });