Skip to content

[material_ui] Don't clip MenuItemButton.leadingIcon - #12986

Merged
auto-submit[bot] merged 3 commits into
flutter:mainfrom
QuncCccccc:menu-item-button-leading-icon-clip
Sep 25, 2026
Merged

[material_ui] Don't clip MenuItemButton.leadingIcon#12986
auto-submit[bot] merged 3 commits into
flutter:mainfrom
QuncCccccc:menu-item-button-leading-icon-clip

Conversation

@QuncCccccc

@QuncCccccc QuncCccccc commented Sep 23, 2026

Copy link
Copy Markdown
Contributor

_MenuItemLabel wrapped the leading Row in a hard-coded ClipRect when overflowAxis is vertical, which clipped leadingIcon to its own bounds. This clips any decoration painting outside those bounds, such as a Badge.

This PR is to remove the ClipRect so leading icons won't be incorrectly clipped.

Fixes flutter/flutter#192732

Before
badge_before_real

After
badge_after_real

Pre-Review Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [AI contribution guidelines] and understand my responsibilities, or I am not using AI tools.
  • I read the [Tree Hygiene] page, which explains my responsibilities.
  • I read and followed the [relevant style guides] and ran [the auto-formatter].
  • I signed the [CLA].
  • The title of the PR starts with the name of the package surrounded by square brackets, e.g. [shared_preferences]
  • I [linked to at least one issue that this PR fixes] in the description above.
  • I followed [the version and CHANGELOG instructions], using [semantic versioning] and the [repository CHANGELOG style], or I have commented below to indicate which documented exception this PR falls under[^1].
  • I updated/added any relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or I have commented below to indicate which [test exemption] this PR falls under[^1].
  • All existing and new tests are passing.

@github-actions github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Sep 23, 2026
@QuncCccccc QuncCccccc added the CICD Run CI/CD label Sep 23, 2026
@QuncCccccc
QuncCccccc force-pushed the menu-item-button-leading-icon-clip branch 2 times, most recently from b0f4ad6 to 6707fc5 Compare September 23, 2026 01:52
@QuncCccccc
[material_ui] Don't clip MenuItemButton.leadingIcon
d6bce8d 
`_MenuItemLabel` wrapped the leading `Row` in a hard-coded `ClipRect`
when `overflowAxis` is vertical, which clipped `leadingIcon` to its own
bounds. This hid any decoration painting outside those bounds, such as a
`Badge`, and shaved the antialiased edge off ordinary icons.

`trailingIcon`, `shortcut`, and `submenuIcon` are not wrapped, so the
leading slot was the odd one out.

The inner `ClipRect` around the label, which is what actually bounds
long text, is unchanged.
@QuncCccccc
QuncCccccc force-pushed the menu-item-button-leading-icon-clip branch from 6707fc5 to d6bce8d Compare September 23, 2026 01:54
@QuncCccccc
QuncCccccc marked this pull request as ready for review September 23, 2026 16:51
elliette
elliette approved these changes Sep 24, 2026
View reviewed changes

@elliette elliette left a comment •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One optional suggestion otherwise LGTM

elliette
elliette reviewed Sep 25, 2026
View reviewed changes
Comment thread packages/material_ui/test/menu_anchor_test.dart Outdated
);

// The label itself is still clipped so that long labels truncate.
expect(find.ancestor(of: find.text('Item'), matching: find.byType(ClipRect)), findsOneWidget);

@elliette elliette Sep 25, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[optional] Could we test with a long string to make sure it is clipped?

@QuncCccccc QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 25, 2026
@auto-submit
auto-submit Bot merged commit f0c985d into flutter:main Sep 25, 2026
13 checks passed
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Sep 28, 2026
Merged
github-merge-queue Bot pushed a commit to flutter/flutter that referenced this pull request Sep 28, 2026
@engine-flutter-autoroll
Roll Packages from e55e7ac30b8c to ba0364a650af (9 revisions) (#193450)
f112a60 
flutter/packages@e55e7ac...ba0364a

2026-09-26 stuartmorgan@google.com [google_maps_flutter] Indicate that
default iOS impl is discoraged (flutter/packages#12872)
2026-09-26 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Add Material 3 Expressive IconButton (flutter/packages#12832)
2026-09-25 jessiewong401@gmail.com Plugin example apps to 9.3.1
(flutter/packages#13019)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Don't clip MenuItemButton.leadingIcon (flutter/packages#12986)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Migrate M3 ExpansionTile template to use new gen_defaults
(flutter/packages#12920)
2026-09-25 149176071+m1roxx@users.noreply.github.com
[two_dimensional_scrollables] Exclude trailing pinned spans from the
non-pinned range (flutter/packages#12666)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Migrate M3 Drawer template to use new gen_defaults
(flutter/packages#12916)
2026-09-25 36861262+QuncCccccc@users.noreply.github.com [material_ui]
Migrate M3 Divider template to use new gen_defaults
(flutter/packages#12915)
2026-09-25 instantni.med@gmail.com [google_maps_flutter_web] Fix
AdvancedMarker anchors on web (flutter/packages#11966)

If this roll has caused a breakage, revert this CL and set the roller
to dry run mode using the controls here:
https://autoroll.skia.org/r/flutter-packages-flutter-autoroll
Please CC flutter-ecosystem@google.com on the revert to ensure that a
human
is aware of the problem.

To file a bug in Flutter:
https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@elliette elliette elliette approved these changes
@navaronbracke navaronbracke navaronbracke approved these changes
@Piinks Piinks Awaiting requested review from Piinks

Assignees

No one assigned

Labels

autosubmit Merge PR when tree becomes green via auto submit App CICD Run CI/CD p: material_ui triage-design Should be looked at in design triage

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

MenuItemButton always clips its leadingIcon, hiding decorations such as Badge

3 participants

@QuncCccccc @elliette @navaronbracke