feat(Page,Drawer): core bump and updates (#10211)

* feat(Page,Drawer): core bump and updates

* update layouts with core bump

* fix integration

* move tabindex

* update snap

* move tabindex back

* reup snaps

Author: kmcfaul

packages/react-core/package.json

@@ -55,7 +55,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.100",
+    "@patternfly/patternfly": "6.0.0-alpha.107",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",

packages/react-core/src/components/Drawer/DrawerContent.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerMain } from './DrawerMain';
-import { DrawerColorVariant, DrawerContext } from './Drawer';
+import { DrawerContext } from './Drawer';
+
+export enum DrawerContentColorVariant {
+  default = 'default',
+  primary = 'primary',
+  secondary = 'secondary'
+}
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
@@ -12,14 +18,14 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;
   /** Color variant of the background of the drawer panel */
-  colorVariant?: DrawerColorVariant | 'no-background' | 'default' | 'secondary';
+  colorVariant?: DrawerContentColorVariant | 'default' | 'primary' | 'secondary';
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   className,
   children,
   panelContent,
-  colorVariant = DrawerColorVariant.default,
+  colorVariant = DrawerContentColorVariant.default,
   ...props
 }: DrawerContentProps) => {
   const { drawerContentRef } = React.useContext(DrawerContext);
@@ -29,8 +35,8 @@ export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
       <div
         className={css(
           styles.drawerContent,
-          colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
-          colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
+          colorVariant === DrawerContentColorVariant.primary && styles.modifiers.primary,
+          colorVariant === DrawerContentColorVariant.secondary && styles.modifiers.secondary,
           className
         )}
         ref={drawerContentRef}

packages/react-core/src/components/Drawer/examples/DrawerSecondaryBackground.tsx

@@ -10,7 +10,8 @@ import {
   DrawerCloseButton,
   DrawerSection,
   Button,
-  DrawerColorVariant
+  DrawerColorVariant,
+  DrawerContentColorVariant
 } from '@patternfly/react-core';
 
 export const DrawerSecondaryBackground: React.FunctionComponent = () => {
@@ -96,7 +97,7 @@ export const DrawerSecondaryBackground: React.FunctionComponent = () => {
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerContentColorVariant.secondary : DrawerContentColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

packages/react-core/src/components/Page/Page.tsx

@@ -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}
-        {!isHorizontalSubnavGrouped && 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>;