Merge pull request react-bootstrap#1368 from egauci/master

[added] react-bootstrap#1320 allow NavItem class to be set
IonicaBizauKitchen · Oct 2, 2015 · 1b2b775 · 1b2b775
2 parents 6b7bf4e + 1e54893
commit 1b2b775
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/Tab.js b/src/Tab.js
@@ -15,7 +15,11 @@ const Tab = React.createClass({
      */
     onAnimateOutEnd: React.PropTypes.func,
     disabled: React.PropTypes.bool,
-    title: React.PropTypes.node
+    title: React.PropTypes.node,
+    /**
+     * tabClassName is used as className for the associated NavItem
+     */
+    tabClassName: React.PropTypes.string
   },
 
   getDefaultProps() {

diff --git a/src/Tabs.js b/src/Tabs.js
@@ -271,7 +271,7 @@ const Tabs = React.createClass({
       return null;
     }
 
-    let { eventKey, title, disabled, onKeyDown, tabIndex = 0 } = child.props;
+    let { eventKey, title, disabled, onKeyDown, tabClassName, tabIndex = 0 } = child.props;
     let isActive = this.getActiveKey() === eventKey;
 
     return (
@@ -282,7 +282,8 @@ const Tabs = React.createClass({
         onKeyDown={createChainedFunction(this.handleKeyDown, onKeyDown)}
         eventKey={eventKey}
         tabIndex={isActive ? tabIndex : -1}
-        disabled={disabled }>
+        disabled={disabled }
+        className={tabClassName}>
         {title}
       </NavItem>
     );

diff --git a/test/TabsSpec.js b/test/TabsSpec.js
@@ -84,13 +84,15 @@ describe('Tabs', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Tabs activeKey={1}>
         <Tab title="Tab 1" className="custom" id="pane0id" eventKey={1}>Tab 1 content</Tab>
-        <Tab title="Tab 2" eventKey={2}>Tab 2 content</Tab>
+        <Tab title="Tab 2" tabClassName="tcustom" eventKey={2}>Tab 2 content</Tab>
       </Tabs>
     );
 
     let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, Tab);
+    let navs = ReactTestUtils.scryRenderedComponentsWithType(instance, NavItem);
 
     assert.ok(React.findDOMNode(panes[0]).className.match(/\bcustom\b/));
+    assert.ok(React.findDOMNode(navs[1]).className.match(/\btcustom\b/));
     assert.equal(React.findDOMNode(panes[0]).id, 'pane0id');
   });