From f7dc5c7fa7f8506c09ccf30d7d9f6770b47c8d9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 22 Jun 2023 12:10:14 +0200
Subject: [PATCH 1/5] fix(Page) allow change of main tag

---
 packages/react-core/src/components/Page/Page.tsx    |  9 +++++++--
 .../Page/__tests__/__snapshots__/Page.test.tsx.snap | 13 +++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index aaa425dc600..c45f5a624cb 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -81,6 +81,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
   additionalGroupedContent?: React.ReactNode;
+  /** HTML tag used as main component of the page, defaults to 'main'. */
+  mainTag?: 'main' | 'div';
   /** Additional props of the group */
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
@@ -104,6 +106,7 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
+    mainTag: 'main',
     getBreakpoint,
     getVerticalBreakpoint
   };
@@ -288,8 +291,10 @@ export class Page extends React.Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
+    const MainTag: keyof JSX.IntrinsicElements = this.props.mainTag;
+
     const main = (
-      <main
+      <MainTag
         ref={this.mainRef}
         role={role}
         id={mainContainerId}
@@ -301,7 +306,7 @@ export class Page extends React.Component<PageProps, PageState> {
         {!isTertiaryNavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
-      </main>
+      </MainTag>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index 3cfdf602a6d..b1820873ed5 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Page Check dark page against snapshot 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -67,6 +68,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -127,6 +129,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -291,6 +294,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -455,6 +459,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -739,6 +744,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1030,6 +1036,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1207,6 +1214,7 @@ exports[`Page Check page to verify skip to content points to main content region
     class="pf-v5-c-page my-page-class"
     data-testid="page-test-id"
     id="PageId"
+    maintag="main"
   >
     <div
       class="pf-v5-c-skip-to-content"
@@ -1386,6 +1394,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1447,6 +1456,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1611,6 +1621,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1775,6 +1786,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1939,6 +1951,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
+    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"

From 8405d2f7ca6db316a5d31aefe035748517c0b821 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Mon, 26 Jun 2023 11:04:42 +0200
Subject: [PATCH 2/5] rename prop and add it to render method

---
 packages/react-core/src/components/Page/Page.tsx    | 13 +++++++------
 .../Page/__tests__/__snapshots__/Page.test.tsx.snap | 13 -------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index c45f5a624cb..97e91be3bb6 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -81,8 +81,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
   additionalGroupedContent?: React.ReactNode;
-  /** HTML tag used as main component of the page, defaults to 'main'. */
-  mainTag?: 'main' | 'div';
+  /** HTML component used as main component of the page, defaults to 'main'. */
+  mainComponent?: 'main' | 'div';
   /** Additional props of the group */
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
@@ -106,7 +106,7 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
-    mainTag: 'main',
+    mainComponent: 'main',
     getBreakpoint,
     getVerticalBreakpoint
   };
@@ -232,6 +232,7 @@ export class Page extends React.Component<PageProps, PageState> {
       getVerticalBreakpoint,
       mainAriaLabel,
       mainTabIndex,
+      mainComponent,
       tertiaryNav,
       isTertiaryNavGrouped,
       isBreadcrumbGrouped,
@@ -291,10 +292,10 @@ export class Page extends React.Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
-    const MainTag: keyof JSX.IntrinsicElements = this.props.mainTag;
+    const MainComponent: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <MainTag
+      <MainComponent
         ref={this.mainRef}
         role={role}
         id={mainContainerId}
@@ -306,7 +307,7 @@ export class Page extends React.Component<PageProps, PageState> {
         {!isTertiaryNavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
-      </MainTag>
+      </MainComponent>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index b1820873ed5..3cfdf602a6d 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`Page Check dark page against snapshot 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -68,7 +67,6 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -129,7 +127,6 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -294,7 +291,6 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -459,7 +455,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -744,7 +739,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1036,7 +1030,6 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1214,7 +1207,6 @@ exports[`Page Check page to verify skip to content points to main content region
     class="pf-v5-c-page my-page-class"
     data-testid="page-test-id"
     id="PageId"
-    maintag="main"
   >
     <div
       class="pf-v5-c-skip-to-content"
@@ -1394,7 +1386,6 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1456,7 +1447,6 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1621,7 +1611,6 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1786,7 +1775,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"
@@ -1951,7 +1939,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     aria-label="Page layout"
     class="pf-v5-c-page my-page-class"
     id="PageId"
-    maintag="main"
   >
     <header
       class="pf-v5-c-page__header"

From 2c18074d4f04dc06931c79448f051cb09cb1f702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Fri, 7 Jul 2023 13:35:08 +0200
Subject: [PATCH 3/5] change prop name and description

---
 packages/react-core/src/components/Page/Page.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index 97e91be3bb6..d5591a8e403 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -81,8 +81,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
   additionalGroupedContent?: React.ReactNode;
-  /** HTML component used as main component of the page, defaults to 'main'. */
-  mainComponent?: 'main' | 'div';
+  /** Base HTML component used for the page. Defaults to 'main' */
+  component?: 'main' | 'div';
   /** Additional props of the group */
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
@@ -106,7 +106,7 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
-    mainComponent: 'main',
+    component: 'main',
     getBreakpoint,
     getVerticalBreakpoint
   };
@@ -232,7 +232,7 @@ export class Page extends React.Component<PageProps, PageState> {
       getVerticalBreakpoint,
       mainAriaLabel,
       mainTabIndex,
-      mainComponent,
+      component,
       tertiaryNav,
       isTertiaryNavGrouped,
       isBreadcrumbGrouped,
@@ -292,10 +292,10 @@ export class Page extends React.Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
-    const MainComponent: keyof JSX.IntrinsicElements = mainComponent;
+    const Component: keyof JSX.IntrinsicElements = component;
 
     const main = (
-      <MainComponent
+      <Component
         ref={this.mainRef}
         role={role}
         id={mainContainerId}
@@ -307,7 +307,7 @@ export class Page extends React.Component<PageProps, PageState> {
         {!isTertiaryNavGrouped && nav}
         {!isBreadcrumbGrouped && crumb}
         {children}
-      </MainComponent>
+      </Component>
     );
 
     const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;

From 28916f738d100bea1a3029623a0d6337094d2016 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Tue, 11 Jul 2023 12:54:57 +0200
Subject: [PATCH 4/5] update description

---
 packages/react-core/src/components/Page/Page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index d5591a8e403..37d94838154 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -81,7 +81,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
   additionalGroupedContent?: React.ReactNode;
-  /** Base HTML component used for the page. Defaults to 'main' */
+  /** Base HTML component used for the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
   component?: 'main' | 'div';
   /** Additional props of the group */
   groupProps?: PageGroupProps;

From 6f82495cfb97b926b4f21092cf95d5cf108b8361 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 26 Jul 2023 15:32:30 -0400
Subject: [PATCH 5/5] Reverted prop name

---
 packages/react-core/src/components/Page/Page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index 37d94838154..1c7612d2a7f 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -81,8 +81,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   isBreadcrumbGrouped?: boolean;
   /** Additional content of the group */
   additionalGroupedContent?: React.ReactNode;
-  /** Base HTML component used for the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
-  component?: 'main' | 'div';
+  /** HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
+  mainComponent?: 'main' | 'div';
   /** Additional props of the group */
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
@@ -106,7 +106,7 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
-    component: 'main',
+    mainComponent: 'main',
     getBreakpoint,
     getVerticalBreakpoint
   };
@@ -232,7 +232,7 @@ export class Page extends React.Component<PageProps, PageState> {
       getVerticalBreakpoint,
       mainAriaLabel,
       mainTabIndex,
-      component,
+      mainComponent,
       tertiaryNav,
       isTertiaryNavGrouped,
       isBreadcrumbGrouped,
@@ -292,7 +292,7 @@ export class Page extends React.Component<PageProps, PageState> {
       </PageGroup>
     ) : null;
 
-    const Component: keyof JSX.IntrinsicElements = component;
+    const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
       <Component