Merge pull request react-bootstrap#1419 from taion/disallow-justified-navbar

[fixed] Explicitly disallow justified Navbar Navs

Author: jquense

src/Nav.js

@@ -1,11 +1,13 @@
-import React, { cloneElement } from 'react';
-import BootstrapMixin from './BootstrapMixin';
-import Collapse from './Collapse';
 import classNames from 'classnames';
+import React, { cloneElement } from 'react';
+import all from 'react-prop-types/lib/all';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
+import BootstrapMixin from './BootstrapMixin';
+import Collapse from './Collapse';
+
 const Nav = React.createClass({
   mixins: [BootstrapMixin],
 
@@ -14,7 +16,17 @@ const Nav = React.createClass({
     activeKey: React.PropTypes.any,
     bsStyle: React.PropTypes.oneOf(['tabs', 'pills']),
     stacked: React.PropTypes.bool,
-    justified: React.PropTypes.bool,
+    /**
+     * Make `NavItem`s equal widths on small or larger displays and stacked
+     * otherwise. Not supported for `Nav`s in `Navbar`s.
+     */
+    justified: all(
+      React.PropTypes.bool,
+      ({justified, navbar}) => (
+        justified && navbar ?
+          Error('justified navbar `Nav`s are not supported') : null
+      )
+    ),
     onSelect: React.PropTypes.func,
     collapsible: React.PropTypes.bool,
     /**

test/NavSpec.js

@@ -5,6 +5,8 @@ import Button from '../src/Button';
 import Nav from '../src/Nav';
 import NavItem from '../src/NavItem';
 
+import {shouldWarn} from './helpers';
+
 describe('Nav', () => {
   it('Should set the correct item active', () => {
     let instance = ReactTestUtils.renderIntoDocument(
@@ -178,6 +180,13 @@ describe('Nav', () => {
     assert.equal(navNode.id, 'nav-id');
   });
 
+  it('Should warn when attempting to use a justified navbar nav', () => {
+    ReactTestUtils.renderIntoDocument(
+      <Nav navbar justified />
+    );
+
+    shouldWarn('justified navbar `Nav`s are not supported');
+  });
 
   describe('Web Accessibility', () => {