diff --git a/src/components/Tabs.js b/src/components/Tabs.js index 1076c0364a..07dca722c3 100644 --- a/src/components/Tabs.js +++ b/src/components/Tabs.js @@ -13,6 +13,7 @@ const MODE_UNCONTROLLED = 1; export default class Tabs extends Component { static defaultProps = { + usePanel: true, defaultFocus: false, forceRenderTabPanel: false, selectedIndex: null, @@ -23,6 +24,7 @@ export default class Tabs extends Component { static propTypes = { children: childrenPropType, + usePanel: PropTypes.bool, direction: PropTypes.oneOf(['rtl', 'ltr']), className: PropTypes.oneOfType([ PropTypes.string, diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js index 4933a1f53f..7aa3012ebb 100644 --- a/src/components/UncontrolledTabs.js +++ b/src/components/UncontrolledTabs.js @@ -43,12 +43,14 @@ function determineCanUseActiveElement(environment) { } export default class UncontrolledTabs extends Component { static defaultProps = { + usePanel: true, className: 'react-tabs', focus: false, }; static propTypes = { children: childrenPropType, + usePanel: PropTypes.bool, direction: PropTypes.oneOf(['rtl', 'ltr']), className: PropTypes.oneOfType([ PropTypes.string, @@ -359,6 +361,7 @@ export default class UncontrolledTabs extends Component { // Delete all known props, so they don't get added to DOM const { children, // unused + usePanel, className, disabledTabClassName, // unused domRef, diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js index 66e86f726d..4fe22d1730 100644 --- a/src/components/__tests__/Tabs-test.js +++ b/src/components/__tests__/Tabs-test.js @@ -392,6 +392,17 @@ describe('', () => { , ); }); + + it('should support using without panels', () => { + expectToMatchSnapshot( + + + Foo + Bar + + , + ); + }); }); test('should pass through custom properties', () => { diff --git a/src/components/__tests__/__snapshots__/Tabs-test.js.snap b/src/components/__tests__/__snapshots__/Tabs-test.js.snap index 6f93146c3b..6c7efc6715 100644 --- a/src/components/__tests__/__snapshots__/Tabs-test.js.snap +++ b/src/components/__tests__/__snapshots__/Tabs-test.js.snap @@ -975,3 +975,37 @@ exports[` validation should result with warning when tab outside of tabl exports[` validation should result with warning when tabs/panels are imbalanced 1`] = `"Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in \`Tabs\`. Received 1 'Tab' and 0 'TabPanel'."`; exports[` validation should result with warning when tabs/panels are imbalanced and it should ignore non tab children 1`] = `"Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in \`Tabs\`. Received 1 'Tab' and 2 'TabPanel'."`; + +exports[` validation should support using without panels 1`] = ` +
+
    + + +
+
+`; diff --git a/src/helpers/propTypes.js b/src/helpers/propTypes.js index 72144e6f39..447494ea25 100644 --- a/src/helpers/propTypes.js +++ b/src/helpers/propTypes.js @@ -8,7 +8,6 @@ export function childrenPropType(props, propName, componentName) { let tabListFound = false; const listTabs = []; const children = props[propName]; - deepForEach(children, (child) => { if (isTabList(child)) { if ( @@ -41,7 +40,7 @@ export function childrenPropType(props, propName, componentName) { } }); - if (!error && tabsCount !== panelsCount) { + if (!error && props.usePanel && tabsCount !== panelsCount) { error = new Error( `There should be an equal number of 'Tab' and 'TabPanel' in \`${componentName}\`. ` + `Received ${tabsCount} 'Tab' and ${panelsCount} 'TabPanel'.`,