Skip to content

MudMenuItem: Decouple from MudListItem and Change Icon Layout#10478

Merged
henon merged 9 commits intoMudBlazor:devfrom
danielchalmers:menu-item-icon-size
Dec 20, 2024
Merged

MudMenuItem: Decouple from MudListItem and Change Icon Layout#10478
henon merged 9 commits intoMudBlazor:devfrom
danielchalmers:menu-item-icon-size

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Dec 18, 2024

Description

MenuItem is no longer based on ListItem internally to allow greater control over behaviour and style. Any dependencies on the list item classes will likely break.

The icon size is now chosen based on whether or not the Dense variant is used. The style is based loosely on the MD2 spec and lays the groundwork for further refinements under #10077.

Resolves #9097

How Has This Been Tested?

unit

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Before, no icons

image

image

After, no icons (no change which is intended)

image

image

.

Before, mixed icons sizes:

image

image

After, can no longer be customized:

image

image

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added the breaking change This change will require consumer code updates label Dec 18, 2024
@danielchalmers danielchalmers changed the title MenuItem: Tie icon size to Dense & Split from ListItem internally MudMenuItem: Tie icon size to Dense & Decouple from MudListItem Dec 18, 2024
@danielchalmers danielchalmers changed the title MudMenuItem: Tie icon size to Dense & Decouple from MudListItem MudMenuItem: Redesign icon layout & Decouple from MudListItem Dec 18, 2024
@danielchalmers danielchalmers marked this pull request as ready for review December 18, 2024 20:28
@danielchalmers danielchalmers changed the title MudMenuItem: Redesign icon layout & Decouple from MudListItem MudMenuItem: Decouple from MudListItem & Change icon layout Dec 18, 2024
@codecov
Copy link

codecov bot commented Dec 18, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.59%. Comparing base (152adcd) to head (50c882e).

Additional details and impacted files
@@           Coverage Diff           @@
##              dev   #10478   +/-   ##
=======================================
  Coverage   91.58%   91.59%           
=======================================
  Files         426      426           
  Lines       13278    13290   +12     
  Branches     2550     2555    +5     
=======================================
+ Hits        12161    12173   +12     
  Misses        546      546           
  Partials      571      571           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@danielchalmers
Copy link
Member Author

Migration Guide:

  • MudMenuItem is now decoupled from MudListItem. Certain CSS classes will be different
  • MudMenuItem now chooses the size of the icon automatically and IconSize was removed

@ScarletKuro
Copy link
Member

Noticed you have some commented code:

//.AddClass($"mud-selected-item mud-{MudList?.Color.ToDescriptionString()}-text", !MultiSelection && _selected && !GetDisabled())
//.AddClass($"mud-{MudList?.Color.ToDescriptionString()}-hover", !MultiSelection && _selected && !GetDisabled())

Don't think the policy is allowing commented code if the PR is ready to be merged.

@sonarqubecloud
Copy link

@henon
Copy link
Contributor

henon commented Dec 20, 2024

FYI @dennisrahmen

@henon henon merged commit 4c0a863 into MudBlazor:dev Dec 20, 2024
@henon henon changed the title MudMenuItem: Decouple from MudListItem & Change icon layout MudMenuItem: Decouple from MudListItem and Change Icon Layout Dec 20, 2024
@henon
Copy link
Contributor

henon commented Dec 20, 2024

Thanks @danielchalmers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change This change will require consumer code updates

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Optimize the Distance Between Icon and Text in MenuItem Component

3 participants