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 (
- {this.props.children}
+ {children}
);
+ },
+
+ _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();
+ 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();
+ const node = findDOMNode(tabList);
+ equal(node.className, 'ReactTabs__Tab ReactTabs__Tab--selected active');
+ });
});