fix(Navbar): remove default toggleable class (#285)

eddywashere · web-flow · commit 19b32cda62c5 · 2017-01-10T20:14:24.000-08:00
BREAKING CHANGE:

- Navbar no longer applies a default `.navbar-toggleable` class, as it
is not required for all Navbar configurations.
diff --git a/docs/lib/Components/NavbarPage.js b/docs/lib/Components/NavbarPage.js
@@ -33,7 +33,7 @@ export default class NavsPage extends React.Component {
   fixed: PropTypes.string,
   color: PropTypes.string,
   role: PropTypes.string,
-  toggleable: PropTypes.string,
+  toggleable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   // pass in custom element to use
 }`}
diff --git a/src/Navbar.js b/src/Navbar.js
@@ -12,13 +12,23 @@ const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  toggleable: PropTypes.string,
+  toggleable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 };
 
 const defaultProps = {
   tag: 'nav',
   role: 'navigation',
-  toggleable: '',
+  toggleable: false,
+};
+
+const getToggleableClass = (toggleable) => {
+  if (toggleable === false) {
+    return false;
+  } else if (toggleable === true || toggleable === 'xs') {
+    return 'navbar-toggleable';
+  }
+
+  return `navbar-toggleable-${toggleable}`;
 };
 
 const Navbar = (props) => {
@@ -38,7 +48,7 @@ const Navbar = (props) => {
   const classes = mapToCssModules(classNames(
     className,
     'navbar',
-    toggleable === '' ? 'navbar-toggleable' : `navbar-toggleable-${toggleable}`,
+    getToggleableClass(toggleable),
     {
       'navbar-light': light,
       'navbar-inverse': inverse,
diff --git a/src/__tests__/Navbar.spec.js b/src/__tests__/Navbar.spec.js
@@ -6,19 +6,31 @@ describe('Navbar', () => {
   it('should render .navbar markup', () => {
     const wrapper = shallow(<Navbar />);
 
+    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar"></nav>');
+  });
+
+  it('should render default .navbar-toggleable class', () => {
+    const wrapper = shallow(<Navbar toggleable />);
+
     expect(wrapper.html()).toBe('<nav role="navigation" class="navbar navbar-toggleable"></nav>');
   });
 
+  it('should render size based .navbar-toggleable-* classes', () => {
+    const wrapper = shallow(<Navbar toggleable="md" />);
+
+    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar navbar-toggleable-md"></nav>');
+  });
+
   it('should render custom tag', () => {
     const wrapper = shallow(<Navbar tag="div" />);
 
-    expect(wrapper.html()).toBe('<div role="navigation" class="navbar navbar-toggleable"></div>');
+    expect(wrapper.html()).toBe('<div role="navigation" class="navbar"></div>');
   });
 
   it('sholid render children', () => {
     const wrapper = shallow(<Navbar>Children</Navbar>);
 
-    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar navbar-toggleable">Children</nav>');
+    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar">Children</nav>');
   });
 
   it('should pass additional classNames', () => {
