Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Jun 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Page/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />) */
Expand Down Expand Up @@ -214,7 +214,7 @@ class Page extends React.Component<PageProps, PageState> {
isBreadcrumbWidthLimited,
className,
children,
header,
masthead,
sidebar,
notificationDrawer,
isNotificationDrawerExpanded,
Expand Down Expand Up @@ -328,7 +328,7 @@ class Page extends React.Component<PageProps, PageState> {
)}
>
{skipToContent}
{header}
{masthead}
{sidebar}
{notificationDrawer && (
<div className={css(styles.pageDrawer)}>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Page/PageSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
52 changes: 26 additions & 26 deletions packages/react-core/src/components/Page/__tests__/Page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ 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>
</PageSidebar>
);

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageSection variant="default">Section with default background</PageSection>
</Page>
);
Expand All @@ -39,15 +39,15 @@ describe('Page', () => {
});

test('Check dark page against snapshot', () => {
const Header = <Masthead />;
const masthead = <Masthead />;
const Sidebar = (
<PageSidebar isSidebarOpen>
<PageSidebarBody>Navigation</PageSidebarBody>
</PageSidebar>
);

const { asFragment } = render(
<Page {...props} header={Header} sidebar={Sidebar}>
<Page {...props} masthead={masthead} sidebar={Sidebar}>
<PageSection variant="default">Section with default background</PageSection>
</Page>
);
Expand All @@ -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>
);
Expand All @@ -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>
Expand All @@ -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>
);
Expand All @@ -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>
Expand All @@ -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' } }}
Expand All @@ -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>
Expand All @@ -139,7 +139,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={<PageBreadcrumb />}
breadcrumbProps={{
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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' }}
>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -326,7 +326,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={crumb}
horizontalSubnav={nav}
Expand All @@ -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>
Expand All @@ -367,7 +367,7 @@ describe('Page', () => {
const { asFragment } = render(
<Page
{...props}
header={Header}
masthead={masthead}
sidebar={Sidebar}
breadcrumb={PageBreadcrumb}
skipToContent={PageSkipToContent}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Page/examples/Page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageGroupSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const PageGroupSection: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
</Toolbar>
);

const header = (
const masthead = (
<Masthead>
<MastheadToggle>
<PageToggleButton
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading