@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.50

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuControl.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuControl should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu__control string"
+    class="pf-v6-c-overflow-menu__control string"
   >
      any 
   </div>

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -3,23 +3,23 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    class="pf-v5-c-menu__list-item"
+    class="pf-v6-c-menu__list-item"
     data-ouia-component-id="OUIA-Generated-DropdownItem-1"
     data-ouia-component-type="PF5/DropdownItem"
     data-ouia-safe="true"
     role="none"
   >
     <button
-      class="pf-v5-c-menu__item"
+      class="pf-v6-c-menu__item"
       role="menuitem"
       tabindex="-1"
       type="button"
     >
       <span
-        class="pf-v5-c-menu__item-main"
+        class="pf-v6-c-menu__item-main"
       >
         <span
-          class="pf-v5-c-menu__item-text"
+          class="pf-v6-c-menu__item-text"
         >
           any
         </span>

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

@@ -3,7 +3,7 @@
 exports[`OverflowMenu basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu"
+    class="pf-v6-c-overflow-menu"
   >
     <div>
       BASIC
@@ -15,7 +15,7 @@ exports[`OverflowMenu basic 1`] = `
 exports[`OverflowMenu lg 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu"
+    class="pf-v6-c-overflow-menu"
   />
 </DocumentFragment>
 `;
@@ -23,7 +23,7 @@ exports[`OverflowMenu lg 1`] = `
 exports[`OverflowMenu xl 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu"
+    class="pf-v6-c-overflow-menu"
   />
 </DocumentFragment>
 `;

package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuControl.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuControl Additional Options 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu__control"
+    class="pf-v6-c-overflow-menu__control"
   >
       
   </div>

package/src/components/OverflowMenu/__tests__/__snapshots__/OverflowMenuItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuItem Below breakpoint and not isPersistent should not show 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-overflow-menu__item"
+    class="pf-v6-c-overflow-menu__item"
   >
      Some item value 
   </div>

package/src/components/Page/Page.tsx

@@ -44,8 +44,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
-  /** Flag indicating if tertiary nav width should be limited */
-  isTertiaryNavWidthLimited?: boolean;
+  /** Flag indicating if horizontal sub navigation width should be limited */
+  isHorizontalSubnavWidthLimited?: boolean;
   /**
    * If true, the managed sidebar is initially open for desktop view
    */
@@ -71,12 +71,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
-  /** Tertiary nav component for the page */
-  tertiaryNav?: React.ReactNode;
+  /** Horizontal sub navigation component for the page */
+  horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
-  /** Flag indicating if the tertiaryNav should be in a group */
-  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the horizontal sub navigation should be in a group */
+  isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
@@ -219,7 +219,7 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
-      isTertiaryNavWidthLimited,
+      isHorizontalSubnavWidthLimited,
       skipToContent,
       role,
       mainContainerId,
@@ -233,8 +233,8 @@ class Page extends React.Component<PageProps, PageState> {
       mainAriaLabel,
       mainTabIndex,
       mainComponent,
-      tertiaryNav,
-      isTertiaryNavGrouped,
+      horizontalSubnav,
+      isHorizontalSubnavGrouped,
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
@@ -254,14 +254,14 @@ class Page extends React.Component<PageProps, PageState> {
     };
 
     let nav = null;
-    if (tertiaryNav && isTertiaryNavWidthLimited) {
+    if (horizontalSubnav && isHorizontalSubnavWidthLimited) {
       nav = (
         <div className={css(styles.pageMainNav, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{tertiaryNav}</div>
+          <div className={css(styles.pageMainBody)}>{horizontalSubnav}</div>
         </div>
       );
-    } else if (tertiaryNav) {
-      nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
+    } else if (horizontalSubnav) {
+      nav = <div className={css(styles.pageMainNav)}>{horizontalSubnav}</div>;
     }
 
     const crumb = breadcrumb ? (
@@ -282,11 +282,11 @@ class Page extends React.Component<PageProps, PageState> {
       </section>
     ) : null;
 
-    const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
+    const isGrouped = isHorizontalSubnavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
-        {isTertiaryNavGrouped && nav}
+        {isHorizontalSubnavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -295,19 +295,21 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <Component
-        ref={this.mainRef}
-        role={role}
-        id={mainContainerId}
-        className={css(styles.pageMain)}
-        tabIndex={mainTabIndex}
-        aria-label={mainAriaLabel}
-      >
-        {group}
-        {!isTertiaryNavGrouped && nav}
-        {!isBreadcrumbGrouped && crumb}
-        {children}
-      </Component>
+      <div className={css(styles.pageMainContainer)}>
+        <Component
+          ref={this.mainRef}
+          role={role}
+          id={mainContainerId}
+          className={css(styles.pageMain)}
+          tabIndex={mainTabIndex}
+          aria-label={mainAriaLabel}
+        >
+          {group}
+          {!isHorizontalSubnavGrouped && nav}
+          {!isBreadcrumbGrouped && crumb}
+          {children}
+        </Component>
+      </div>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;

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

@@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="false"
-    class="pf-v5-c-page__sidebar pf-m-expanded ''"
+    class="pf-v6-c-page__sidebar pf-m-expanded ''"
     id="page-sidebar"
   >
     <div>

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

@@ -235,7 +235,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageNavigation>
-          <Nav aria-label="Nav" variant="tertiary">
+          <Nav aria-label="Nav" variant="horizontal-subnav">
             <NavList>
               <NavItem itemId={0} isActive>
                 System Panel
@@ -273,7 +273,7 @@ describe('Page', () => {
             </Breadcrumb>
           </PageBreadcrumb>
           <PageNavigation>
-            <Nav aria-label="Nav" variant="tertiary">
+            <Nav aria-label="Nav" variant="horizontal-subnav">
               <NavList>
                 <NavItem itemId={0} isActive>
                   System Panel
@@ -310,7 +310,7 @@ describe('Page', () => {
       </PageBreadcrumb>
     );
     const nav = (
-      <Nav aria-label="Nav" variant="tertiary">
+      <Nav aria-label="Nav" variant="horizontal-subnav">
         <NavList>
           <NavItem itemId={0} isActive>
             System Panel
@@ -329,9 +329,9 @@ describe('Page', () => {
         header={Header}
         sidebar={Sidebar}
         breadcrumb={crumb}
-        tertiaryNav={nav}
+        horizontalSubnav={nav}
         isBreadcrumbGrouped
-        isTertiaryNavGrouped
+        isHorizontalSubnavGrouped
         groupProps={{
           stickyOnBreakpoint: { default: 'bottom' },
           hasShadowTop: true,