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..0b1fb3c15e 100644
--- a/src/components/UncontrolledTabs.js
+++ b/src/components/UncontrolledTabs.js
@@ -49,6 +49,7 @@ export default class UncontrolledTabs extends Component {
static propTypes = {
children: childrenPropType,
+ usePanel: PropTypes.bool,
direction: PropTypes.oneOf(['rtl', 'ltr']),
className: PropTypes.oneOfType([
PropTypes.string,
@@ -359,6 +360,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'.`,