fix(docked): add min width on icon elements by jcmill · Pull Request #8431 · patternfly/patternfly

jcmill · 2026-05-26T20:28:41Z

Closes: #8333

Sets min-width: 1lh on icon elements. This mimics the nav component's icon spacing pattern for docked navigation.

Summary by CodeRabbit

Style
- Enforced a minimum icon width in docked/text-expanded button layouts to keep icons aligned and prevent layout shifts when text visibility changes.
- Applied the same minimum-width constraint to menu toggle icons in docked/text-expanded layouts for more consistent spacing and visual balance across controls.

coderabbitai · 2026-05-26T20:32:34Z

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: af3d4701-08d7-407c-b88d-8e1a725846f7

📥 Commits

Reviewing files that changed from the base of the PR and between a7e2f7a and 1d89c63.

📒 Files selected for processing (2)

src/patternfly/components/Button/button.scss
src/patternfly/components/MenuToggle/menu-toggle.scss

🚧 Files skipped from review as they are similar to previous changes (1)

src/patternfly/components/Button/button.scss

Walkthrough

Adds min-width: 1lh to Button and MenuToggle icon elements when in .pf-m-docked (and related .pf-m-text-expanded) states to constrain icon horizontal sizing.

Changes

Icon spacing in docked nav

Layer / File(s)	Summary
Add min-width constraint for docked icons `src/patternfly/components/Button/button.scss`, `src/patternfly/components/MenuToggle/menu-toggle.scss`	Button and MenuToggle icon elements receive `min-width: 1lh` inside the `.pf-m-docked` (and `.pf-m-text-expanded` where applicable) rules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

patternfly/patternfly#8238: Modifies min-width: 1lh behavior for button/menu-toggle icons in the same Sass files.
patternfly/patternfly#8308: Updates docked-state styling in button.scss and menu-toggle.scss, overlapping similar selectors.
patternfly/patternfly#8330: Touches the dock/text-expanded state selectors in Button and MenuToggle components.

Suggested labels

released on @prerelease``

Suggested reviewers

mcoker
thatblindgeye
kmcfaul

🚥 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 title follows conventional commit format with 'fix' prefix and clearly describes the main change of adding min-width to icon elements in docked state.
Linked Issues check	✅ Passed	The PR successfully implements the requirement from `#8333` by adding min-width: 1lh to button and menu-toggle icon elements in the docked state.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of adding min-width styling to icon elements in docked components; no extraneous modifications detected.

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

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

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-05-26T20:34:45Z

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

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

coderabbitai

🧹 Nitpick comments (1)

src/patternfly/components/MenuToggle/menu-toggle.scss (1)
467-468: ⚡ Quick win

Remove commented-out code for clarity.

The commented-out selector pattern suggests an alternative implementation approach was considered but not pursued. Since the decision has been made to nest the icon constraint within the @at-root block above (lines 462-464), this commented code should be removed to keep the codebase clean.
🧹 Remove commented code
     .#{$menu-toggle}__icon {
       min-width: 1lh;
     }
   }
-
-  // &:where(.pf-m-docked, .pf-m-text-expanded) {
-  // }
 }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/patternfly/components/MenuToggle/menu-toggle.scss` around lines 467 -
468, Remove the leftover commented selector block in menu-toggle.scss — delete
the two commented lines containing "&:where(.pf-m-docked, .pf-m-text-expanded) {
}" (the commented-out selector immediately below the `@at-root` icon constraint)
so the file no longer contains that unused commented code and stays clean.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/patternfly/components/MenuToggle/menu-toggle.scss`:
- Around line 467-468: Remove the leftover commented selector block in
menu-toggle.scss — delete the two commented lines containing
"&:where(.pf-m-docked, .pf-m-text-expanded) { }" (the commented-out selector
immediately below the `@at-root` icon constraint) so the file no longer contains
that unused commented code and stays clean.

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: c0650984-a4b4-4cfb-a644-e65a41f3644c

📥 Commits

Reviewing files that changed from the base of the PR and between 15eec94 and 36ca8c1.

📒 Files selected for processing (2)

src/patternfly/components/Button/button.scss
src/patternfly/components/MenuToggle/menu-toggle.scss

coderabbitai · 2026-05-28T13:45:02Z

Actionable comments posted: 0

mcoker

🚀

patternfly-build · 2026-06-08T20:10:51Z

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

The release is available on:

Your semantic-release bot 📦🚀

fix(docked): add min width to icon class for docked and text expanded

36ca8c1

jcmill requested a review from mcoker May 26, 2026 20:28

coderabbitai Bot reviewed May 26, 2026

View reviewed changes

fix(docked): update menu-toggle

a7e2f7a

mcoker requested changes May 27, 2026

View reviewed changes

Comment thread src/patternfly/components/Button/button.scss Outdated

Comment thread src/patternfly/components/MenuToggle/menu-toggle.scss Outdated

fix(docked): move icon and property to docked block

1d89c63

jcmill requested a review from mcoker May 28, 2026 14:01

mcoker approved these changes Jun 8, 2026

View reviewed changes

mcoker merged commit 29ff711 into patternfly:main Jun 8, 2026
6 checks passed

patternfly-build added the released on @prerelease label Jun 8, 2026

jcmill deleted the bug/8333-menu-toggle-button-icon-width branch June 12, 2026 14:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(docked): add min width on icon elements#8431

fix(docked): add min width on icon elements#8431
mcoker merged 3 commits into
patternfly:mainfrom
jcmill:bug/8333-menu-toggle-button-icon-width

jcmill commented May 26, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 26, 2026 •

edited

Loading

Review ran into problems

Uh oh!

patternfly-build commented May 26, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Review ran into problems

Uh oh!

patternfly-build commented May 26, 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!

Uh oh!

Uh oh!

coderabbitai Bot commented May 28, 2026

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jcmill commented May 26, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 26, 2026 •

edited

Loading

patternfly-build commented May 26, 2026 •

edited

Loading