[fixed] Don't render Grid or Row with Tabs

Fixes react-bootstrap#1276

Author: taion

src/Tabs.js

@@ -1,10 +1,9 @@
+import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 
 import Col from './Col';
-import Grid from './Grid';
 import Nav from './Nav';
 import NavItem from './NavItem';
-import Row from './Row';
 import styleMaps from './styleMaps';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -61,14 +60,19 @@ const Tabs = React.createClass({
     paneWidth: React.PropTypes.oneOfType([
       React.PropTypes.number,
       React.PropTypes.object
-    ])
+    ]),
+    /**
+     * Render without clearfix if horizontally positioned
+     */
+    standalone: React.PropTypes.bool
   },
 
   getDefaultProps() {
     return {
       animation: true,
       tabWidth: 2,
-      position: 'top'
+      position: 'top',
+      standalone: false
     };
   },
 
@@ -114,6 +118,7 @@ const Tabs = React.createClass({
       bsStyle,
       tabWidth,
       paneWidth,
+      standalone,
       children,
       ...props
     } = this.props;
@@ -144,6 +149,11 @@ const Tabs = React.createClass({
     const childPanes = ValidComponentChildren.map(children, this.renderPane);
 
     if (isHorizontal) {
+      if (!standalone) {
+        containerProps.className =
+          classNames(containerProps.className, 'clearfix');
+      }
+
       const {tabsColProps, panesColProps} =
         this.getColProps({tabWidth, paneWidth});
 
@@ -158,28 +168,21 @@ const Tabs = React.createClass({
         </Col>
       );
 
-      let body;
       if (position === 'left') {
-        body = (
-          <Row {...containerProps}>
+        return (
+          <div {...containerProps}>
             {tabs}
             {panes}
-          </Row>
+          </div>
         );
       } else {
-        body = (
-          <Row {...containerProps}>
+        return (
+          <div {...containerProps}>
             {panes}
             {tabs}
-          </Row>
+          </div>
         );
       }
-
-      return (
-        <Grid>
-          {body}
-        </Grid>
-      );
     } else {
       return (
         <div {...containerProps}>

test/TabsSpec.js

@@ -2,10 +2,8 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 
 import Col from '../src/Col';
-import Grid from '../src/Grid';
 import Nav from '../src/Nav';
 import NavItem from '../src/NavItem';
-import Row from '../src/Row';
 import Tab from '../src/Tab';
 import Tabs from '../src/Tabs';
 
@@ -263,18 +261,10 @@ describe('Tabs', function () {
     });
 
     it('doesn\'t render grid elements', function () {
-      const grids = ReactTestUtils.scryRenderedComponentsWithType(
-        instance, Grid
-      );
-      const rows = ReactTestUtils.scryRenderedComponentsWithType(
-        instance, Row
-      );
       const cols = ReactTestUtils.scryRenderedComponentsWithType(
         instance, Col
       );
 
-      expect(grids).to.be.empty;
-      expect(rows).to.be.empty;
       expect(cols).to.be.empty;
     });
   });
@@ -308,20 +298,16 @@ describe('Tabs', function () {
       });
 
       it('renders grid elements', function () {
-        const grids = ReactTestUtils.scryRenderedComponentsWithType(
-          instance, Grid
-        );
-        const rows = ReactTestUtils.scryRenderedComponentsWithType(
-          instance, Row
-        );
         const cols = ReactTestUtils.scryRenderedComponentsWithType(
           instance, Col
         );
 
-        expect(grids).to.have.length(1);
-        expect(rows).to.have.length(1);
         expect(cols).to.have.length(2);
       });
+
+      it('should render with clearfix', function() {
+        expect(React.findDOMNode(instance).className).to.match(/\bclearfix\b/);
+      });
     });
 
     describe('when only tabWidth is provided', function() {
@@ -385,6 +371,23 @@ describe('Tabs', function () {
           .to.match(/\bcol-xs-7\b/).and.to.match(/\bcol-md-8\b/);
       });
     });
+
+    describe('when standalone', function() {
+      let instance;
+
+      beforeEach(function () {
+        instance = ReactTestUtils.renderIntoDocument(
+          <Tabs defaultActiveKey={1} position="left" standalone>
+            <Tab title="A Tab" eventKey={1}>Tab content</Tab>
+          </Tabs>
+        );
+      });
+
+      it('should not render with clearfix', function() {
+        expect(React.findDOMNode(instance).className)
+          .to.not.match(/\bclearfix\b/);
+      });
+    });
   });
 
   describe('animation', function () {