@patternfly/react-core 6.0.0-alpha.80 → 6.0.0-alpha.81

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.79",
+  "version": "6.0.0-alpha.80",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.79",
+  "version": "6.0.0-alpha.80",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.79",
+  "version": "6.0.0-alpha.80",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.80",
+  "version": "6.0.0-alpha.81",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b5ff689e492d13a4bda9794faf7015dd7b976d6a"
+  "gitHead": "253f669646aace1f1264ba6f7e11b218fb48f240"
 }

package/src/components/Dropdown/Dropdown.tsx

@@ -69,6 +69,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   menuHeight?: string;
   /** Maximum height of dropdown menu */
   maxMenuHeight?: string;
+  /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
+  shouldFocusFirstItemOnOpen?: boolean;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -89,6 +91,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChangeKeys = ['Escape', 'Tab'],
   menuHeight,
   maxMenuHeight,
+  shouldFocusFirstItemOnOpen = true,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -118,7 +121,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
 
     const handleClick = (event: MouseEvent) => {
       // toggle was opened, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
+      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'

package/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,7 +193,8 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
-        {hasNavLinkWrapper ? <span className={css(`${styles.nav}__link-text`)}>{children}</span> : children}
+        {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
+        <span className={css(`${styles.nav}__link-text`)}>{children}</span>
         {flyout && flyoutButton}
       </Component>
     );

package/src/components/Nav/__tests__/Nav.test.tsx

@@ -2,6 +2,7 @@ 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';
@@ -9,6 +10,8 @@ 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.navLinkIcon);
+  });
 });

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -23,7 +23,11 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
           class="pf-v6-c-nav__link"
           href="#link1"
         >
-          Link 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 1
+          </span>
         </a>
       </li>
       <li
@@ -36,7 +40,11 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
           class="pf-v6-c-nav__link"
           href="#link2"
         >
-          Link 2
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 2
+          </span>
         </a>
       </li>
       <li
@@ -49,7 +57,11 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
           class="pf-v6-c-nav__link"
           href="#link3"
         >
-          Link 3
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 3
+          </span>
         </a>
       </li>
       <li
@@ -62,7 +74,11 @@ exports[`Nav Default Nav List - Trigger item active update 1`] = `
           class="pf-v6-c-nav__link"
           href="#link4"
         >
-          Link 4
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 4
+          </span>
         </a>
       </li>
     </ul>
@@ -93,7 +109,11 @@ exports[`Nav Default Nav List 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link1"
         >
-          Link 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 1
+          </span>
         </a>
       </li>
       <li
@@ -106,7 +126,11 @@ exports[`Nav Default Nav List 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link2"
         >
-          Link 2
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 2
+          </span>
         </a>
       </li>
       <li
@@ -119,7 +143,11 @@ exports[`Nav Default Nav List 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link3"
         >
-          Link 3
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 3
+          </span>
         </a>
       </li>
       <li
@@ -132,7 +160,11 @@ exports[`Nav Default Nav List 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link4"
         >
-          Link 4
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 4
+          </span>
         </a>
       </li>
     </ul>
@@ -206,7 +238,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link1"
               >
-                Link 1
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 1
+                </span>
               </a>
             </li>
             <li
@@ -219,7 +255,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link2"
               >
-                Link 2
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 2
+                </span>
               </a>
             </li>
             <li
@@ -232,7 +272,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link3"
               >
-                Link 3
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 3
+                </span>
               </a>
             </li>
             <li
@@ -245,7 +289,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link4"
               >
-                Link 4
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 4
+                </span>
               </a>
             </li>
           </ul>
@@ -322,7 +370,11 @@ exports[`Nav Expandable Nav List 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link1"
               >
-                Link 1
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 1
+                </span>
               </a>
             </li>
             <li
@@ -335,7 +387,11 @@ exports[`Nav Expandable Nav List 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link2"
               >
-                Link 2
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 2
+                </span>
               </a>
             </li>
             <li
@@ -348,7 +404,11 @@ exports[`Nav Expandable Nav List 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link3"
               >
-                Link 3
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 3
+                </span>
               </a>
             </li>
             <li
@@ -361,7 +421,11 @@ exports[`Nav Expandable Nav List 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link4"
               >
-                Link 4
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 4
+                </span>
               </a>
             </li>
           </ul>
@@ -443,7 +507,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link1"
               >
-                Link 1
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 1
+                </span>
               </a>
             </li>
             <li
@@ -456,7 +524,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link2"
               >
-                Link 2
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 2
+                </span>
               </a>
             </li>
             <li
@@ -469,7 +541,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link3"
               >
-                Link 3
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 3
+                </span>
               </a>
             </li>
             <li
@@ -482,7 +558,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
                 class="pf-v6-c-nav__link"
                 href="#link4"
               >
-                Link 4
+                <span
+                  class="pf-v6-c-nav__link-text"
+                >
+                  Link 4
+                </span>
               </a>
             </li>
           </ul>
@@ -516,7 +596,11 @@ exports[`Nav Horizontal Nav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link1"
         >
-          Link 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 1
+          </span>
         </a>
       </li>
       <li
@@ -529,7 +613,11 @@ exports[`Nav Horizontal Nav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link2"
         >
-          Link 2
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 2
+          </span>
         </a>
       </li>
       <li
@@ -542,7 +630,11 @@ exports[`Nav Horizontal Nav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link3"
         >
-          Link 3
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 3
+          </span>
         </a>
       </li>
       <li
@@ -555,7 +647,11 @@ exports[`Nav Horizontal Nav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link4"
         >
-          Link 4
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 4
+          </span>
         </a>
       </li>
     </ul>
@@ -586,7 +682,11 @@ exports[`Nav Horizontal SubNav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link1"
         >
-          Link 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 1
+          </span>
         </a>
       </li>
       <li
@@ -599,7 +699,11 @@ exports[`Nav Horizontal SubNav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link2"
         >
-          Link 2
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 2
+          </span>
         </a>
       </li>
       <li
@@ -612,7 +716,11 @@ exports[`Nav Horizontal SubNav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link3"
         >
-          Link 3
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 3
+          </span>
         </a>
       </li>
       <li
@@ -625,7 +733,11 @@ exports[`Nav Horizontal SubNav List 1`] = `
           class="pf-v6-c-nav__link"
           href="#link4"
         >
-          Link 4
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 4
+          </span>
         </a>
       </li>
     </ul>
@@ -670,7 +782,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link1"
             >
-              Link 1
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 1
+              </span>
             </a>
           </li>
           <li
@@ -683,7 +799,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link2"
             >
-              Link 2
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 2
+              </span>
             </a>
           </li>
           <li
@@ -696,7 +816,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link3"
             >
-              Link 3
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 3
+              </span>
             </a>
           </li>
           <li
@@ -709,7 +833,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link4"
             >
-              Link 4
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 4
+              </span>
             </a>
           </li>
         </ul>
@@ -743,7 +871,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link1"
             >
-              Link 1
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 1
+              </span>
             </a>
           </li>
           <li
@@ -756,7 +888,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link2"
             >
-              Link 2
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 2
+              </span>
             </a>
           </li>
           <li
@@ -769,7 +905,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link3"
             >
-              Link 3
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 3
+              </span>
             </a>
           </li>
           <li
@@ -782,7 +922,11 @@ exports[`Nav Nav Grouped List 1`] = `
               class="pf-v6-c-nav__link"
               href="#link4"
             >
-              Link 4
+              <span
+                class="pf-v6-c-nav__link-text"
+              >
+                Link 4
+              </span>
             </a>
           </li>
         </ul>
@@ -907,7 +1051,11 @@ exports[`Nav Renders nav list in strict mode 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link1"
         >
-          Link 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 1
+          </span>
         </a>
       </li>
       <li
@@ -920,7 +1068,11 @@ exports[`Nav Renders nav list in strict mode 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link2"
         >
-          Link 2
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 2
+          </span>
         </a>
       </li>
       <li
@@ -933,7 +1085,11 @@ exports[`Nav Renders nav list in strict mode 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link3"
         >
-          Link 3
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 3
+          </span>
         </a>
       </li>
       <li
@@ -946,7 +1102,11 @@ exports[`Nav Renders nav list in strict mode 1`] = `
           class="pf-v6-c-nav__link test-nav-item-class"
           href="#link4"
         >
-          Link 4
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Link 4
+          </span>
         </a>
       </li>
     </ul>

package/src/components/Nav/examples/Nav.md

@@ -9,6 +9,10 @@ ouia: true
 import './nav.css';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 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 CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 
 ## Examples
 
@@ -70,12 +74,13 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
-### Link text
+### With item icons
 
-```ts file="./NavLinkText.tsx"
+```ts file="./NavIcons.tsx"
 
 ```
 
+
 ## Types
 
 ### NavSelectClickHandler