fix: adjusted button and menu toggle icon size by mcoker · Pull Request #8238 · patternfly/patternfly

mcoker · 2026-03-23T19:26:41Z

Adjusted button/menu-toggle icon width and moved min-width back to the parent. Also addressed circle buttons to be a circle.

Backstop PDF

Full backstop report

Summary by CodeRabbit

Style
- Button: Adjusted default minimum width to improve consistent sizing across layouts.
- Circle button: Removed horizontal padding for a more compact circular appearance.
- Button icon: Removed enforced minimum icon width to allow more flexible icon layout.
- Menu toggle: Refined default minimum width for better alignment with other controls.

Adjusted button/menu-toggle icon width and moved min-width back to the parent. Also addressed circle buttons to be a circle.

coderabbitai · 2026-03-23T19:27:04Z

Walkthrough

Changed Button and MenuToggle SCSS: updated components' --MinWidth custom properties to compute from line-height plus vertical padding; removed min-width: 1lh from icon elements; added padding-inline: 0 to circle button modifier.

Changes

Cohort / File(s)	Summary
Button component `src/patternfly/components/Button/button.scss`	Updated `--#{$button}--MinWidth` from `initial` to `calc(1lh + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd))`; removed `min-width: 1lh` from `.#{$button}__icon`; added `padding-inline: 0` to `.pf-m-circle`.
MenuToggle component `src/patternfly/components/MenuToggle/menu-toggle.scss`	Updated `--#{$menu-toggle}--MinWidth` from `initial` to `calc(1lh + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd))`; removed `min-width: 1lh` from `.#{$menu-toggle}__icon`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

released on @prerelease``

Suggested reviewers

srambach
lboehling
kmcfaul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title follows conventional commit format with 'fix:' prefix and clearly describes the main changes (button/menu toggle icon size adjustment).
Linked Issues check	✅ Passed	The changes directly address the linked issue `#8220` by relocating min-width from icon elements to parent components and fixing circle button aspect ratios.
Out of Scope Changes check	✅ Passed	All changes are scoped to button and menu-toggle icon sizing, directly addressing the linked issue with no extraneous modifications.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ 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-03-23T19:28:16Z

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

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

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@src/patternfly/components/Button/button.scss`:
- Line 4: The file contains a stray debug token "asdf" in
src/patternfly/components/Button/button.scss that breaks Sass parsing; remove
that token (ensure no stray text exists outside of valid Sass
rules/variables/mixins) and re-run the Sass compile to verify; check the
surrounding rule(s) in button.scss (e.g., any $button variable usage or
.pf-button rules) to ensure interpolation like #{$button} is intact and not
preceded/followed by stray characters.

In `@src/patternfly/components/MenuToggle/menu-toggle.scss`:
- Line 9: MenuToggle's icon element still forces min-width causing extra
horizontal space; remove the hardcoded min-width from the MenuToggle __icon
styling (the rule targeting the __icon within the MenuToggle component) to match
the Button change, and rely on the computed --#{$menu-toggle}--MinWidth variable
instead so mixed icon+text toggles no longer have the excessive min-width.

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 06986ae4-eb4f-4e86-b6d1-5ed8583f1609

📥 Commits

Reviewing files that changed from the base of the PR and between 1bd71e2 and affa5ac.

📒 Files selected for processing (2)

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

srambach

Just a few nits noted elsewhere; buttons look 🟢 to me!

patternfly-build · 2026-03-24T21:28:59Z

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

The release is available on:

Your semantic-release bot 📦🚀

fix: adjusted button and menu toggle icon size

affa5ac

Adjusted button/menu-toggle icon width and moved min-width back to the parent. Also addressed circle buttons to be a circle.

chore: oof

f625eca

coderabbitai Bot reviewed Mar 23, 2026

View reviewed changes

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

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

chore: fix menu toggle icon width

0e19943

mcoker requested review from jcmill and srambach March 24, 2026 17:02

srambach approved these changes Mar 24, 2026

View reviewed changes

mcoker merged commit b787a2e into patternfly:main Mar 24, 2026
5 checks passed

mcoker deleted the issue-8220 branch March 24, 2026 21:17

patternfly-build added the released on @prerelease label Mar 24, 2026

coderabbitai Bot mentioned this pull request Apr 7, 2026

Menu toggle: new read only variant #8141

Open

This was referenced Apr 20, 2026

Button/menu-toggle - remove scale, change icon size #8322

Open

New Variant: Full Width Toggle Groups #8325

Closed

Bug - button/menu-toggle - update icon width for docked nav #8333

Closed

coderabbitai Bot mentioned this pull request May 26, 2026

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: adjusted button and menu toggle icon size#8238

fix: adjusted button and menu toggle icon size#8238
mcoker merged 3 commits into
patternfly:mainfrom
mcoker:issue-8220

mcoker commented Mar 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Mar 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

srambach left a comment

Uh oh!

Uh oh!

patternfly-build commented Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

mcoker commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Mar 23, 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!

srambach left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mcoker commented Mar 23, 2026 •

edited

Loading

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading

patternfly-build commented Mar 23, 2026 •

edited

Loading