From 83fb208249a83b1f01374fe12321a32b3ca0f2f6 Mon Sep 17 00:00:00 2001
From: Andrey Kalashnikov <andreyak2323@gmail.com>
Date: Fri, 1 Apr 2016 00:19:17 +0300
Subject: [PATCH] Add support for a custom className for active tab

---
 lib/components/Tab.js                | 20 ++++++++++++--------
 lib/components/TabList.js            | 24 +++++++++++++++++++++++-
 lib/components/__tests__/Tab-test.js | 13 +++++++++++++
 3 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/lib/components/Tab.js b/lib/components/Tab.js
index 51090143ed..0eed25a59a 100644
--- a/lib/components/Tab.js
+++ b/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'}
diff --git a/lib/components/TabList.js b/lib/components/TabList.js
index 2f98267b11..1db71857d1 100644
--- a/lib/components/TabList.js
+++ b/lib/components/TabList.js
@@ -6,6 +6,7 @@ module.exports = React.createClass({
 
   propTypes: {
     className: PropTypes.string,
+    activeTabClassName: PropTypes.string,
     children: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.array
@@ -13,6 +14,8 @@ module.exports = React.createClass({
   },
 
   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;
   }
 });
diff --git a/lib/components/__tests__/Tab-test.js b/lib/components/__tests__/Tab-test.js
index 5127ab324e..6b11d52f8d 100644
--- a/lib/components/__tests__/Tab-test.js
+++ b/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');
+  });
 });