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