feat(NavExpandable): allow option to pass an icon

Author: logonoff

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

@@ -30,6 +30,8 @@ export interface NavExpandableProps
   onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
   /** Additional props added to the NavExpandable <button> */
   buttonProps?: any;
+  /** Icon added before the nav item children. */
+  icon?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
 }
@@ -84,6 +86,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
 
   render() {
     const {
+      icon,
       title,
       srText,
       children,
@@ -132,11 +135,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                         tabIndex={isSidebarOpen ? null : -1}
                         {...buttonProps}
                       >
-                        {typeof title !== 'string' ? (
-                          <span className={css(`${styles.nav}__link-text`)}>{title}</span>
-                        ) : (
-                          title
-                        )}
+                        {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
+                        {typeof title !== 'string' ? <span className={css(styles.navLinkText)}>{title}</span> : title}
                         <span className={css(styles.navToggle)}>
                           <span className={css(styles.navToggleIcon)}>
                             <RhMicronsCaretDownIcon />

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

@@ -13,3 +13,20 @@ test('Does not render with the inert attribute when isExpanded is true', () => {
 
   expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
 });
+
+test('Renders icon wrapped in nav link icon class when icon prop is provided', () => {
+  render(
+    <NavExpandable id="grp-1" title="NavExpandable" icon={<span data-testid="test-icon">Icon</span>}></NavExpandable>
+  );
+
+  const icon = screen.getByTestId('test-icon');
+  expect(icon).toBeInTheDocument();
+  expect(icon.parentElement).toHaveClass('pf-v6-c-nav__link-icon');
+});
+
+test('Does not render nav link icon wrapper when icon prop is not provided', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-icon')).not.toBeInTheDocument();
+});

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

@@ -12,6 +12,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
@@ -75,7 +76,7 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
-### With item icons
+### With icons
 
 ```ts file="./NavIcons.tsx"
 

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

@@ -1,8 +1,9 @@
 import { useState } from 'react';
-import { Nav, NavItem, NavList } from '@patternfly/react-core';
+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';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
@@ -55,6 +56,26 @@ export const NavIcons: React.FunctionComponent = () => {
         >
           Link 4
         </NavItem>
+        <NavExpandable title="Expandable" icon={<FolderOpenIcon />} groupId="nav-icon-expandable">
+          <NavItem
+            preventDefault
+            id="nav-icon-expandable-link1"
+            to="#nav-icon-expandable-link1"
+            itemId={4}
+            isActive={activeItem === 4}
+          >
+            Subnav link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="nav-icon-expandable-link2"
+            to="#nav-icon-expandable-link2"
+            itemId={5}
+            isActive={activeItem === 5}
+          >
+            Subnav link 2
+          </NavItem>
+        </NavExpandable>
       </NavList>
     </Nav>
   );