feat(Page): rename 'header' prop to 'masthead'

Author: adamviktora

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)}>

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 */

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

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}

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}

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}