add usePanel prop for tabs component

- With this commit, tabs can be used without panels.
- If usePanel is given false, the error that occurs when there are no panels is not printed in console.
- usePanel default value is true.
- this commit does not cause any breaking change

reactjs#329

Author: Ozan Turhan

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,

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,

src/components/__tests__/Tabs-test.js

@@ -392,6 +392,17 @@ describe('<Tabs />', () => {
         </Tabs>,
       );
     });
+
+    it('should support using without panels', () => {
+      expectToMatchSnapshot(
+        <Tabs usePanel={false}>
+          <TabList>
+            <Tab>Foo</Tab>
+            <Tab>Bar</Tab>
+          </TabList>
+        </Tabs>,
+      );
+    });
   });
 
   test('should pass through custom properties', () => {

src/components/__tests__/__snapshots__/Tabs-test.js.snap

@@ -975,3 +975,37 @@ exports[`<Tabs /> validation should result with warning when tab outside of tabl
 exports[`<Tabs /> 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[`<Tabs /> 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[`<Tabs /> validation should support using without panels 1`] = `
+<div
+  class="react-tabs"
+  data-tabs="true"
+>
+  <ul
+    class="react-tabs__tab-list"
+    role="tablist"
+  >
+    <li
+      aria-controls="react-tabs-1"
+      aria-disabled="false"
+      aria-selected="true"
+      class="react-tabs__tab react-tabs__tab--selected"
+      id="react-tabs-0"
+      role="tab"
+      tabindex="0"
+    >
+      Foo
+    </li>
+    <li
+      aria-controls="react-tabs-3"
+      aria-disabled="false"
+      aria-selected="false"
+      class="react-tabs__tab"
+      id="react-tabs-2"
+      role="tab"
+    >
+      Bar
+    </li>
+  </ul>
+</div>
+`;

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'.`,