@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.3

package/src/components/Masthead/examples/Masthead.md

@@ -140,50 +140,6 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 </Masthead>;
 ```
 
-### Light variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light-masthead" backgroundColor="light">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
-### Light 200 variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light200-masthead" backgroundColor="light200">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
 ### Inset
 
 ```ts

package/src/components/Menu/Menu.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
+import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
+import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
@@ -177,7 +179,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
 
     if (
       (event.target as HTMLElement).closest(`.${styles.menu}`) !== this.activeMenu &&
-      !(event.target as HTMLElement).classList.contains('pf-v5-c-breadcrumb__link')
+      !(event.target as HTMLElement).classList.contains(breadcrumbStyles.breadcrumbLink)
     ) {
       this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
       this.setState({ disableHover: true });
@@ -190,8 +192,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     const parentMenu = this.activeMenu;
     const key = event.key;
     const isFromBreadcrumb =
-      activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
-      activeElement.classList.contains('pf-v5-c-dropdown__toggle');
+      activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+      activeElement.classList.contains(dropdownStyles.dropdownToggle);
 
     if (key === ' ' || key === 'Enter') {
       event.preventDefault();
@@ -308,8 +310,9 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             }
             noHorizontalArrowHandling={
               document.activeElement &&
-              (document.activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
-                document.activeElement.classList.contains('pf-v5-c-dropdown__toggle'))
+              (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+                document.activeElement.classList.contains(dropdownStyles.dropdownToggle) ||
+                document.activeElement.tagName === 'INPUT')
             }
             noEnterHandling
             noSpaceHandling

package/src/components/Menu/MenuContainer.tsx

@@ -14,6 +14,8 @@ export interface MenuPopperProps {
   maxWidth?: string | 'trigger';
   /** Enable to flip the popper when it reaches the boundary */
   enableFlip?: boolean;
+  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
+  preventOverflow?: boolean;
 }
 export interface MenuContainerProps {
   /** Menu to be rendered */

package/src/components/Menu/MenuContent.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import { MenuContext } from './MenuContext';
+import cssHeight from '@patternfly/react-tokens/dist/esm/c_menu__content_Height';
+import cssMaxHeight from '@patternfly/react-tokens/dist/esm/c_menu__content_MaxHeight';
 
 export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   /** Items within group */
@@ -58,8 +60,8 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
           ref={(el) => refCallback(el, menuId, onGetMenuHeight)}
           style={
             {
-              ...(menuHeight && { '--pf-v5-c-menu__content--Height': menuHeight }),
-              ...(maxMenuHeight && { '--pf-v5-c-menu__content--MaxHeight': maxMenuHeight })
+              ...(menuHeight && { [cssHeight.name]: menuHeight }),
+              ...(maxMenuHeight && { [cssMaxHeight.name]: maxMenuHeight })
             } as React.CSSProperties
           }
         >

package/src/components/Menu/MenuSearchInput.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
 export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
   /** Items within input */
@@ -10,6 +11,6 @@ export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
 
 export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
   // Update to use the styles object when core adds the class
-  <div {...props} className={css('pf-v5-c-menu__search-input', props.className)} ref={ref} />
+  <div {...props} className={css(`${styles.menuSearch}-input`, props.className)} ref={ref} />
 ));
 MenuSearchInput.displayName = 'MenuSearchInput';

package/src/components/Menu/__mocks__/Menu.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { MenuProps } from '../Menu';
+import cssMenuMinWidth from '@patternfly/react-tokens/dist/esm/c_menu_MinWidth';
 
 export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...props }: MenuProps) => (
   <>
@@ -7,6 +8,6 @@ export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...pro
     <div onClick={onSelect}>{'Mock item'}</div>
     <p>{`isPlain: ${isPlain}`}</p>
     <p>{`isScrollable: ${isScrollable}`}</p>
-    <p>{`minWidth: ${style?.['--pf-v5-c-menu--MinWidth']}`}</p>
+    <p>{`minWidth: ${style?.[cssMenuMinWidth.name]}`}</p>
   </>
 );

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
 
 import { Menu } from '../Menu';
 import { MenuItem } from '../MenuItem';
@@ -54,7 +53,7 @@ describe('Menu', () => {
 
   describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
-      const { asFragment } = render(
+      render(
         <Menu>
           <MenuContent>
             <MenuList>
@@ -67,7 +66,7 @@ describe('Menu', () => {
       );
       const checkbox1 = screen.getAllByRole('checkbox')[0];
       expect(checkbox1).not.toBeChecked();
-      expect(screen.getByText("Checkbox 1")).toBeInTheDocument();
+      expect(screen.getByText('Checkbox 1')).toBeInTheDocument();
     });
   });
 });

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

@@ -5,7 +5,7 @@ import { Badge } from '../../Badge';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -61,21 +61,23 @@ describe('menu toggle', () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();
 
-    render(<MenuToggle
-      onClick={mockClick}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-disabled-example"
-            key="split-checkbox-with-text-disabled"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
-      aria-label="Menu toggle with checkbox split button and text"
-    />);
+    render(
+      <MenuToggle
+        onClick={mockClick}
+        splitButtonOptions={{
+          items: [
+            <MenuToggleCheckbox
+              id="split-button-checkbox-with-text-disabled-example"
+              key="split-checkbox-with-text-disabled"
+              aria-label="Select all"
+            >
+              10 selected
+            </MenuToggleCheckbox>
+          ]
+        }}
+        aria-label="Menu toggle with checkbox split button and text"
+      />
+    );
 
     await user.click(screen.getByRole(`button`) as Element);
     expect(mockClick).toHaveBeenCalled();

package/src/components/MenuToggle/examples/MenuToggle.css

@@ -1,3 +1,4 @@
-#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle, #ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
-    vertical-align: bottom;
+#ws-react-c-menu-toggle-primary .pf-v5-c-menu-toggle,
+#ws-react-c-menu-toggle-secondary .pf-v5-c-menu-toggle {
+  vertical-align: bottom;
 }

package/src/components/Modal/ModalBoxHeader.tsx

@@ -21,7 +21,7 @@ export const ModalBoxHeader: React.FunctionComponent<ModalBoxHeaderProps> = ({
     {help && (
       <React.Fragment>
         <div className={css(styles.modalBoxHeaderMain)}>{children}</div>
-        <div className="pf-v5-c-modal-box__header-help">{help}</div>
+        <div className={`${styles.modalBoxHeader}-help`}>{help}</div>
       </React.Fragment>
     )}
     {!help && children}

package/src/components/Modal/examples/Modal.md

@@ -10,6 +10,8 @@ import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
 

package/src/components/Modal/examples/ModalCustomHeaderFooter.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -14,14 +15,14 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
       <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
         Custom header/footer modal
       </Title>
-      <p className="pf-v5-u-pt-sm">Allows for custom content in the header and/or footer by passing components.</p>
+      <p className={spacing.ptSm}>Allows for custom content in the header and/or footer by passing components.</p>
     </React.Fragment>
   );
 
   const footer = (
     <Title headingLevel="h4" size={TitleSizes.md}>
       <WarningTriangleIcon />
-      <span className="pf-v5-u-pl-sm">Custom modal footer.</span>
+      <span className={spacing.plSm}>Custom modal footer.</span>
     </Title>
   );
 

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Modal, ModalVariant, Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 export const ModalWithForm: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = React.useState(false);
@@ -79,7 +80,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for name field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-name"
-                  className="pf-v5-c-form__group-label-help"
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>
@@ -128,7 +129,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for e-mail field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-email"
-                  className="pf-v5-c-form__group-label-help"
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>
@@ -176,7 +177,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   aria-label="More info for address field"
                   onClick={(e) => e.preventDefault()}
                   aria-describedby="modal-with-form-form-address"
-                  className="pf-v5-c-form__group-label-help"
+                  className={formStyles.formGroupLabelHelp}
                 >
                   <HelpIcon />
                 </button>

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -75,7 +75,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
             isExpanded={isOpen}
             onToggle={toggleExpandableSection}
           >
-            <ul className="pf-v5-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+            <ul className={`${styles.multipleFileUploadStatus}-list`} role="list" aria-label={ariaLabel}>
               {children}
             </ul>
           </ExpandableSection>

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -48,7 +48,7 @@ describe('MultipleFileUploadStatusItem', () => {
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"
-        progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`}
+        progressAriaLiveMessage={(loadPercentage) => `test message ${loadPercentage}`}
       />
     );
 

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitle.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitle } from '../MultipleFileUploadTitle';
 
 describe('MultipleFileUploadTitle', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleIcon.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleIcon } from '../MultipleFileUploadTitleIcon';
 
 describe('MultipleFileUploadTitleIcon', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleText.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleText } from '../MultipleFileUploadTitleText';
 
 describe('MultipleFileUploadTitleText', () => {

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadTitleTextSeparator.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { MultipleFileUploadTitleTextSeparator } from '../MultipleFileUploadTitleTextSeparator';
 
 describe('MultipleFileUploadTitleTextSeparator', () => {

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -62,7 +62,8 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {
       const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number }));
-      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles]);
+      // eslint-disable-next-line
+      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles as any]);
     } else {
       setCurrentFiles((prevFiles) => [...prevFiles, ...files]);
     }

package/src/components/Nav/NavExpandable.tsx

@@ -9,10 +9,10 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface NavExpandableProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
+  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>,
     OUIAProps {
-  /** Title shown for the expandable list */
-  title: string;
+  /** Title content shown for the expandable list */
+  title: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */
   srText?: string;
   /** Boolean to programatically expand or collapse section */
@@ -126,14 +126,14 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
             <PageSidebarContext.Consumer>
               {({ isSidebarOpen }) => (
                 <button
-                  className={styles.navLink}
+                  className={css(styles.navLink)}
                   id={srText ? null : this.id}
                   onClick={(event) => this.onExpand(event, context.onToggle)}
                   aria-expanded={expandedState}
                   tabIndex={isSidebarOpen ? null : -1}
                   {...buttonProps}
                 >
-                  {title}
+                  {typeof title !== 'string' ? <span className={css(`${styles.nav}__link-text`)}>{title}</span> : title}
                   <span className={css(styles.navToggle)}>
                     <span className={css(styles.navToggleIcon)}>
                       <AngleRightIcon aria-hidden="true" />

package/src/components/Nav/NavItem.tsx

@@ -38,6 +38,8 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   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;
+  /** @beta 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> = ({
@@ -56,6 +58,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaId,
   ouiaSafe,
   zIndex = 9999,
+  hasNavLinkWrapper,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
@@ -188,7 +191,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
-        {children}
+        {hasNavLinkWrapper ? <span className={css(`${styles.nav}__link-text`)}>{children}</span> : children}
         {flyout && flyoutButton}
       </Component>
     );

package/src/components/Nav/NavList.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { isElementInView } from '../../helpers/util';
+import { getLanguageDirection, isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -112,7 +112,7 @@ class NavList extends React.Component<NavListProps> {
 
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
     this.handleScrollButtons();
   }
 
@@ -121,7 +121,7 @@ class NavList extends React.Component<NavListProps> {
   }
 
   componentDidUpdate() {
-    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+    this.direction = getLanguageDirection(this.navList.current);
   }
 
   render() {

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

@@ -30,7 +30,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test-nav-class">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -47,7 +47,7 @@ describe('Nav', () => {
       <React.StrictMode>
         <Nav className="test-nav-class">
           <NavList className="test-nav-list-class">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to} className="test-nav-item-class">
                 {item.label}
               </NavItem>
@@ -64,7 +64,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav className="test=nav-class" theme="dark">
         <NavList className="test-nav-list-class">
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to} className="test-nav-item-class">
               {item.label}
             </NavItem>
@@ -81,7 +81,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav>
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -99,7 +99,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -119,7 +119,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" onExpand={onExpand}>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -141,7 +141,7 @@ describe('Nav', () => {
       <Nav>
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" className="expandable-group" isExpanded>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -160,7 +160,7 @@ describe('Nav', () => {
       <Nav aria-label="Test">
         <NavList>
           <NavExpandable id="grp-1" title="Section 1" srText="Section 1 - Example sub-navigation">
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={item.to}>
                 {item.label}
               </NavItem>
@@ -177,7 +177,7 @@ describe('Nav', () => {
       <Nav>
         <NavGroup id="grp-1" title="Section 1">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section1_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -186,7 +186,7 @@ describe('Nav', () => {
         </NavGroup>
         <NavGroup id="grp-2" title="Section 2">
           <NavList>
-            {props.items.map(item => (
+            {props.items.map((item) => (
               <NavItem to={item.to} key={`section2_${item.to}`}>
                 {item.label}
               </NavItem>
@@ -202,7 +202,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -217,7 +217,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="horizontal-subnav">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -232,7 +232,7 @@ describe('Nav', () => {
     const { asFragment } = renderNav(
       <Nav variant="tertiary">
         <NavList>
-          {props.items.map(item => (
+          {props.items.map((item) => (
             <NavItem to={item.to} key={item.to}>
               {item.label}
             </NavItem>
@@ -269,7 +269,7 @@ describe('Nav', () => {
       </Nav>
     );
 
-    await user.hover(screen.getByText('My custom node'))
+    await user.hover(screen.getByText('My custom node'));
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -7,6 +7,8 @@ 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';
 
 ## Examples
 
@@ -68,6 +70,12 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
+### Link text
+
+```ts isBeta file="./NavLinkText.tsx"
+
+```
+
 ## Types
 
 ### NavSelectClickHandler

package/src/components/Nav/examples/NavExpandableThirdLevel.tsx

@@ -62,7 +62,7 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
           </NavItem>
         </NavExpandable>
         <NavExpandable
-          title="Expandable section title 2"
+          title={'Expandable section title 2'}
           groupId="nav-expand3rd-group-2"
           isActive={activeGroup === 'nav-expand3rd-group-2'}
           isExpanded

package/src/components/Nav/examples/NavFlyout.tsx

@@ -22,7 +22,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>
             Next menu
           </MenuItem>
-          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+          {Array.from({ length: numFlyouts - depth }).map((_value, index) => (
             <MenuItem
               onClick={onMenuItemClick}
               key={`${depth}-${index}`}