Skip to content

Commit 37dd6ad

Browse files
adamviktoraadamviktora
authored
feat(Page): rename 'header' prop to 'masthead' (#10454)
1 parent 7b22ff2 commit 37dd6ad

38 files changed

+95
-90
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
1919
children?: React.ReactNode;
2020
/** Additional classes added to the page layout */
2121
className?: string;
22-
/** Header component (e.g. <Masthead />) */
23-
header?: React.ReactNode;
22+
/** Masthead component (e.g. <Masthead />) */
23+
masthead?: React.ReactNode;
2424
/** Sidebar component for a side nav (e.g. <PageSidebar />) */
2525
sidebar?: React.ReactNode;
2626
/** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
@@ -220,7 +220,7 @@ class Page extends React.Component<PageProps, PageState> {
220220
isBreadcrumbWidthLimited,
221221
className,
222222
children,
223-
header,
223+
masthead,
224224
sidebar,
225225
notificationDrawer,
226226
isNotificationDrawerExpanded,
@@ -341,7 +341,7 @@ class Page extends React.Component<PageProps, PageState> {
341341
)}
342342
>
343343
{skipToContent}
344-
{header}
344+
{masthead}
345345
{sidebar}
346346
{notificationDrawer && (
347347
<div className={css(styles.pageDrawer)}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
1010
children?: React.ReactNode;
1111
/**
1212
* If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
13-
* the sidebar component or add a callback onSidebarToggle function into the PageHeader component
13+
* the sidebar component or add a callback onSidebarToggle function into the Masthead component
1414
*/
1515
isManagedSidebar?: boolean;
1616
/** 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/__tests__/Page.test.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ const props = {
2222

2323
describe('Page', () => {
2424
test('Check page vertical layout example against snapshot', () => {
25-
const Header = <Masthead />;
25+
const masthead = <Masthead />;
2626
const Sidebar = (
2727
<PageSidebar isSidebarOpen>
2828
<PageSidebarBody>Navigation</PageSidebarBody>
2929
</PageSidebar>
3030
);
3131

3232
const { asFragment } = render(
33-
<Page {...props} header={Header} sidebar={Sidebar}>
33+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
3434
<PageSection variant="default">Section with default background</PageSection>
3535
</Page>
3636
);
@@ -39,15 +39,15 @@ describe('Page', () => {
3939
});
4040

4141
test('Check dark page against snapshot', () => {
42-
const Header = <Masthead />;
42+
const masthead = <Masthead />;
4343
const Sidebar = (
4444
<PageSidebar isSidebarOpen>
4545
<PageSidebarBody>Navigation</PageSidebarBody>
4646
</PageSidebar>
4747
);
4848

4949
const { asFragment } = render(
50-
<Page {...props} header={Header} sidebar={Sidebar}>
50+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
5151
<PageSection variant="default">Section with default background</PageSection>
5252
</Page>
5353
);
@@ -56,11 +56,11 @@ describe('Page', () => {
5656
});
5757

5858
test('Check page horizontal layout example against snapshot', () => {
59-
const Header = <Masthead />;
59+
const masthead = <Masthead />;
6060
const Sidebar = <PageSidebar isSidebarOpen />;
6161

6262
const { asFragment } = render(
63-
<Page {...props} header={Header} sidebar={Sidebar}>
63+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
6464
<PageSection variant="default">Section with default background</PageSection>
6565
</Page>
6666
);
@@ -69,7 +69,7 @@ describe('Page', () => {
6969
});
7070

7171
test('Check page to verify breadcrumb is created', () => {
72-
const Header = <Masthead />;
72+
const masthead = <Masthead />;
7373
const Sidebar = <PageSidebar isSidebarOpen />;
7474
const PageBreadcrumb = () => (
7575
<Breadcrumb>
@@ -83,7 +83,7 @@ describe('Page', () => {
8383
);
8484

8585
const { asFragment } = render(
86-
<Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
86+
<Page {...props} masthead={masthead} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
8787
<PageSection variant="default">Section with default background</PageSection>
8888
</Page>
8989
);
@@ -93,7 +93,7 @@ describe('Page', () => {
9393
});
9494

9595
test('Verify sticky top breadcrumb on all height breakpoints', () => {
96-
const Header = <Masthead />;
96+
const masthead = <Masthead />;
9797
const Sidebar = <PageSidebar isSidebarOpen />;
9898
const PageBreadcrumb = () => (
9999
<Breadcrumb>
@@ -109,7 +109,7 @@ describe('Page', () => {
109109
const { asFragment } = render(
110110
<Page
111111
{...props}
112-
header={Header}
112+
masthead={masthead}
113113
sidebar={Sidebar}
114114
breadcrumb={<PageBreadcrumb />}
115115
breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
@@ -123,7 +123,7 @@ describe('Page', () => {
123123
});
124124

125125
test('Verify sticky bottom breadcrumb on all height breakpoints', () => {
126-
const Header = <Masthead />;
126+
const masthead = <Masthead />;
127127
const Sidebar = <PageSidebar isSidebarOpen />;
128128
const PageBreadcrumb = () => (
129129
<Breadcrumb>
@@ -139,7 +139,7 @@ describe('Page', () => {
139139
const { asFragment } = render(
140140
<Page
141141
{...props}
142-
header={Header}
142+
masthead={masthead}
143143
sidebar={Sidebar}
144144
breadcrumb={<PageBreadcrumb />}
145145
breadcrumbProps={{
@@ -155,11 +155,11 @@ describe('Page', () => {
155155
});
156156

157157
test('Check page to verify breadcrumb is created - PageBreadcrumb syntax', () => {
158-
const Header = <Masthead />;
158+
const masthead = <Masthead />;
159159
const Sidebar = <PageSidebar isSidebarOpen />;
160160

161161
const { asFragment } = render(
162-
<Page {...props} header={Header} sidebar={Sidebar}>
162+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
163163
<PageBreadcrumb>
164164
<Breadcrumb>
165165
<BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -179,11 +179,11 @@ describe('Page', () => {
179179
});
180180

181181
test('Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
182-
const Header = <Masthead />;
182+
const masthead = <Masthead />;
183183
const Sidebar = <PageSidebar isSidebarOpen />;
184184

185185
const { asFragment } = render(
186-
<Page {...props} header={Header} sidebar={Sidebar}>
186+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
187187
<PageBreadcrumb stickyOnBreakpoint={{ sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' }}>
188188
<Breadcrumb>
189189
<BreadcrumbItem>Section Home</BreadcrumbItem>
@@ -203,11 +203,11 @@ describe('Page', () => {
203203
});
204204

205205
test('Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax', () => {
206-
const Header = <Masthead />;
206+
const masthead = <Masthead />;
207207
const Sidebar = <PageSidebar isSidebarOpen />;
208208

209209
const { asFragment } = render(
210-
<Page {...props} header={Header} sidebar={Sidebar}>
210+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
211211
<PageBreadcrumb
212212
stickyOnBreakpoint={{ sm: 'bottom', md: 'bottom', lg: 'bottom', xl: 'bottom', '2xl': 'bottom' }}
213213
>
@@ -229,11 +229,11 @@ describe('Page', () => {
229229
});
230230

231231
test('Check page to verify nav is created - PageNavigation syntax', () => {
232-
const Header = <Masthead />;
232+
const masthead = <Masthead />;
233233
const Sidebar = <PageSidebar isSidebarOpen />;
234234

235235
const { asFragment } = render(
236-
<Page {...props} header={Header} sidebar={Sidebar}>
236+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
237237
<PageNavigation>
238238
<Nav aria-label="Nav" variant="horizontal-subnav">
239239
<NavList>
@@ -256,11 +256,11 @@ describe('Page', () => {
256256
});
257257

258258
test('Check page to verify grouped nav and breadcrumb - new components syntax', () => {
259-
const Header = <Masthead />;
259+
const masthead = <Masthead />;
260260
const Sidebar = <PageSidebar isSidebarOpen />;
261261

262262
const { asFragment } = render(
263-
<Page {...props} header={Header} sidebar={Sidebar}>
263+
<Page {...props} masthead={masthead} sidebar={Sidebar}>
264264
<PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>
265265
<PageBreadcrumb>
266266
<Breadcrumb>
@@ -295,7 +295,7 @@ describe('Page', () => {
295295
});
296296

297297
test('Check page to verify grouped nav and breadcrumb - old / props syntax', () => {
298-
const Header = <Masthead />;
298+
const masthead = <Masthead />;
299299
const Sidebar = <PageSidebar isSidebarOpen />;
300300
const crumb = (
301301
<PageBreadcrumb>
@@ -326,7 +326,7 @@ describe('Page', () => {
326326
const { asFragment } = render(
327327
<Page
328328
{...props}
329-
header={Header}
329+
masthead={masthead}
330330
sidebar={Sidebar}
331331
breadcrumb={crumb}
332332
horizontalSubnav={nav}
@@ -349,7 +349,7 @@ describe('Page', () => {
349349
});
350350

351351
test('Check page to verify skip to content points to main content region', () => {
352-
const Header = <Masthead />;
352+
const masthead = <Masthead />;
353353
const Sidebar = <PageSidebar isSidebarOpen />;
354354
const PageBreadcrumb = (
355355
<Breadcrumb>
@@ -367,7 +367,7 @@ describe('Page', () => {
367367
const { asFragment } = render(
368368
<Page
369369
{...props}
370-
header={Header}
370+
masthead={masthead}
371371
sidebar={Sidebar}
372372
breadcrumb={PageBreadcrumb}
373373
skipToContent={PageSkipToContent}

‎packages/react-core/src/components/Page/examples/Page.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist
2424

2525
A page will typically contain the following components:
2626

27-
- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
27+
- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
2828
- Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
2929
- 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
3030
- 1 or more `<PageSection>` components

‎packages/react-core/src/components/Page/examples/PageCenteredSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
3535
</Toolbar>
3636
);
3737

38-
const header = (
38+
const masthead = (
3939
<Masthead>
4040
<MastheadToggle>
4141
<PageToggleButton
@@ -64,7 +64,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
6464
);
6565

6666
return (
67-
<Page header={header} sidebar={sidebar}>
67+
<Page masthead={masthead} sidebar={sidebar}>
6868
<PageSection isWidthLimited isCenterAligned>
6969
<Card>
7070
<CardBody>

‎packages/react-core/src/components/Page/examples/PageGroupSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
3939
</Toolbar>
4040
);
4141

42-
const header = (
42+
const masthead = (
4343
<Masthead>
4444
<MastheadToggle>
4545
<PageToggleButton
@@ -68,7 +68,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
6868
);
6969

7070
return (
71-
<Page header={header} sidebar={sidebar}>
71+
<Page masthead={masthead} sidebar={sidebar}>
7272
<PageGroup>
7373
<PageNavigation>
7474
<Nav aria-label="Group section navigation" variant="horizontal-subnav">

‎packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
2121
</Toolbar>
2222
);
2323

24-
const header = (
24+
const masthead = (
2525
<Masthead inset={{ default: 'insetXs' }}>
2626
<MastheadMain>
2727
<MastheadBrand href="https://patternfly.org" target="_blank">
@@ -33,7 +33,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
3333
);
3434

3535
return (
36-
<Page header={header}>
36+
<Page masthead={masthead}>
3737
<PageSection>Section 1</PageSection>
3838
<PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
3939
<PageSection>Section 3</PageSection>

‎packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
3131
</Toolbar>
3232
);
3333

34-
const header = (
34+
const masthead = (
3535
<Masthead>
3636
<MastheadToggle>
3737
<PageToggleButton
@@ -60,7 +60,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
6060
);
6161

6262
return (
63-
<Page header={header} sidebar={sidebar}>
63+
<Page masthead={masthead} sidebar={sidebar}>
6464
<PageSection>Section with default padding</PageSection>
6565
<PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
6666
<PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>

‎packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
3131
</Toolbar>
3232
);
3333

34-
const header = (
34+
const masthead = (
3535
<Masthead>
3636
<MastheadToggle>
3737
<PageToggleButton
@@ -64,7 +64,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
6464
);
6565

6666
return (
67-
<Page header={header} sidebar={sidebar}>
67+
<Page masthead={masthead} sidebar={sidebar}>
6868
<PageSection>Section 1</PageSection>
6969
<PageSection>Section 2</PageSection>
7070
<PageSection>Section 3</PageSection>

‎packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
2525
</Toolbar>
2626
);
2727

28-
const header = (
28+
const masthead = (
2929
<Masthead>
3030
<MastheadToggle>
3131
<PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
@@ -48,7 +48,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
4848
);
4949

5050
return (
51-
<Page isManagedSidebar header={header} sidebar={sidebar}>
51+
<Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
5252
<PageSection>Section 1</PageSection>
5353
<PageSection>Section 2</PageSection>
5454
<PageSection>Section 3</PageSection>

0 commit comments

Comments
 (0)