Close nav drawer and flyout on nav item click

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.6.0`.
+- Changed `EuiNavDrawer` to close on any list item click ([#1770](https://github.com/elastic/eui/pull/1770))
 
 ## [`9.6.0`](https://github.com/elastic/eui/tree/v9.6.0)
 

src/components/list_group/__snapshots__/list_group_item.test.js.snap

@@ -308,19 +308,3 @@ exports[`EuiListGroupItem throws an warning if both iconType and icon are provid
   </span>
 </li>
 `;
-
-exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = `
-<li
-  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
->
-  <a
-    class="euiListGroupItem__button"
-    href="#"
-  >
-    <span
-      class="euiListGroupItem__label"
-      title=""
-    />
-  </a>
-</li>
-`;

src/components/list_group/list_group_item.js

@@ -92,15 +92,11 @@ export const EuiListGroupItem = ({
 
   if (href && !isDisabled) {
     itemContent = (
-      <a href={href} className="euiListGroupItem__button" {...rest}>
+      <a href={href} className="euiListGroupItem__button" onClick={onClick ? onClick : null} {...rest}>
         {iconNode}
         {labelContent}
       </a>
     );
-
-    if (onClick) {
-      console.warn('Both `href` and `onClick` were passed to EuiListGroupItem but only one can exist. The `href` was used.');
-    }
   } else if ((href && isDisabled) || onClick) {
     itemContent = (
       <button
@@ -204,6 +200,9 @@ EuiListGroupItem.propTypes = {
     alwaysShow: PropTypes.bool,
   }),
 
+  /**
+   * Make the list item label a button if no href is provided
+   */
   onClick: PropTypes.func,
 
   /**

src/components/list_group/list_group_item.test.js

@@ -156,18 +156,6 @@ describe('EuiListGroupItem', () => {
       console.warn = oldConsoleError;
     });
 
-    test('if both onClick and href are provided but still renders', () => {
-      const component = render(
-        <EuiListGroupItem label="" onClick={() => {}} href="#" />
-      );
-
-      expect(consoleStub).toBeCalled();
-      expect(consoleStub.mock.calls[0][0]).toMatch(
-        '`href` and `onClick` were passed'
-      );
-      expect(component).toMatchSnapshot();
-    });
-
     test('if both iconType and icon are provided but still renders', () => {
       const component = render(
         <EuiListGroupItem label="" iconType="empty" icon={<span/>} />

src/components/nav_drawer/nav_drawer.js

@@ -191,6 +191,7 @@ export class EuiNavDrawer extends Component {
         const item = React.cloneElement(child, {
           flyoutMenuButtonClick: this.expandFlyout,
           showToolTips: this.state.toolTipsEnabled && showToolTips,
+          drawerItemClick: this.closeBoth,
         });
         return item;
       } else {

src/components/nav_drawer/nav_drawer_group.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { EuiListGroup } from '../list_group/list_group';
 import { toInitials } from '../../services';
 
-export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, ...rest }) => {
+export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, drawerItemClick, ...rest }) => {
   const classes = classNames(
     'euiNavDrawerGroup',
     className
@@ -21,6 +21,9 @@ export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick,
       const items = [...flyoutMenu.listItems];
       const title = `${flyoutMenu.title}`;
       itemProps.onClick = () => flyoutMenuButtonClick(items, title);
+    // If not a flyout, close the nav drawer and flyout on any list item click
+    } else if (drawerItemClick) {
+      itemProps.onClick = () => drawerItemClick();
     }
 
     // Make some declarations of props for the side nav implementation
@@ -61,4 +64,9 @@ EuiNavDrawerGroup.propTypes = {
    * of the flyout menu button click
    */
   flyoutMenuButtonClick: PropTypes.func,
+  /**
+   * For items that don't open flyouts, it is required to pass a function for
+   * handling of the drawer item click to collapse the drawer
+   */
+  drawerItemClick: PropTypes.func,
 };