feat: add page header by mcoker · Pull Request #8567 · patternfly/patternfly

mcoker · 2026-08-25T20:24:42Z

fixes #8561

Summary by CodeRabbit

New Features
- Added support for custom page headers, including optional semantic <header> elements.
- Improved page layouts with headers, sidebars, and main content.
- Updated responsive behavior for custom headers and docked layouts.
Documentation
- Added a custom header usage example and documented the page header class.
Bug Fixes
- Improved header visibility and layout behavior across docked desktop and mobile views.
- Refined hamburger menu interactions in compass layouts.

coderabbitai · 2026-08-25T20:24:50Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 16b1d5b5-dcc1-42fd-8f5a-1795bbea958f

📥 Commits

Reviewing files that changed from the base of the PR and between 29a4522 and cc42bcd.

📒 Files selected for processing (1)

src/patternfly/components/Compass/compass.scss

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.

Walkthrough

The Page component now supports a configurable header rendered as either a <header> or <div>. Page and Compass layout rules position, hide, and style the header with the masthead. Documentation includes a custom header example and usage entry.

Changes

Page header support

Layer / File(s)	Summary
Header partial and documentation example `src/patternfly/components/Page/page-header.hbs`, `src/patternfly/components/Page/examples/Page.md`	Adds conditional header markup with optional modifiers and attributes. Documents a custom header example and the `.pf-v6-c-page__header` usage.
Page header layout integration `src/patternfly/components/Page/page.scss`	Adds header grid placement and updates docked visibility, hamburger selectors, masthead columns, and main-container selectors.
Compass header integration `src/patternfly/components/Compass/compass.scss`	Updates docked header and masthead placement, visibility, reset styles, and hamburger hover and focus selectors.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to cc42b

The page header and related styling changes have no actionable merge-blocking risk identified; the PR is merge-ready after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant PageExample as Page example
  participant PageHeaderPartial as page-header partial
  participant PageStyles as Page styles
  participant CompassStyles as Compass styles
  PageExample->>PageHeaderPartial: render configurable page header
  PageHeaderPartial-->>PageExample: emit header markup and content
  PageExample->>PageStyles: apply header and masthead grid rules
  PageStyles->>CompassStyles: apply docked header visibility and placement rules

Suggested reviewers: jcmill

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The Compass masthead styling changes are not tied to the Page header requirements in issue `#8561` and appear unrelated to the stated objective.	Remove the unrelated Compass changes or link them to a documented requirement for the Page header implementation.
Linked Issues check	❓ Inconclusive	The changes add a Page header partial and documentation example, but the provided summary does not show Page masthead prop integration or tests required by issue `#8561`.	Confirm or add the Page masthead prop integration and automated tests. Provide evidence that the change remains backward compatible.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title follows conventional commit syntax with the feat: type and clearly describes the new Page header feature.

Fix all pre-merge checks with AI

Warning

Git: CodeRabbit could not clone the repository, so clone-backed analysis was skipped and this review may be incomplete. Verify repository clone access, such as SSH credentials, before requesting another full review. If clone access is intentionally unavailable, use path_filters to narrow the review scope.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

patternfly-build · 2026-08-25T20:36:36Z

Preview: https://pf-pr-8567.surge.sh

A11y report: https://pf-pr-8567-a11y.surge.sh

coderabbitai · 2026-08-27T18:47:09Z

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

coderabbitai · 2026-08-27T18:55:55Z

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

jcmill

🍟

patternfly-build · 2026-08-27T20:50:59Z

🎉 This PR is included in version 6.6.0-prerelease.39 🎉

The release is available on:

Your semantic-release bot 📦🚀

rebeccaalpert mentioned this pull request Aug 26, 2026

feat(Page): Add PageHeader component patternfly/patternfly-react#12632

Open

mcoker force-pushed the issue-8561 branch from c123519 to a98b647 Compare August 26, 2026 23:31

feat: add page header

3fa405f

mcoker requested a review from jcmill August 27, 2026 14:25

mcoker marked this pull request as ready for review August 27, 2026 14:25

mcoker force-pushed the issue-8561 branch from a98b647 to a5002c0 Compare August 27, 2026 18:46

chore: remove support for masthead in page header

29a4522

mcoker force-pushed the issue-8561 branch from a5002c0 to 29a4522 Compare August 27, 2026 18:54

chore: add support for compass

cc42bcd

jcmill approved these changes Aug 27, 2026

View reviewed changes

mcoker merged commit ddf6f1a into patternfly:main Aug 27, 2026
6 checks passed

mcoker deleted the issue-8561 branch August 27, 2026 20:40

patternfly-build added the released on @prerelease label Aug 27, 2026

Navigation Menu

Uh oh!

feat: add page header - #8567

feat: add page header#8567
mcoker merged 3 commits into
patternfly:mainfrom
mcoker:issue-8561

mcoker commented Aug 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 25, 2026 •

edited

Loading

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

patternfly-build commented Aug 25, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 27, 2026

Uh oh!

coderabbitai Bot commented Aug 27, 2026

Uh oh!

jcmill left a comment

Uh oh!

Uh oh!

patternfly-build commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

mcoker commented Aug 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

patternfly-build commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 27, 2026

Uh oh!

coderabbitai Bot commented Aug 27, 2026

Uh oh!

jcmill left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mcoker commented Aug 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 25, 2026 •

edited

Loading

patternfly-build commented Aug 25, 2026 •

edited

Loading