diff --git a/src/Tabs.js b/src/Tabs.js index 72345f716e..edd6c56862 100644 --- a/src/Tabs.js +++ b/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({ ); - let body; if (position === 'left') { - body = ( - + return ( +
{tabs} {panes} - +
); } else { - body = ( - + return ( +
{panes} {tabs} - +
); } - - return ( - - {body} - - ); } else { return (
diff --git a/test/TabsSpec.js b/test/TabsSpec.js index 5745fb9bdc..4cade1a2ca 100644 --- a/test/TabsSpec.js +++ b/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( + + Tab content + + ); + }); + + it('should not render with clearfix', function() { + expect(React.findDOMNode(instance).className) + .to.not.match(/\bclearfix\b/); + }); + }); }); describe('animation', function () {