feat(ui-shell): add alternative behaviours (carbon-design-system#3990)

Add the option to remove onFocus/onBlur from SideNav

Author: matthew-chirgwin

packages/react/src/components/UIShell/SideNav.js

@@ -30,6 +30,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     isFixedNav,
     isRail,
     isPersistent,
+    addFocusListeners,
     addMouseListeners,
   } = props;
 
@@ -91,14 +92,16 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
     });
   }
 
-  const eventHanders = {
-    onFocus: event => handleToggle(event, true),
-    onBlur: event => handleToggle(event, false),
-  };
+  let eventHandlers = {};
+
+  if (addFocusListeners) {
+    eventHandlers.onFocus = event => handleToggle(event, true);
+    eventHandlers.onBlur = event => handleToggle(event, false);
+  }
 
   if (addMouseListeners) {
-    eventHanders.onMouseEnter = () => handleToggle(true, true);
-    eventHanders.onMouseLeave = () => handleToggle(false, false);
+    eventHandlers.onMouseEnter = () => handleToggle(true, true);
+    eventHandlers.onMouseLeave = () => handleToggle(false, false);
   }
 
   return (
@@ -108,7 +111,7 @@ const SideNav = React.forwardRef(function SideNav(props, ref) {
         ref={ref}
         className={`${prefix}--side-nav__navigation ${className}`}
         {...accessibilityLabel}
-        {...eventHanders}>
+        {...eventHandlers}>
         {childrenToRender}
       </nav>
     </>
@@ -127,6 +130,7 @@ SideNav.defaultProps = {
   isChildOfHeader: true,
   isFixedNav: false,
   isPersistent: true,
+  addFocusListeners: true,
   addMouseListeners: true,
 };
 
@@ -189,6 +193,11 @@ SideNav.propTypes = {
    */
   isPersistent: PropTypes.bool,
 
+  /**
+   * Specify whether focus and blur listeners are added. They are by default.
+   */
+  addFocusListeners: PropTypes.bool,
+
   /**
    * Specify whether mouse entry/exit listeners are added. They are by default.
    */

packages/react/src/components/UIShell/__tests__/SideNav-test.js

@@ -36,6 +36,15 @@ describe('SideNav', () => {
     expect(wrapper.find('nav').props().onMouseLeave).toBeDefined();
   });
 
+  it('if addFocusListeners is specified as false, no focus event listeners props are added', () => {
+    wrapper = mount(<SideNav {...mockProps} />);
+    wrapper.setProps({ addFocusListeners: false });
+    expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
+    expect(wrapper.find('nav').props().onBlur).not.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 });
@@ -44,4 +53,13 @@ describe('SideNav', () => {
     expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
     expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
   });
+
+  it('if both addFocusListeners and addMouseListeners are specified as false, no mouse or focus listener props are added', () => {
+    wrapper = mount(<SideNav {...mockProps} />);
+    wrapper.setProps({ addFocusListeners: false, addMouseListeners: false });
+    expect(wrapper.find('nav').props().onFocus).not.toBeDefined();
+    expect(wrapper.find('nav').props().onBlur).not.toBeDefined();
+    expect(wrapper.find('nav').props().onMouseEnter).not.toBeDefined();
+    expect(wrapper.find('nav').props().onMouseLeave).not.toBeDefined();
+  });
 });

packages/react/src/components/UIShell/__tests__/__snapshots__/SideNav-test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`SideNav should render 1`] = `
 <ForwardRef(SideNav)
+  addFocusListeners={true}
   addMouseListeners={true}
   aria-label="Navigation"
   defaultExpanded={false}