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

patternfly · May 28, 2024 · eafa63f · eafa63f
1 parent a104a4b
commit eafa63f
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git 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/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/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/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-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}