[fixes] react-bootstrap#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

Author: thehuey

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