From b9c76e2f6d0ba6783670c4e25d32f4bb7085c657 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Tue, 28 May 2024 11:45:59 +0200
Subject: [PATCH] feat(Page): rename 'header' prop to 'masthead'

---
 .../react-core/src/components/Page/Page.tsx   |  8 +--
 .../src/components/Page/PageSidebar.tsx       |  2 +-
 .../components/Page/__tests__/Page.test.tsx   | 52 +++++++++----------
 .../src/components/Page/examples/Page.md      |  2 +-
 .../Page/examples/PageCenteredSection.tsx     |  4 +-
 .../Page/examples/PageGroupSection.tsx        |  4 +-
 .../Page/examples/PageHorizontalNav.tsx       |  4 +-
 .../Page/examples/PageMainSectionPadding.tsx  |  4 +-
 .../Page/examples/PageMultipleSidebarBody.tsx |  4 +-
 .../Page/examples/PageUncontrolledNav.tsx     |  4 +-
 .../Page/examples/PageVerticalNav.tsx         |  4 +-
 .../Page/examples/PageWithOrWithoutFill.tsx   |  4 +-
 .../react-core/src/demos/DashboardWrapper.tsx |  4 +-
 .../examples/NotificationDrawerBasic.tsx      |  4 +-
 .../examples/NotificationDrawerGrouped.tsx    |  4 +-
 .../src/demos/RTL/examples/PaginatedTable.jsx |  2 +-
 .../src/demos/RTL/examples/PaginatedTable.tsx |  2 +-
 .../AlertGroupToastWithNotificationDrawer.tsx |  2 +-
 .../src/demos/examples/DashboardWrapper.js    |  4 +-
 ...stheadWithUtilitiesAndUserDropdownMenu.tsx |  2 +-
 .../src/demos/examples/Nav/NavDefault.tsx     |  2 +-
 .../src/demos/examples/Nav/NavDrilldown.tsx   |  2 +-
 .../src/demos/examples/Nav/NavExpandable.tsx  |  2 +-
 .../src/demos/examples/Nav/NavFlyout.tsx      |  4 +-
 .../src/demos/examples/Nav/NavGrouped.tsx     |  2 +-
 .../src/demos/examples/Nav/NavHorizontal.tsx  |  9 +++-
 .../examples/Nav/NavHorizontalWithSubnav.tsx  |  4 +-
 .../src/demos/examples/Nav/NavManual.tsx      |  4 +-
 .../src/demos/examples/Nav/NavWithSubnav.tsx  |  2 +-
 .../Page/PageStickySectionBreadcrumb.tsx      |  2 +-
 .../examples/Page/PageStickySectionGroup.tsx  |  2 +-
 .../Page/PageStickySectionGroupAlternate.tsx  |  2 +-
 .../examples/Wizard/InPageWithDrawer.tsx      |  4 +-
 .../InPageWithDrawerInformationalStep.tsx     |  4 +-
 .../react-integration/demo-app-ts/src/App.tsx |  4 +-
 .../components/demos/PageDemo/PageDemo.tsx    |  4 +-
 .../PageDemo/PageManagedSidebarClosedDemo.tsx |  4 +-
 .../src/demos/DashboardWrapper.tsx            |  8 +--
 38 files changed, 95 insertions(+), 90 deletions(-)

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
index 2e1c75aa142..7d78e679ad7 100644
--- a/packages/react-core/src/components/Page/Page.tsx
+++ b/packages/react-core/src/components/Page/Page.tsx
@@ -19,8 +19,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <Masthead />) */
-  header?: React.ReactNode;
+  /** Masthead component (e.g. <Masthead />) */
+  masthead?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
@@ -214,7 +214,7 @@ class Page extends React.Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
-      header,
+      masthead,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -328,7 +328,7 @@ class Page extends React.Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {header}
+          {masthead}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>
diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx
index df6b5f63bbe..3ece4f4e226 100644
--- a/packages/react-core/src/components/Page/PageSidebar.tsx
+++ b/packages/react-core/src/components/Page/PageSidebar.tsx
@@ -10,7 +10,7 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /**
    * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
-   * the sidebar component or add a callback onSidebarToggle function into the PageHeader component
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index a67ec598808..a72f3400ee1 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -22,7 +22,7 @@ const props = {
 
 describe('Page', () => {
   test('Check page vertical layout example against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -30,7 +30,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -39,7 +39,7 @@ describe('Page', () => {
   });
 
   test('Check dark page against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = (
       <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
@@ -47,7 +47,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -56,11 +56,11 @@ describe('Page', () => {
   });
 
   test('Check page horizontal layout example against snapshot', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -69,7 +69,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -83,7 +83,7 @@ describe('Page', () => {
     );
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
         <PageSection variant="default">Section with default background</PageSection>
       </Page>
     );
@@ -93,7 +93,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -109,7 +109,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={<PageBreadcrumb />}
         breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
@@ -123,7 +123,7 @@ describe('Page', () => {
   });
 
   test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = () => (
       <Breadcrumb>
@@ -139,7 +139,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={<PageBreadcrumb />}
         breadcrumbProps={{
@@ -155,11 +155,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -179,11 +179,11 @@ describe('Page', () => {
   });
 
   test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
           <Breadcrumb>
             <BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -203,11 +203,11 @@ describe('Page', () => {
   });
 
   test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageBreadcrumb
           stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
         >
@@ -229,11 +229,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify nav is created - PageNavigation syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageNavigation>
           <Nav aria-label="Nav" variant="horizontal-subnav">
             <NavList>
@@ -256,11 +256,11 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
 
     const { asFragment } = render(
-      <Page {...props} header={Header} sidebar={Sidebar}>
+      <Page {...props} masthead={masthead} sidebar={Sidebar}>
         <PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
           <PageBreadcrumb>
             <Breadcrumb>
@@ -295,7 +295,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const crumb = (
       <PageBreadcrumb>
@@ -326,7 +326,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={crumb}
         horizontalSubnav={nav}
@@ -349,7 +349,7 @@ describe('Page', () => {
   });
 
   test('Check page to verify skip to content points to main content region', () => {
-    const Header = <Masthead />;
+    const masthead = <Masthead />;
     const Sidebar = <PageSidebar isSidebarOpen />;
     const PageBreadcrumb = (
       <Breadcrumb>
@@ -367,7 +367,7 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page
         {...props}
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         breadcrumb={PageBreadcrumb}
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index b9acc0e84b5..f50ff195063 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -24,7 +24,7 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
 
 A page will typically contain the following components:
 
-- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
   - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
index 273f2f8219e..99d8b8f1018 100644
--- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
@@ -35,7 +35,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -64,7 +64,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection isWidthLimited isCenterAligned>
         <Card>
           <CardBody>
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index f4a8bca669e..62d3dc190c3 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -39,7 +39,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -68,7 +68,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageGroup>
         <PageNavigation>
           <Nav aria-label="Group section navigation" variant="horizontal-subnav">
diff --git a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
index 983ce3336b9..27deb42f7c7 100644
--- a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
@@ -21,7 +21,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead inset={{ default: 'insetXs' }}>
       <MastheadMain>
         <MastheadBrand href="https://patternfly.org" target="_blank">
@@ -33,7 +33,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header}>
+    <Page masthead={masthead}>
       <PageSection>Section 1</PageSection>
       <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index cc2d3cdfcb9..a014421391c 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -31,7 +31,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section with default padding</PageSection>
       <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
       <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
index eacf5f12b53..76aba098e21 100644
--- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -31,7 +31,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -64,7 +64,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection>Section 2</PageSection>
       <PageSection>Section 3</PageSection>
diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
index 4357d19b541..0547fada1c6 100644
--- a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
@@ -25,7 +25,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
@@ -48,7 +48,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page isManagedSidebar header={header} sidebar={sidebar}>
+    <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection>Section 2</PageSection>
       <PageSection>Section 3</PageSection>
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index d339c51e088..1d023602b96 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -31,7 +31,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
       <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
index f9efff9fe4b..a174a424d22 100644
--- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
+++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
@@ -31,7 +31,7 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -60,7 +60,7 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={header} sidebar={sidebar}>
+    <Page masthead={masthead} sidebar={sidebar}>
       <PageSection>A default page section</PageSection>
       <PageSection isFilled={true}>This section fills the available space.</PageSection>
       <PageSection isFilled={false}>
diff --git a/packages/react-core/src/demos/DashboardWrapper.tsx b/packages/react-core/src/demos/DashboardWrapper.tsx
index 73a35d7219b..8dd074b6d21 100644
--- a/packages/react-core/src/demos/DashboardWrapper.tsx
+++ b/packages/react-core/src/demos/DashboardWrapper.tsx
@@ -49,7 +49,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
   children,
   mainContainerId,
   breadcrumb,
-  header,
+  masthead,
   sidebar,
   sidebarNavOpen,
   onPageResize,
@@ -106,7 +106,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
 
   return (
     <Page
-      header={header ?? <DashboardHeader />}
+      masthead={masthead ?? <DashboardHeader />}
       sidebar={sidebar ?? _sidebar}
       isManagedSidebar
       skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index a5b7926f9b6..44018fe4caf 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -262,7 +262,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -521,7 +521,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         notificationDrawer={notificationDrawer}
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index e16777f752c..19cbf98d21f 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -312,7 +312,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -760,7 +760,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         notificationDrawer={notificationDrawer}
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index 5b4b2e156fc..d45210b4358 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -436,7 +436,7 @@ export const PaginatedTableAction = () => {
 
   return (
     <React.Fragment>
-      <Page sidebar={sidebar} header={masthead} isManagedSidebar>
+      <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
             {Object.keys(breadcrumbItems).map((key, idx, arr) => (
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index 61173162015..1039a853e13 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -462,7 +462,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Page sidebar={sidebar} header={masthead} isManagedSidebar>
+      <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
             {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => (
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index eb31fdf78e0..991b5682a8a 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -310,7 +310,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
 
   return (
     <DashboardWrapper
-      header={<DashboardHeader notificationBadge={notificationBadge} />}
+      masthead={<DashboardHeader notificationBadge={notificationBadge} />}
       mainContainerId="main-content-page-layout-default-nav"
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}
diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js
index 980eef3abc5..84d0e124a7f 100644
--- a/packages/react-core/src/demos/examples/DashboardWrapper.js
+++ b/packages/react-core/src/demos/examples/DashboardWrapper.js
@@ -55,7 +55,7 @@ export default class DashboardWrapper extends React.Component {
       children,
       mainContainerId,
       breadcrumb,
-      header,
+      masthead,
       sidebar,
       sidebarNavOpen,
       onPageResize = () => {},
@@ -106,7 +106,7 @@ export default class DashboardWrapper extends React.Component {
 
     return (
       <Page
-        header={header !== undefined ? header : <DashboardHeader />}
+        masthead={masthead !== undefined ? masthead : <DashboardHeader />}
         sidebar={sidebar !== undefined ? sidebar : _sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 2d5a6a9ab12..225a6e40a57 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -521,7 +521,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       sidebar={sidebar}
       isManagedSidebar
       skipToContent={pageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
index 1b4f8be7948..6a9e0cfbed7 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
@@ -64,7 +64,7 @@ export const NavDefault: React.FunctionComponent = () => {
   return (
     <>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
index de84140dfc6..ac9229e303f 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -128,7 +128,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
   );
 
   return (
-    <Page header={<DashboardHeader />} sidebar={sidebar}>
+    <Page masthead={<DashboardHeader />} sidebar={sidebar}>
       <PageSection>
         <strong>Nav Layer: </strong>
         {navLayer}
diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
index adef9ed9f0e..ae2391ebd8f 100644
--- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
@@ -90,7 +90,7 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index b9e6cf5ed9d..52b8ae6bf6c 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -215,7 +215,7 @@ export const NavFlyout: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -263,7 +263,7 @@ export const NavFlyout: React.FunctionComponent = () => {
 
   return (
     <Page
-      header={Header}
+      masthead={masthead}
       sidebar={Sidebar}
       onPageResize={onPageResize}
       skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
index 296edfb0b2c..2e76014e170 100644
--- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
@@ -73,7 +73,7 @@ export const NavGrouped: React.FunctionComponent = () => {
   return (
     <>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 211db676128..85eea8b9b48 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -193,7 +193,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
       </ToolbarContent>
     </Toolbar>
   );
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadMain>
         <MastheadBrand>
@@ -209,7 +209,12 @@ export const NavHorizontal: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Page header={Header} skipToContent={PageSkipToContent} breadcrumb={DashboardBreadcrumb} mainContainerId={pageId}>
+      <Page
+        masthead={masthead}
+        skipToContent={PageSkipToContent}
+        breadcrumb={DashboardBreadcrumb}
+        mainContainerId={pageId}
+      >
         <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index e45c2e7960f..03fcd7bb927 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -242,7 +242,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
       </ToolbarContent>
     </Toolbar>
   );
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -263,7 +263,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Page header={Header} skipToContent={PageSkipToContent} mainContainerId={pageId}>
+      <Page masthead={masthead} skipToContent={PageSkipToContent} mainContainerId={pageId}>
         <PageSection type={PageSectionTypes.subNav} isWidthLimited>
           {SubNav}
         </PageSection>
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index 6576ce96001..c7f29257c4d 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -209,7 +209,7 @@ export const NavManual: React.FunctionComponent = () => {
       </ToolbarContent>
     </Toolbar>
   );
-  const Header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton
@@ -240,7 +240,7 @@ export const NavManual: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         onPageResize={onPageResize}
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
index 9a25394f580..9405cc94df4 100644
--- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
@@ -103,7 +103,7 @@ export const NavWithSubnav: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={<DashboardHeader />}
+        masthead={<DashboardHeader />}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 39dff1f8a09..e235a7adb93 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -256,7 +256,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       sidebar={sidebar}
       isManagedSidebar
       skipToContent={pageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 1ce3e7bd3e2..b3b117bc94f 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -256,7 +256,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       sidebar={sidebar}
       isManagedSidebar
       skipToContent={pageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index c268083c9c3..1e75356386b 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -248,7 +248,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       sidebar={sidebar}
       isManagedSidebar
       skipToContent={pageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
index d6255d0e126..f3c04ff8c3b 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
@@ -80,7 +80,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     </Nav>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead id="basic">
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -151,7 +151,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
index a001106936c..409556631d0 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
@@ -80,7 +80,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     </Nav>
   );
 
-  const Header = (
+  const masthead = (
     <Masthead id="basic">
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -156,7 +156,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
   return (
     <React.Fragment>
       <Page
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
index 95e2094094c..f4a83e455a1 100755
--- a/packages/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -127,7 +127,7 @@ class App extends React.Component<{}, AppState> {
       </Toolbar>
     );
 
-    const AppHeader = (
+    const AppMasthead = (
       <Masthead>
         <MastheadToggle>
           <PageToggleButton onSidebarToggle={this.onNavToggle} variant="plain" aria-label="Global navigation">
@@ -166,7 +166,7 @@ class App extends React.Component<{}, AppState> {
     return (
       <Router>
         <Page
-          header={AppHeader}
+          masthead={AppMasthead}
           sidebar={AppSidebar}
           skipToContent={this.getSkipToContentLink()}
           isManagedSidebar
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
index 4082726f423..94d0b330ddb 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -70,7 +70,7 @@ export class PageDemo extends Component {
       </Toolbar>
     );
 
-    const Header = (
+    const masthead = (
       <Masthead>
         <MastheadToggle>
           <PageToggleButton variant="plain" aria-label="Global navigation">
@@ -95,7 +95,7 @@ export class PageDemo extends Component {
       <Page
         role={pageRole}
         id="page-demo"
-        header={Header}
+        masthead={masthead}
         sidebar={Sidebar}
         mainContainerId={pageId}
         skipToContent={PageSkipToContent}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
index 606fb4db097..469113cc396 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
@@ -25,7 +25,7 @@ export const PageManagedSidebarClosedDemo: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const header = (
+  const masthead = (
     <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
@@ -46,7 +46,7 @@ export const PageManagedSidebarClosedDemo: React.FunctionComponent = () => {
   );
 
   return (
-    <Page id="page-managed-sidebar-closed-demo" isManagedSidebar header={header} sidebar={sidebar}>
+    <Page id="page-managed-sidebar-closed-demo" isManagedSidebar masthead={masthead} sidebar={sidebar}>
       <PageSection>Section </PageSection>
     </Page>
   );
diff --git a/packages/react-table/src/demos/DashboardWrapper.tsx b/packages/react-table/src/demos/DashboardWrapper.tsx
index 6aee69d35dc..135bb1f4565 100644
--- a/packages/react-table/src/demos/DashboardWrapper.tsx
+++ b/packages/react-table/src/demos/DashboardWrapper.tsx
@@ -26,8 +26,8 @@ interface DashboardWrapperProps {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <Masthead />) */
-  header?: React.ReactNode;
+  /** Masthead component (e.g. <Masthead />) */
+  masthead?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
@@ -120,7 +120,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
   children,
   mainContainerId,
   breadcrumb,
-  header,
+  masthead,
   sidebar,
   sidebarNavOpen,
   onPageResize,
@@ -177,7 +177,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
 
   return (
     <Page
-      header={header ?? <DashboardHeader />}
+      masthead={masthead ?? <DashboardHeader />}
       sidebar={sidebar ?? _sidebar}
       isManagedSidebar
       skipToContent={PageSkipToContent}