feat(ui-shell): add option for large variation and disabling mouse li…

…steners (#3802) * feat(ui-shell): add alternative behaviours add ability to remove mouse listeners on sidenav * feat(ui-shell): add alternative behaviours add large side nav items
carbon-design-system · Aug 23, 2019 · 16fa92b · 16fa92b
1 parent 3b7e1c0
commit 16fa92b
Show file tree

Hide file tree

Showing 13 changed files with 189 additions and 14 deletions.
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -348,6 +348,10 @@
     color: $ibm-color__gray-100;
   }
 
+  .#{$prefix}--side-nav__item--large {
+    height: mini-units(6);
+  }
+
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > {Menu,Submenu}
   //----------------------------------------------------------------------------
@@ -397,6 +401,12 @@
     transform: rotate(180deg);
   }
 
+  .#{$prefix}--side-nav__item--large {
+    .#{$prefix}--side-nav__submenu {
+      height: mini-units(6);
+    }
+  }
+
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
     background-color: $shell-side-nav-bg-04;
     color: $ibm-color__gray-100;
@@ -484,6 +494,12 @@
       outline $duration--fast-02;
   }
 
+  .#{$prefix}--side-nav__item--large {
+    a.#{$prefix}--side-nav__link {
+      height: mini-units(6);
+    }
+  }
+
   a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
   .#{$prefix}--side-nav
     a.#{$prefix}--header__menu-item[role='menuitem']

diff --git a/packages/react/src/components/UIShell/SideNav.js b/packages/react/src/components/UIShell/SideNav.js
@@ -30,6 +30,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     isFixedNav,
     isRail,
     isPersistent,
+    addMouseListeners,
   } = props;
 
   const { current: controlled } = useRef(expandedProp !== undefined);
@@ -90,17 +91,24 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     });
   }
 
+  const eventHanders = {
+    onFocus: event => handleToggle(event, true),
+    onBlur: event => handleToggle(event, false),
+  };
+
+  if (addMouseListeners) {
+    eventHanders.onMouseEnter = () => handleToggle(true, true);
+    eventHanders.onMouseLeave = () => handleToggle(false, false);
+  }
+
   return (
     <>
       {isFixedNav ? null : <div className={overlayClassName} />}
       <nav
         ref={ref}
         className={`${prefix}--side-nav__navigation ${className}`}
         {...accessibilityLabel}
-        onFocus={event => handleToggle(event, true)}
-        onBlur={event => handleToggle(event, false)}
-        onMouseEnter={() => handleToggle(true, true)}
-        onMouseLeave={() => handleToggle(false, false)}>
+        {...eventHanders}>
         {childrenToRender}
       </nav>
     </>
@@ -119,6 +127,7 @@ SideNav.defaultProps = {
   isChildOfHeader: true,
   isFixedNav: false,
   isPersistent: true,
+  addMouseListeners: true,
 };
 
 SideNav.propTypes = {
@@ -179,6 +188,11 @@ SideNav.propTypes = {
    * Specify if the sideNav will be persistent above the lg breakpoint
    */
   isPersistent: PropTypes.bool,
+
+  /**
+   * Specify whether mouse entry/exit listeners are added. They are by default.
+   */
+  addMouseListeners: PropTypes.bool,
 };
 
 export default SideNav;
diff --git a/packages/react/src/components/UIShell/SideNavItem.js b/packages/react/src/components/UIShell/SideNavItem.js
@@ -12,8 +12,16 @@ import React from 'react';
 
 const { prefix } = settings;
 
-const SideNavItem = ({ className: customClassName, children }) => {
-  const className = cx(`${prefix}--side-nav__item`, customClassName);
+const SideNavItem = ({
+  className: customClassName,
+  children,
+  large = false,
+}) => {
+  const className = cx({
+    [`${prefix}--side-nav__item`]: true,
+    [`${prefix}--side-nav__item--large`]: large,
+    [customClassName]: !!customClassName,
+  });
   return <li className={className}>{children}</li>;
 };
 
@@ -28,6 +36,11 @@ SideNavItem.propTypes = {
    * container
    */
   children: PropTypes.node.isRequired,
+
+  /**
+   * Specify if this is a large variation of the SideNavItem
+   */
+  large: PropTypes.bool,
 };
 
 export default SideNavItem;
diff --git a/packages/react/src/components/UIShell/SideNavLink.js b/packages/react/src/components/UIShell/SideNavLink.js
@@ -21,6 +21,7 @@ const SideNavLink = ({
   children,
   renderIcon: IconElement,
   isActive,
+  large,
   ...rest
 }) => {
   const className = cx({
@@ -30,7 +31,7 @@ const SideNavLink = ({
   });
 
   return (
-    <SideNavItem>
+    <SideNavItem large={large}>
       <Link {...rest} className={className}>
         {IconElement && (
           <SideNavIcon small>
@@ -66,10 +67,16 @@ SideNavLink.propTypes = {
    * keep local state and styling in step with the SideNav expansion state.
    */
   isSideNavExpanded: PropTypes.bool,
+
+  /**
+   * Specify if this is a large variation of the SideNavLink
+   */
+  large: PropTypes.bool,
 };
 
 SideNavLink.defaultProps = {
   element: 'a',
+  large: false,
 };
 
 export const createCustomSideNavLink = element => props => {

diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
@@ -54,11 +54,17 @@ export class SideNavMenu extends React.Component {
      * keep local state and styling in step with the SideNav expansion state.
      */
     isSideNavExpanded: PropTypes.bool,
+
+    /** 
+     * Specify if this is a large variation of the SideNavMenu
+     */
+    large: PropTypes.bool,
   };
 
   static defaultProps = {
     defaultExpanded: false,
     isActive: false,
+    large: false,
   };
 
   static getDerivedStateFromProps = (props, state) => {
@@ -102,6 +108,7 @@ export class SideNavMenu extends React.Component {
       renderIcon: IconElement,
       isActive,
       title,
+      large,
     } = this.props;
     const { isExpanded } = this.state;
 
@@ -127,6 +134,7 @@ export class SideNavMenu extends React.Component {
       [`${prefix}--side-nav__item--active`]:
         isActive || (hasActiveChild && !isExpanded),
       [`${prefix}--side-nav__item--icon`]: IconElement,
+      [`${prefix}--side-nav__item--large`]: large,
       [customClassName]: !!customClassName,
     });
     return (

diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
@@ -775,4 +775,47 @@ storiesOf('UI Shell', module)
         )}
       />
     ))
+  )
+  .add(
+    'SideNav w/ large side nav items',
+    withReadme(readme, () => (
+      <>
+        <SideNav
+          expanded={true}
+          isChildOfHeader={false}
+          aria-label="Side navigation">
+          <SideNavItems>
+            <SideNavMenu title="Large menu" large>
+              <SideNavMenuItem href="javascript:void(0)">
+                Menu 1
+              </SideNavMenuItem>
+              <SideNavMenuItem href="javascript:void(0)">
+                Menu 2
+              </SideNavMenuItem>
+              <SideNavMenuItem href="javascript:void(0)">
+                Menu 3
+              </SideNavMenuItem>
+            </SideNavMenu>
+            <SideNavLink href="javascript:void(0)" large>
+              Large link
+            </SideNavLink>
+            <SideNavMenu renderIcon={Fade16} title="Large menu w/icon" large>
+              <SideNavMenuItem href="javascript:void(0)">
+                Menu 1
+              </SideNavMenuItem>
+              <SideNavMenuItem href="javascript:void(0)">
+                Menu 2
+              </SideNavMenuItem>
+              <SideNavMenuItem href="javascript:void(0)">
+                Menu 3
+              </SideNavMenuItem>
+            </SideNavMenu>
+            <SideNavLink renderIcon={Fade16} href="javascript:void(0)" large>
+              Large link w/icon
+            </SideNavLink>
+          </SideNavItems>
+        </SideNav>
+        <StoryContent />
+      </>
+    ))
   );
diff --git a/packages/react/src/components/UIShell/__tests__/SideNav-test.js b/packages/react/src/components/UIShell/__tests__/SideNav-test.js
@@ -10,7 +10,7 @@ import { mount } from 'enzyme';
 import SideNav from '../SideNav';
 
 describe('SideNav', () => {
-  let mockProps;
+  let mockProps, wrapper;
 
   beforeEach(() => {
     mockProps = {
@@ -19,8 +19,29 @@ describe('SideNav', () => {
     };
   });
 
+  afterEach(() => {
+    wrapper && wrapper.unmount();
+  });
+
   it('should render', () => {
-    const wrapper = mount(<SideNav {...mockProps} />);
+    wrapper = mount(<SideNav {...mockProps} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('by default, all event listeners are added', () => {
+    wrapper = mount(<SideNav {...mockProps} />);
+    expect(wrapper.find('nav').props().onFocus).toBeDefined();
+    expect(wrapper.find('nav').props().onBlur).toBeDefined();
+    expect(wrapper.find('nav').props().onMouseEnter).toBeDefined();
+    expect(wrapper.find('nav').props().onMouseLeave).toBeDefined();
+  });
+
+  it('if addMouseListeners is specified as false, no mouse listener props are added', () => {
+    wrapper = mount(<SideNav {...mockProps} />);
+    wrapper.setProps({ addMouseListeners: false });
+    expect(wrapper.find('nav').props().onFocus).toBeDefined();
+    expect(wrapper.find('nav').props().onBlur).toBeDefined();
+    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
+    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavItem-test.js b/packages/react/src/components/UIShell/__tests__/SideNavItem-test.js
@@ -8,9 +8,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SideNavItem from '../SideNavItem';
+import { settings } from 'carbon-components';
+const { prefix } = settings;
 
 describe('SideNavItem', () => {
-  let mockProps;
+  let mockProps, wrapper;
 
   beforeEach(() => {
     mockProps = {
@@ -19,8 +21,23 @@ describe('SideNavItem', () => {
     };
   });
 
+  afterEach(() => {
+    wrapper && wrapper.unmount();
+  });
+
   it('should render', () => {
-    const wrapper = mount(<SideNavItem {...mockProps} />);
+    wrapper = mount(<SideNavItem {...mockProps} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should include a css class to render the large varient is large prop is set', () => {
+    wrapper = mount(<SideNavItem {...mockProps} />);
+    expect(
+      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
+    ).toBe(false);
+    wrapper.setProps({ large: true });
+    expect(
+      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
+    ).toBe(true);
+  });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavLink-test.js b/packages/react/src/components/UIShell/__tests__/SideNavLink-test.js
@@ -8,9 +8,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import SideNavLink from '../SideNavLink';
+import { settings } from 'carbon-components';
+const { prefix } = settings;
 
 describe('SideNavLink', () => {
-  let mockProps;
+  let mockProps, wrapper;
 
   beforeEach(() => {
     mockProps = {
@@ -21,10 +23,25 @@ describe('SideNavLink', () => {
     };
   });
 
+  afterEach(() => {
+    wrapper && wrapper.unmount();
+  });
+
   it('should render', () => {
     const inactive = mount(<SideNavLink {...mockProps} />);
     expect(inactive).toMatchSnapshot();
     const active = mount(<SideNavLink {...mockProps} isActive />);
     expect(active).toMatchSnapshot();
   });
+
+  it('should include a css class to render the large varient is large prop is set', () => {
+    wrapper = mount(<SideNavLink {...mockProps} />);
+    expect(
+      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
+    ).toBe(false);
+    wrapper.setProps({ large: true });
+    expect(
+      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
+    ).toBe(true);
+  });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js b/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
@@ -83,4 +83,15 @@ describe('SideNavMenu', () => {
       wrapper.find('li').hasClass(`${prefix}--side-nav__item--active`)
     ).toBe(true);
   });
+
+  it('should include a css class to render the large varient is large prop is set', () => {
+    wrapper = mount(<SideNavMenu {...mockProps} />);
+    expect(
+      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
+    ).toBe(false);
+    wrapper.setProps({ large: true });
+    expect(
+      wrapper.find('li').hasClass(`${prefix}--side-nav__item--large`)
+    ).toBe(true);
+  });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`SideNav should render 1`] = `
 <ForwardRef(SideNav)
+  addMouseListeners={true}
   aria-label="Navigation"
   defaultExpanded={false}
   isChildOfHeader={true}