[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

@@ -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>
  );
  },

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');
+ });
+
+
 });