@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -19,6 +19,8 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
+`OverflowMenuContext` is also available to import and use to further customize and refine behaviors that should respect responsive breakpoints. This context provides the `isBelowBreakpoint` boolean that will update when the specified breakpoint is reached.
+
 ## Examples
 
 ### Simple (responsive)

package/src/components/Page/Page.tsx

@@ -24,11 +24,16 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'docked';
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
   isDockExpanded?: boolean;
+  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
+  isDockExpandableExpanded?: boolean;
   /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and
    * will handle toggling the visibility of the text in individual isDocked components.
    */
   isDockTextExpanded?: boolean;
-  /** The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports. */
+  /** The horizontal masthead content (e.g. <Masthead /> or <PageHeader />). PageHeader is an alternative to Masthead
+   * and should only be used to wrap custom header content. When using the docked variant, this content will only render at
+   * mobile viewports.
+   */
   masthead?: React.ReactNode;
   /** @beta Content to render in the vertical dock when variant of docked is used. At mobile viewports, this content will be replaced with the content passed to masthead. */
   dockContent?: React.ReactNode;
@@ -97,6 +102,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
+  /** Reference for the main section of the page */
+  mainRef?: React.RefObject<HTMLDivElement>;
   /** Flag indicating if the horizontal sub navigation should be in a group */
   isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
@@ -111,6 +118,10 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   breadcrumbProps?: PageBreadcrumbProps;
   /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
   isContentFilled?: boolean;
+  /** Flag indicating the page should render without the content area background and overflow scroll. */
+  isPlain?: boolean;
+  /** Content rendered inside the page footer */
+  footer?: React.ReactNode;
 }
 
 export interface PageState {
@@ -129,12 +140,15 @@ class Page extends Component<PageProps, PageState> {
     defaultManagedSidebarIsOpen: true,
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
+    isDockExpandableExpanded: false,
     onNotificationDrawerExpand: () => null,
     mainComponent: 'main',
     getBreakpoint,
-    getVerticalBreakpoint
+    getVerticalBreakpoint,
+    mainRef: undefined,
+    isPlain: false
   };
-  mainRef = createRef<HTMLDivElement>();
+  mainRef = this.props?.mainRef ? this.props.mainRef : createRef<HTMLDivElement>();
   pageRef = createRef<HTMLDivElement>();
   observer: any = () => {};
 
@@ -242,6 +256,7 @@ class Page extends Component<PageProps, PageState> {
       variant,
       isDockExpanded = false,
       isDockTextExpanded = false,
+      isDockExpandableExpanded = false,
       masthead,
       dockContent,
       sidebar,
@@ -272,6 +287,10 @@ class Page extends Component<PageProps, PageState> {
       groupProps,
       breadcrumbProps,
       isContentFilled,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      mainRef,
+      isPlain,
+      footer,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -355,6 +374,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
             sidebar === null && styles.modifiers.noSidebar,
+            isPlain && styles.modifiers.plain,
             className
           )}
         >
@@ -366,6 +386,7 @@ class Page extends Component<PageProps, PageState> {
                 className={css(
                   styles.pageDock,
                   isDockExpanded && styles.modifiers.expanded,
+                  isDockExpandableExpanded && styles.modifiers.expandableExpanded,
                   isDockTextExpanded && styles.modifiers.textExpanded
                 )}
               >
@@ -384,6 +405,7 @@ class Page extends Component<PageProps, PageState> {
             </div>
           )}
           {!notificationDrawer && main}
+          {footer && footer}
         </div>
       </PageContextProvider>
     );

package/src/components/Page/PageFooter.tsx

@@ -0,0 +1,28 @@
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageFooterProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the footer */
+  children?: React.ReactNode;
+  /** Additional classes added to the footer */
+  className?: string;
+  /** Sets the base component to render. Defaults to footer */
+  component?: keyof React.JSX.IntrinsicElements;
+}
+
+export const PageFooter: React.FunctionComponent<PageFooterProps> = ({
+  className,
+  children,
+  component = 'footer',
+  ...props
+}: PageFooterProps) => {
+  const Component = component as any;
+
+  return (
+    <Component {...props} className={css(styles.pageFooter, className)}>
+      {children}
+    </Component>
+  );
+};
+
+PageFooter.displayName = 'PageFooter';

package/src/components/Page/PageHeader.tsx

@@ -0,0 +1,28 @@
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageHeaderProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the page header. This should be custom header content, rather than the PatternFly Masthead. */
+  children?: React.ReactNode;
+  /** Additional classes added to the page header */
+  className?: string;
+  /** Sets the base component to render. Defaults to header */
+  component?: keyof React.JSX.IntrinsicElements;
+}
+
+export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
+  className,
+  children,
+  component = 'header',
+  ...props
+}: PageHeaderProps) => {
+  const Component = component as any;
+
+  return (
+    <Component {...props} className={css(styles.pageHeader, className)}>
+      {children}
+    </Component>
+  );
+};
+
+PageHeader.displayName = 'PageHeader';

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

@@ -9,9 +9,11 @@ import { Nav, NavList, NavItem } from '../../Nav';
 import { SkipToContent } from '../../SkipToContent';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageGroup } from '../PageGroup';
+import { PageHeader } from '../PageHeader';
 import { Masthead } from '../../Masthead';
 
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageFooter } from '../PageFooter';
 
 const props = {
   'aria-label': 'Page layout',
@@ -481,10 +483,87 @@ describe('Page docked variant', () => {
     expect(pageDock).toHaveClass(styles.modifiers.textExpanded);
   });
 
+  test(`Does not render with ${styles.modifiers.expandableExpanded} when by default and variant is docked`, () => {
+    render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).not.toHaveClass(styles.modifiers.expandableExpanded);
+  });
+
+  test(`Renders with ${styles.modifiers.expandableExpanded} when isDockExpandableExpanded is true and variant is docked`, () => {
+    render(
+      <Page
+        variant="docked"
+        isDockExpandableExpanded
+        dockContent={<>Dock content</>}
+        masthead={<>Masthead</>}
+        data-testid="page"
+      ></Page>
+    );
+    const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`);
+    expect(pageDock).toHaveClass(styles.modifiers.expandableExpanded);
+  });
+
   test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {
     render(<Page variant="docked" dockContent={<>Dock content</>} masthead={<>Masthead</>} data-testid="page"></Page>);
 
     const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
     expect(pageDockMain).toBeInTheDocument();
   });
+
+  test('Renders PageHeader when passed to the masthead prop', () => {
+    render(
+      <Page {...props} masthead={<PageHeader>Custom header</PageHeader>}>
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const header = screen.getByText('Custom header');
+    expect(header).toHaveClass(styles.pageHeader);
+    expect(header.parentElement).toHaveClass(styles.page);
+  });
+
+  test('Renders PageFooter when passed to the footer prop', () => {
+    render(
+      <Page {...props} footer={<PageFooter>Custom footer</PageFooter>}>
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass(styles.pageFooter);
+    expect(footer.parentElement).toHaveClass(styles.page);
+  });
+
+  test(`Renders with ${styles.modifiers.plain} when isPlain is true`, () => {
+    render(
+      <Page {...props} isPlain data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).toHaveClass(styles.modifiers.plain);
+  });
+
+  test(`Does not render with ${styles.modifiers.plain} when isPlain is false`, () => {
+    render(
+      <Page {...props} isPlain={false} data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.plain);
+  });
+
+  test(`Does not render with ${styles.modifiers.plain} when isPlain is not passed`, () => {
+    render(
+      <Page {...props} data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.plain);
+  });
 });

package/src/components/Page/__tests__/PageFooter.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageFooter } from '../PageFooter';
+
+test('Renders children', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toBeVisible();
+});
+
+test('Renders without children', () => {
+  render(<PageFooter data-testid="footer" />);
+  expect(screen.getByTestId('footer')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageFooter} by default`, () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveClass(styles.pageFooter, { exact: true });
+});
+
+test('Renders as a footer by default', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo').tagName).toBe('FOOTER');
+});
+
+test('Renders as a custom component when component is passed', () => {
+  render(<PageFooter component="div">Footer content</PageFooter>);
+  expect(screen.getByText('Footer content').tagName).toBe('DIV');
+});
+
+test('Renders with custom classes when className is passed', () => {
+  render(<PageFooter className="custom-class">Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageFooter id="custom-id">Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveAttribute('id', 'custom-id');
+});

package/src/components/Page/__tests__/PageHeader.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageHeader } from '../PageHeader';
+
+test('Renders children', () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageHeader} by default`, () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveClass(styles.pageHeader, { exact: true });
+});
+
+test('Renders as a div by default', () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('HEADER');
+});
+
+test('Renders as a custom component when component is passed', () => {
+  render(<PageHeader component="div">Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('DIV');
+});
+
+test('Renders with custom classes when className is passed', () => {
+  render(<PageHeader className="custom-class">Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageHeader id="custom-id">Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveAttribute('id', 'custom-id');
+});

package/src/components/Page/examples/Page.md

@@ -3,7 +3,16 @@ id: Page
 section: components
 cssPrefix: pf-v6-c-page
 propComponents:
-  ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
+  [
+    'Page',
+    'PageHeader',
+    'PageSidebar',
+    'PageSidebarBody',
+    'PageSection',
+    'PageGroup',
+    'PageBreadcrumb',
+    'PageToggleButton'
+  ]
 ---
 
 import { useState, useLayoutEffect, useRef } from 'react';
@@ -16,7 +25,7 @@ import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_p
 
 A page will typically contain the following components:
 
-- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) or a `<PageHeader>`
 
 The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
 
@@ -141,3 +150,27 @@ In this example, a scroll event listener on the scroll parent container toggles
 ```ts file="./PageDynamicStickySection.tsx"
 
 ```
+
+### Custom header
+
+To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
+
+```ts isBeta file="./PageCustomHeader.tsx"
+
+```
+
+### Footer
+
+`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
+
+```ts isBeta file="./PageCustomFooter.tsx"
+
+```
+
+### Plain
+
+When a page should not have the default content area background or overflow scrolling, pass the `isPlain` property to `<Page>`.
+
+```ts isBeta file="./PagePlain.tsx"
+
+```

package/src/components/Page/examples/PageCustomFooter.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Page,
+  PageFooter,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton
+} from '@patternfly/react-core';
+
+export const PageCustomFooter: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="custom-footer-body-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>Content</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="custom-footer-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page footer={<PageFooter>Page footer</PageFooter>} masthead={masthead} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-footer-section">
+        <h2 id="custom-footer-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PageCustomHeader.tsx

@@ -0,0 +1,17 @@
+import { Page, PageHeader, PageSection, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
+
+export const PageCustomHeader: React.FunctionComponent = () => {
+  const sidebar = (
+    <PageSidebar isSidebarOpen id="custom-header-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={<PageHeader>Custom page header</PageHeader>} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-header-section">
+        <h2 id="custom-header-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PagePlain.tsx

@@ -0,0 +1,9 @@
+import { Page, PageHeader, PageSection } from '@patternfly/react-core';
+
+export const PagePlain: React.FunctionComponent = () => (
+  <Page isPlain masthead={<PageHeader>Custom header</PageHeader>} sidebar={null}>
+    <PageSection aria-labelledby="plain-page-section">
+      <h2 id="plain-page-section">Page content</h2>
+    </PageSection>
+  </Page>
+);

package/src/components/Page/index.ts

@@ -1,7 +1,9 @@
 export * from './Page';
 export * from './PageBody';
 export * from './PageBreadcrumb';
+export * from './PageFooter';
 export * from './PageGroup';
+export * from './PageHeader';
 export * from './PageSidebar';
 export * from './PageSidebarBody';
 export * from './PageSection';

package/src/components/Pagination/PaginationNavigation.tsx

@@ -1,10 +1,10 @@
 import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { OnSetPage } from './Pagination';
@@ -211,7 +211,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
               this.setState({ userInputPage: newPage });
             }}
             aria-label={toPreviousPageAriaLabel}
-            icon={<AngleLeftIcon />}
+            icon={<RhMicronsCaretLeftIcon />}
           />
         </div>
         {!isCompact && (
@@ -247,7 +247,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
             }}
-            icon={<AngleRightIcon />}
+            icon={<RhMicronsCaretRightIcon />}
           />
         </div>
         {!isCompact && (
@@ -262,7 +262,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
                 this.handleNewPage(event, lastPage);
                 this.setState({ userInputPage: lastPage });
               }}
-              icon={<AngleDoubleRightIcon />}
+              icon={<RhMicronsDoubleCaretRightIcon />}
             />
           </div>
         )}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap

@@ -64,24 +64,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 256 512"
-            >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M21 30a.997.997 0 0 1-.707-.293L7.647 17.061a1.501 1.501 0 0 1 0-2.121L20.293 2.293a.999.999 0 1 1 1.414 1.414L9.414 16l12.293 12.293A.999.999 0 0 1 21 30Z"
-              />
-            </svg>
+            <path
+              d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
+            />
           </svg>
         </span>
       </button>
@@ -126,24 +114,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 256 512"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
-              />
-            </svg>
+            <path
+              d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+            />
           </svg>
         </span>
       </button>
@@ -169,24 +145,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 448 512"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M30.354 17.061 17.708 29.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L28.587 16 16.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121Zm-14-2.122L3.707 2.293a.999.999 0 1 0-1.414 1.414L14.586 16 2.293 28.293a.999.999 0 1 0 1.414 1.414l12.646-12.646a1.501 1.501 0 0 0 0-2.121Z"
-              />
-            </svg>
+            <path
+              d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
+            />
           </svg>
         </span>
       </button>