Add support for a custom className for active tab

lib/components/Tab.js

@@ -24,6 +24,7 @@ module.exports = React.createClass({
     selected: PropTypes.bool,
     disabled: PropTypes.bool,
     panelId: PropTypes.string,
+    activeTabClassName: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.object,
@@ -49,16 +50,19 @@ module.exports = React.createClass({
   },
 
   render() {
+    const className = cx(
+      'ReactTabs__Tab',
+      this.props.className,
+      {
+        'ReactTabs__Tab--selected': this.props.selected,
+        'ReactTabs__Tab--disabled': this.props.disabled
+      },
+      this.props.activeTabClassName ? this.props.activeTabClassName : ''
+    );
+
     return (
       <li
-        className={cx(
-          'ReactTabs__Tab',
-          this.props.className,
-          {
-            'ReactTabs__Tab--selected': this.props.selected,
-            'ReactTabs__Tab--disabled': this.props.disabled
-          }
-        )}
+        className={className}
         role="tab"
         id={this.props.id}
         aria-selected={this.props.selected ? 'true' : 'false'}

lib/components/TabList.js

@@ -6,13 +6,16 @@ module.exports = React.createClass({
 
   propTypes: {
     className: PropTypes.string,
+    activeTabClassName: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array
     ])
   },
 
   render() {
+    const children = this._renderChildren();
+
     return (
       <ul
         className={cx(
@@ -21,8 +24,27 @@ module.exports = React.createClass({
         )}
         role="tablist"
       >
-        {this.props.children}
+        {children}
       </ul>
     );
+  },
+
+  _renderChildren() {
+    let children;
+    const activeTabClassName = this.props.activeTabClassName;
+
+    if (activeTabClassName) {
+      const childrenProps = {
+        activeTabClassName: activeTabClassName
+      };
+
+      children = React.Children.map(this.props.children, (child) => {
+        return React.cloneElement(child, childrenProps);
+      });
+    } else {
+      children = this.props.children;
+    }
+
+    return children;
   }
 });

lib/components/__tests__/Tab-test.js

@@ -45,4 +45,17 @@ describe('Tab', function() {
 
     equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--disabled');
   });
+
+  it('should support being disabled', function() {
+    const tab = TestUtils.renderIntoDocument(<Tab disabled/>);
+    const node = findDOMNode(tab);
+
+    equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--disabled');
+  });
+
+  it('should have custom className for selected tab', function() {
+    const tabList = TestUtils.renderIntoDocument(<Tab selected="true" activeTabClassName="active" />);
+    const node = findDOMNode(tabList);
+    equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--selected active');
+  });
 });