feat(Nav): Added default nav tiem wrapper. Added support for nav item icons

Author: tlabaj

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

@@ -17,7 +17,7 @@ propComponents:
 
 import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import Icon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';

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

@@ -36,12 +36,12 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   onShowFlyout?: () => void;
   /** z-index of the flyout nav item */
   zIndex?: number;
+  /** Icon added before the nav item children. */
+  icon?: React.ReactNode;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
-  /** Adds a wrapper around the nav link text. Improves the layout when the text is a react node. */
-  hasNavLinkWrapper?: boolean;
 }
 
 export const NavItem: React.FunctionComponent<NavItemProps> = ({
@@ -60,7 +60,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaId,
   ouiaSafe,
   zIndex = 9999,
-  hasNavLinkWrapper,
+  icon,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
@@ -193,8 +193,8 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
-        {hasNavLinkWrapper ? <span className={css(`${styles.nav}__link-text`)}>{children}</span> : children}
-        {flyout && flyoutButton}
+        {icon && <span className={css(`${styles.nav}__link-icon`)}>{icon}</span>}
+        <span className={css(`${styles.nav}__link-text`)}>{children}</span>
       </Component>
     );
   };

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

@@ -2,13 +2,16 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { Nav, NavContext } from '../Nav';
 import { NavList } from '../NavList';
 import { NavGroup } from '../NavGroup';
 import { NavItem } from '../NavItem';
 import { NavExpandable } from '../NavExpandable';
 
+import styles from '@patternfly/react-styles/css/components/Nav/nav';
+
 const props = {
   items: [
     { to: '#link1', label: 'Link 1' },
@@ -242,4 +245,19 @@ describe('Nav', () => {
     await user.hover(screen.getByText('My custom node'));
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Nav with icon', () => {
+    renderNav(
+      <Nav>
+        <NavList className="test-nav-icon">
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to} icon={<span>this is an icon</span>} className="test-nav-item-class">
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getAllByText('this is an icon')[0].parentElement).toHaveClass(`${styles.nav}__link-icon`);
+  });
 });