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

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

@@ -536,30 +536,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <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>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <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>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -626,25 +638,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <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>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <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>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
@@ -704,30 +728,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <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>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <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>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -794,25 +830,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <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>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <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>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
         <section
@@ -974,30 +1022,42 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         <nav
           aria-label="Nav"
-          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-          data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
+          class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+          data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
           data-ouia-component-type="PF5/Nav"
           data-ouia-safe="true"
         >
-          <button
-            aria-label="Scroll back"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll back"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <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>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <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>
+              </span>
+            </button>
+          </div>
           <ul
             class="pf-v5-c-nav__list"
             role="list"
@@ -1064,25 +1124,37 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
               </a>
             </li>
           </ul>
-          <button
-            aria-label="Scroll foward"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll foward"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <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>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <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>
+              </span>
+            </button>
+          </div>
         </nav>
       </div>
       <section

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

@@ -16,7 +16,6 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import './page.css';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
@@ -62,16 +61,6 @@ To add horizontal navigation to the top of a `<Page>`, add the navigation inside
 
 ```
 
-### Tertiary navigation (deprecated)
-
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
-
-Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
-
-```ts file="./PageTertiaryNav.tsx" isDeprecated
-
-```
-
 ### Uncontrolled navigation
 
 When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
@@ -115,7 +104,7 @@ The following example adds a group containing `<PageNavigation>`, `<PageBreadcru
 To add additional components and information to a group, you may use the following properties:
 
 - To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
-- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
+- To indicate that horizontal sub navigation should be in a group, use `isHorizontalSubnavGrouped`.
 - To specify additional group content, use `additionalGroupedContent`.
 
 ```ts file="./PageGroupSection.tsx"

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

@@ -71,7 +71,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
     <Page header={header} sidebar={sidebar}>
       <PageGroup>
         <PageNavigation>
-          <Nav aria-label="Group section navigation" variant="tertiary">
+          <Nav aria-label="Group section navigation" variant="horizontal-subnav">
             <NavList>
               <NavItem href="#" itemId={0} isActive>
                 System panel

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

@@ -35,7 +35,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   return (
     <Page header={header}>
       <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
     </Page>
   );

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

@@ -62,7 +62,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   return (
     <Page header={header} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
     </Page>
   );

package/src/components/Pagination/Pagination.tsx

@@ -119,10 +119,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
     xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
     '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
   };
-  /** Flag indicating if pagination is compact. */
-  isCompact?: boolean;
   /** Flag indicating if pagination is disabled. */
   isDisabled?: boolean;
+  /** Flag indicating if pagination is compact. */
+  isCompact?: boolean;
   /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
   /** Flag indicating if pagination should stick to its position (based on variant). */
@@ -285,7 +285,6 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         variant === PaginationVariant.bottom && styles.modifiers.bottom,
         usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
-        isCompact && styles.modifiers.compact,
         isStatic && styles.modifiers.static,
         isSticky && styles.modifiers.sticky,
         className

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuList, MenuItem } from '../Menu';
 import { MenuToggle } from '../MenuToggle';
@@ -210,7 +211,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
+    <div className={css(styles.paginationPageMenu)} ref={containerRef}>
       <Popper
         trigger={toggle}
         triggerRef={toggleRef}

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

@@ -2,7 +2,9 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    class="pf-v5-c-pagination__page-menu"
+  >
     <button
       aria-expanded="false"
       aria-haspopup="listbox"

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

@@ -19,7 +19,7 @@ describe('Pagination', () => {
     });
 
     test('should render correctly compact', () => {
-      const { asFragment } = render(<Pagination itemCount={20} isCompact />);
+      const { asFragment } = render(<Pagination itemCount={20} />);
       expect(asFragment()).toMatchSnapshot();
     });
 
@@ -119,11 +119,6 @@ describe('Pagination', () => {
       render(<Pagination data-testid="pagination-insets" usePageInsets />);
       expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
     });
-
-    test('page insets', () => {
-      render(<Pagination data-testid="pagination-insets" usePageInsets />);
-      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
-    });
   });
 
   describe('API', () => {

package/src/components/Pagination/__tests__/PaginationOptionsMenu.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PaginationOptionsMenu } from '../PaginationOptionsMenu';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
+
+jest.mock('../../../helpers/Popper/Popper');
+
+test('renders pagination options menu', () => {
+  render(
+    <div data-testid="options-menu">
+      <PaginationOptionsMenu toggleTemplate="Test" />
+    </div>
+  );
+
+  expect(screen.getByTestId('options-menu').children[0]).toBeVisible();
+});
+
+test(`renders with class ${styles.paginationPageMenu} by default`, () => {
+  render(<PaginationOptionsMenu toggleTemplate="Test" />);
+
+  // Mocked Popper is rendered with data-testid="mock-wrapper"
+  expect(screen.getByTestId('mock-wrapper').parentElement).toHaveClass(styles.paginationPageMenu);
+});