fix(Navbar): better backwards compatibility

TheSharpieOne · TheSharpieOne · commit aefbdd737926 · 2017-09-20T11:08:17.000-04:00
diff --git a/src/Navbar.js b/src/Navbar.js
@@ -15,30 +15,48 @@ const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  toggleable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  expandable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  toggleable: deprecated(PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 'Please use the prop "expand"'),
+  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 };
 
 const defaultProps = {
   tag: 'nav',
-  toggleable: false,
-  expandable: false,
+  expand: false,
+};
+
+const getExpandClass = (expand) => {
+  if (expand === false) {
+    return false;
+  } else if (expand === true || expand === 'xs') {
+    return 'navbar-expand';
+  }
+
+  return `navbar-expand-${expand}`;
+};
+
+// To better maintain backwards compatibility while toggleable is deprecated.
+// We must map breakpoints to the next breakpoint so that toggleable and expand do the same things at the same breakpoint.
+const toggleableToExpand = {
+  xs: 'sm',
+  sm: 'md',
+  md: 'lg',
+  lg: 'xl',
 };
 
 const getToggleableClass = (toggleable) => {
-  if (toggleable === false) {
+  if (toggleable === undefined || toggleable === 'xl') {
     return false;
-  } else if (toggleable === true || toggleable === 'xs') {
+  } else if (toggleable === false) {
     return 'navbar-expand';
   }
 
-  return `navbar-expand-${toggleable}`;
+  return `navbar-expand-${toggleable === true ? 'sm' : (toggleableToExpand[toggleable] || toggleable)}`;
 };
 
 const Navbar = (props) => {
   const {
     toggleable,
-    expandable,
+    expand,
     className,
     cssModule,
     light,
@@ -54,7 +72,7 @@ const Navbar = (props) => {
   const classes = mapToCssModules(classNames(
     className,
     'navbar',
-    getToggleableClass(toggleable || expandable),
+    getExpandClass(expand) || getToggleableClass(toggleable),
     {
       'navbar-light': light,
       'navbar-dark': inverse || dark,
diff --git a/src/__tests__/Navbar.spec.js b/src/__tests__/Navbar.spec.js
@@ -9,18 +9,36 @@ describe('Navbar', () => {
     expect(wrapper.html()).toBe('<nav class="navbar"></nav>');
   });
 
-  it('should render default .navbar-toggleable class', () => {
-    const wrapper = shallow(<Navbar toggleable />);
+  it('should render default .navbar-expand class', () => {
+    const wrapper = shallow(<Navbar expand />);
 
     expect(wrapper.html()).toBe('<nav class="navbar navbar-expand"></nav>');
   });
 
-  it('should render size based .navbar-toggleable-* classes', () => {
-    const wrapper = shallow(<Navbar toggleable="md" />);
+  it('should render size based .navbar-expand-* classes', () => {
+    const wrapper = shallow(<Navbar expand="md" />);
 
     expect(wrapper.html()).toBe('<nav class="navbar navbar-expand-md"></nav>');
   });
 
+  it('should render default .navbar-expand class for toggleable false [DEPRECATED]', () => {
+    const wrapper = shallow(<Navbar toggleable={false} />);
+
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand"></nav>');
+  });
+
+  it('should render default .navbar-expand class for toggleable true [DEPRECATED]', () => {
+    const wrapper = shallow(<Navbar toggleable />);
+
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand-sm"></nav>');
+  });
+
+  it('should render size based .navbar-expand-* classes for toggleable (bumping breakpoint) [DEPRECATED]', () => {
+    const wrapper = shallow(<Navbar toggleable="md" />);
+
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand-lg"></nav>');
+  });
+
   it('should render custom tag', () => {
     const wrapper = shallow(<Navbar tag="div" />);
 
@@ -47,7 +65,7 @@ describe('Navbar', () => {
   });
 
   it('should render prop based classes', () => {
-    const wrapper = shallow(<Navbar light dark toggleable="sm" color="success" full sticky="top" fixed="top" />);
+    const wrapper = shallow(<Navbar light dark expand="sm" color="success" full sticky="top" fixed="top" />);
 
     expect(wrapper.hasClass('bg-success')).toBe(true);
     expect(wrapper.hasClass('navbar')).toBe(true);
