feat(Nav): add icon prop to NavExpandable

Align expandable nav sections with NavItem by supporting an optional leading icon.

Assisted-by: Cursor

Author: rebeccaalpert

packages/react-core/src/components/Nav/NavExpandable.tsx

@@ -12,6 +12,8 @@ export interface NavExpandableProps
   extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
   /** Title content shown for the expandable list */
   title: React.ReactNode;
+  /** Icon added before the nav expandable children. */
+  icon?: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */
   srText?: string;
   /** Boolean to pragmatically expand or collapse section */
@@ -85,6 +87,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
   render() {
     const {
       title,
+      icon,
       srText,
       children,
       className,
@@ -132,6 +135,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                         tabIndex={isSidebarOpen ? null : -1}
                         {...buttonProps}
                       >
+                        {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
                         {typeof title !== 'string' ? (
                           <span className={css(`${styles.nav}__link-text`)}>{title}</span>
                         ) : (

packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { NavExpandable } from '../NavExpandable';
 
 test('Renders with the inert attribute by default', () => {
@@ -13,3 +14,18 @@ test('Does not render with the inert attribute when isExpanded is true', () => {
 
   expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
 });
+
+test('Renders icon with navLinkIcon class', () => {
+  render(
+    <NavExpandable id="grp-1" title="NavExpandable" icon={<div data-testid="nav-expandable-icon">Icon content</div>} />
+  );
+
+  expect(screen.getByTestId('nav-expandable-icon').parentElement).toHaveClass(styles.navLinkIcon);
+});
+
+test('Does not render icon wrapper when icon is not provided', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" />);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector(`.${styles.navLinkIcon}`)).toBeNull();
+});

packages/react-core/src/components/Nav/examples/Nav.md

@@ -81,6 +81,12 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
+### Expandable with icons
+
+```ts file="./NavExpandableIcons.tsx"
+
+```
+
 
 ## Types
 

packages/react-core/src/components/Nav/examples/NavExpandableIcons.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+
+export const NavExpandableIcons: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = useState('nav-expandable-icon-group-1');
+  const [activeItem, setActiveItem] = useState('nav-expandable-icon-group-1_item-1');
+
+  const onSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    result: { itemId: number | string; groupId: number | string }
+  ) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const onToggle = (
+    _event: React.MouseEvent<HTMLButtonElement>,
+    result: { groupId: number | string; isExpanded: boolean }
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  return (
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable with icons global">
+      <NavList>
+        <NavExpandable
+          title="Expandable Group 1"
+          icon={<CubeIcon />}
+          groupId="nav-expandable-icon-group-1"
+          isActive={activeGroup === 'nav-expandable-icon-group-1'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable-icon-1"
+            to="#expandable-icon-1"
+            groupId="nav-expandable-icon-group-1"
+            itemId="nav-expandable-icon-group-1_item-1"
+            isActive={activeItem === 'nav-expandable-icon-group-1_item-1'}
+          >
+            Subnav 1 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-icon-2"
+            to="#expandable-icon-2"
+            groupId="nav-expandable-icon-group-1"
+            itemId="nav-expandable-icon-group-1_item-2"
+            isActive={activeItem === 'nav-expandable-icon-group-1_item-2'}
+          >
+            Subnav 1 Link 2
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable Group 2"
+          icon={<FolderIcon />}
+          groupId="nav-expandable-icon-group-2"
+          isActive={activeGroup === 'nav-expandable-icon-group-2'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable-icon-3"
+            to="#expandable-icon-3"
+            groupId="nav-expandable-icon-group-2"
+            itemId="nav-expandable-icon-group-2_item-1"
+            isActive={activeItem === 'nav-expandable-icon-group-2_item-1'}
+          >
+            Subnav 2 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-icon-4"
+            to="#expandable-icon-4"
+            groupId="nav-expandable-icon-group-2"
+            itemId="nav-expandable-icon-group-2_item-2"
+            isActive={activeItem === 'nav-expandable-icon-group-2_item-2'}
+          >
+            Subnav 2 Link 2
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};