diff --git a/src/components/Tab.js b/src/components/Tab.js
index 314013776d..1bb1392335 100644
--- a/src/components/Tab.js
+++ b/src/components/Tab.js
@@ -23,6 +23,8 @@ module.exports = React.createClass({
id: PropTypes.string,
selected: PropTypes.bool,
disabled: PropTypes.bool,
+ activeTabClassName: PropTypes.string,
+ disabledTabClassName: PropTypes.string,
panelId: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.array,
@@ -37,6 +39,8 @@ module.exports = React.createClass({
selected: false,
id: null,
panelId: null,
+ activeTabClassName: 'ReactTabs__Tab--selected',
+ disabledTabClassName: 'ReactTabs__Tab--disabled',
};
},
@@ -49,7 +53,16 @@ module.exports = React.createClass({
},
render() {
- const { selected, disabled, panelId, className, children, id, ...attributes } = this.props;
+ const {
+ selected,
+ disabled,
+ panelId,
+ activeTabClassName,
+ disabledTabClassName,
+ className,
+ children,
+ id,
+ ...attributes } = this.props;
return (
+ React.cloneElement(child, {
+ activeTabClassName: props.activeTabClassName,
+ disabledTabClassName: props.disabledTabClassName,
+ })
+ );
+}
+
module.exports = React.createClass({
displayName: 'TabList',
propTypes: {
className: PropTypes.string,
+ activeTabClassName: PropTypes.string,
+ disabledTabClassName: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
@@ -13,7 +24,12 @@ module.exports = React.createClass({
},
render() {
- const { className, children, ...attributes } = this.props;
+ const {
+ className,
+ activeTabClassName,
+ disabledTabClassName,
+ children,
+ ...attributes } = this.props;
return (
- {children}
+ {renderChildren({ activeTabClassName, disabledTabClassName, children })}
);
},
diff --git a/src/components/__tests__/TabList-test.js b/src/components/__tests__/TabList-test.js
index 1ec76e67df..178fcfed67 100644
--- a/src/components/__tests__/TabList-test.js
+++ b/src/components/__tests__/TabList-test.js
@@ -1,7 +1,13 @@
/* global jest, describe, it, expect */
import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import Tab from '../Tab';
import TabList from '../TabList';
+import Tabs from '../Tabs';
+
+function hasClassAt(wrapper, index, className) {
+ return wrapper.childAt(index).find('li').hasClass(className);
+}
describe('', () => {
it('should have sane defaults', () => {
@@ -30,4 +36,37 @@ describe('', () => {
expect(wrapper.prop('role')).toBe('tablist');
});
+
+ it('should retain the default classnames for active and disabled tab', () => {
+ const wrapper = mount(
+
+
+ Foo
+ Bar
+
+
+ );
+
+ const tabsList = wrapper.childAt(0);
+ expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(true);
+ expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(true);
+ });
+
+ it('should display the custom classnames for active and disabled tab', () => {
+ const wrapper = mount(
+
+
+ Foo
+ Bar
+
+
+ );
+
+ const tabsList = wrapper.childAt(0);
+ expect(hasClassAt(tabsList, 0, 'ReactTabs__Tab--selected')).toBe(false);
+ expect(hasClassAt(tabsList, 1, 'ReactTabs__Tab--disabled')).toBe(false);
+
+ expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
+ expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
+ });
});