feat(Toolbar,OverflowMenu): add support for responsive height by kmcfaul · Pull Request #8295 · patternfly/patternfly

kmcfaul · 2026-04-09T15:49:44Z

Updates the hidden-visible mixin to optionally create height breakpoints
Opts Toolbar into the height breakpoints
Adds vertical variant to OverflowMenu
Adds row-gap to OverflowMenu

Summary by CodeRabbit

New Features
- Vertical layout support for overflow menus with a vertical modifier, improved vertical spacing, and vertical-specific spacing variables.
- Height-based visibility breakpoints for toolbar items/groups to enable responsive hide/show by viewport height.
Documentation
- Added a vertical overflow menu example.
- Added a vertical toolbar example demonstrating height-based visibility controls.

coderabbitai · 2026-04-09T15:50:21Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

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

Run ID: c70f519e-885d-42e4-bf10-d4a344850620

📥 Commits

Reviewing files that changed from the base of the PR and between 2d140f4 and 4877145.

📒 Files selected for processing (1)

src/patternfly/components/OverflowMenu/examples/overflow-menu.md

Walkthrough

Adds a vertical OverflowMenu modifier (.pf-m-vertical) with row-gap custom properties and example/docs updates; extends pf-v6-hidden-visible mixin to optionally emit height-based visibility rules and updates Toolbar to enable height breakpoints for content, groups, and items.

Changes

Cohort / File(s)	Summary
Overflow Menu examples CSS `src/patternfly/components/OverflowMenu/examples/overflow-menu.css`	Extended dashed/padded and group-item padding/border removal selectors to include vertical overflow-menu variant (`#ws-core-c-overflow-menu-vertical`).
Overflow Menu docs & core SCSS `src/patternfly/components/OverflowMenu/examples/overflow-menu.md`, `src/patternfly/components/OverflowMenu/overflow-menu.scss`	Added a “Vertical” example (beta) and introduced `.pf-m-vertical` plus new row-gap CSS custom properties applied to container, content, groups, items, and specific button-group variants.
Toolbar docs & SCSS `src/patternfly/components/Toolbar/examples/Toolbar.md`, `src/patternfly/components/Toolbar/toolbar.scss`	Documented height-based visibility modifiers and enabled height-breakpoint rule generation by passing `$ifIncludeHeight: true` to `pf-v6-hidden-visible` for toolbar content, groups, and items; added vertical toolbar example using height visibility classes.
Sass utilities mixin `src/patternfly/sass-utilities/mixins.scss`	Updated `@mixin pf-v6-hidden-visible($val: "block", $ifIncludeHeight: false)` to accept `$ifIncludeHeight` and, when true, emit min-height media-query rules for `.pf-m-hidden-on--height` / `.pf-m-visible-on--height`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

chore: updates to support dart sass 3.0.0 #8048 — Modifies src/patternfly/sass-utilities/mixins.scss (related changes to the same mixin and its behavior).
#8031 — Issue requesting height-based visibility for toolbar actions; this PR implements height breakpoint support that addresses that objective.

Suggested labels

released on @prerelease``

Suggested reviewers

jcmill
srambach

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title follows conventional commit format with type 'feat', scopes 'Toolbar,OverflowMenu', and a clear description of adding responsive height support.
Linked Issues check	✅ Passed	The PR fully implements the requirements from issue `#8031`: updated hidden-visible mixin for height breakpoints, opted Toolbar into height breakpoints, added vertical variant to OverflowMenu, and added row-gap styling.
Out of Scope Changes check	✅ Passed	All changes are within scope of issue `#8031`, covering height-based responsive visibility for Toolbar, vertical OverflowMenu support, and foundational mixin updates for height media queries.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

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 and usage tips.}

patternfly-build · 2026-04-09T15:53:36Z

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

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

coderabbitai

🧹 Nitpick comments (1)

src/patternfly/components/OverflowMenu/examples/overflow-menu.md (1)
48-71: Document pf-m-vertical in the usage tables as well.

Nice addition of the vertical example. Please also add a .pf-m-vertical row to the “Usage” table (and/or relevant modifier table) so the new public modifier is discoverable without reading examples.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/OverflowMenu/examples/overflow-menu.md` around
lines 48 - 71, Add documentation for the new public modifier .pf-m-vertical to
the component's Usage/Modifiers table so it is discoverable outside examples:
update the OverflowMenu usage/modifier table to include a new row for
.pf-m-vertical (describe it as "vertical layout" or similar) and reference the
modifier in the table alongside existing modifiers for OverflowMenu so consumers
can find the pf-m-vertical flag without reading the example.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/patternfly/components/OverflowMenu/examples/overflow-menu.md`:
- Around line 48-71: Add documentation for the new public modifier
.pf-m-vertical to the component's Usage/Modifiers table so it is discoverable
outside examples: update the OverflowMenu usage/modifier table to include a new
row for .pf-m-vertical (describe it as "vertical layout" or similar) and
reference the modifier in the table alongside existing modifiers for
OverflowMenu so consumers can find the pf-m-vertical flag without reading the
example.

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 042e1eed-185e-4d72-8a60-ed201acd835b

📥 Commits

Reviewing files that changed from the base of the PR and between deaddd1 and ca893b0.

📒 Files selected for processing (6)

src/patternfly/components/OverflowMenu/examples/overflow-menu.css
src/patternfly/components/OverflowMenu/examples/overflow-menu.md
src/patternfly/components/OverflowMenu/overflow-menu.scss
src/patternfly/components/Toolbar/examples/Toolbar.md
src/patternfly/components/Toolbar/toolbar.scss
src/patternfly/sass-utilities/mixins.scss

mcoker

LGTM just one small docs update

mcoker

🚀

mcoker · 2026-04-10T19:51:54Z

@kmcfaul oops forgot one spot - can you document .pf-m-vertical as the first modifier in this table here - https://github.com/kmcfaul/patternfly/blob/b93f2a10a7e42b572bbe96d75b1eacce0db7fdb0/src/patternfly/components/OverflowMenu/examples/overflow-menu.md?plain=1#L253

Modifiers are usually grouped by the elements they apply to so .pf-m-vertical should be first since it applies to .pf-v6-c-overflow-menu and the others apply to __group

kmcfaul · 2026-04-10T20:06:46Z

Updated, LMK if the wording sounds good to you

patternfly-build · 2026-04-13T15:42:15Z

🎉 This PR is included in version 6.5.0-prerelease.68 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat(Toolbar,OverflowMenu): add support for responsive height

ca893b0

coderabbitai Bot reviewed Apr 9, 2026

View reviewed changes

feat(Toolbar): enable height breakpoint for content

2c658aa

mcoker reviewed Apr 10, 2026

View reviewed changes

Comment thread src/patternfly/components/Toolbar/examples/Toolbar.md Outdated

kmcfaul mentioned this pull request Apr 10, 2026

feat(Toolbar,OverflowMenu): support responsive height vis breakpoints patternfly/patternfly-react#12347

Merged

fix(docs): update and move hidden/visible line

b93f2a1

mcoker approved these changes Apr 10, 2026

View reviewed changes

docs(OverflowMenu): update docs for vertical modifier

2d140f4

fix(docs): makes vertical description more purpose driven

4877145

mcoker merged commit 11e02ee into patternfly:main Apr 13, 2026
5 checks passed

patternfly-build added the released on @prerelease label Apr 13, 2026

coderabbitai Bot mentioned this pull request Apr 14, 2026

Panel - scrollable modifier should not set max height by default #8310

Open

patternfly-build mentioned this pull request Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

coderabbitai Bot mentioned this pull request Jul 23, 2026

feat(toolbar): implement container queries #8025

Open

patternfly-build mentioned this pull request Jul 28, 2026

The automated release is failing 🚨 #8533

Closed

Navigation Menu

Uh oh!

feat(Toolbar,OverflowMenu): add support for responsive height - #8295

feat(Toolbar,OverflowMenu): add support for responsive height#8295
mcoker merged 5 commits into
patternfly:mainfrom
kmcfaul:8031-resp-height

kmcfaul commented Apr 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 9, 2026 •

edited

Loading

Reviews paused

Uh oh!

patternfly-build commented Apr 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

mcoker commented Apr 10, 2026

Uh oh!

kmcfaul commented Apr 10, 2026

Uh oh!

Uh oh!

patternfly-build commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

kmcfaul commented Apr 9, 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 Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker commented Apr 10, 2026

Uh oh!

kmcfaul commented Apr 10, 2026

Uh oh!

Uh oh!

patternfly-build commented Apr 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kmcfaul commented Apr 9, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 9, 2026 •

edited

Loading

patternfly-build commented Apr 9, 2026 •

edited

Loading