Skip to content

MudMenu: Bring style closer to Material Design#10542

Merged
danielchalmers merged 3 commits intoMudBlazor:devfrom
danielchalmers:menu-design-md
Dec 30, 2024
Merged

MudMenu: Bring style closer to Material Design#10542
danielchalmers merged 3 commits intoMudBlazor:devfrom
danielchalmers:menu-design-md

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented Dec 30, 2024

Description

  • All padding tweaked
  • Icons are now always medium sized
  • Padding added around the list itself
  • Divider gap increased
  • Dense items are now 32px instead of 36px

Closes #10077. Resolves #9097 as an alternative to #9143 after building on top of #10478.

Using materials from:

How Has This Been Tested?

visually

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

image

image

After

image

image

Before

image

image

After

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 enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Dec 30, 2024
@danielchalmers danielchalmers requested a review from henon December 30, 2024 00:10
@danielchalmers
Copy link
Member Author

@dennisrahmen This is where I mentioned I wanted to reach in your original PR. Do you think it's in a good place?

@codecov
Copy link

codecov bot commented Dec 30, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.59%. Comparing base (ddf89eb) to head (4348c10).
Report is 3 commits behind head on dev.

Additional details and impacted files
@@           Coverage Diff           @@
##              dev   #10542   +/-   ##
=======================================
  Coverage   91.59%   91.59%           
=======================================
  Files         426      426           
  Lines       13298    13297    -1     
  Branches     2562     2561    -1     
=======================================
  Hits        12180    12180           
  Misses        546      546           
+ Partials      572      571    -1     

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

@sonarqubecloud
Copy link

@dennisrahmen
Copy link
Contributor

@danielchalmers looks great!
I just updated my project yesterday and played around with the margins but yours is better than what I had.

Did you check when you have icons with different sizes in the same menu?

@danielchalmers
Copy link
Member Author

@danielchalmers looks great! I just updated my project yesterday and played around with the margins but yours is better than what I had.

Did you check when you have icons with different sizes in the same menu?

I ended up just explicitly removing the ability to change the icon size for the sake of aligning with the standard as it was more trouble than it's worth. Do you know of a use case for varying sizes that will be hurt by this change before final release? @dennisrahmen

@dennisrahmen
Copy link
Contributor

Perfect opportunity to reference this #9143 (comment)

I don't think that it will have a huge impact, especially now that it is decoupled from the MudListItem.

@danielchalmers
Copy link
Member Author

Perfect opportunity to reference this #9143 (comment)

I don't think that it will have a huge impact, especially now that it is decoupled from the MudListItem.

Ahaha that's a great reference 😁

Yeah, I think decoupling was definitely the way to go so they can diverge to meet standards better. Do you think list items need any work in addition to this work on the menu items?

Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

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

Looking way better now, good job!

@dennisrahmen
Copy link
Contributor

Do you think list items need any work in addition to this work on the menu items?

That's what I tried to address originally for everything that uses the MudListItem, because the weirdness with the margins originates from there.

When you look at the MudList examples, the icons on the left have to much spacing as well as not consistent spacing with the open/close icons on the right.

Also at that point I think it would make sense to remove the icon size there as well.

@henon henon changed the title Menu: Bring style closer to Material Design MudMenu: Bring style closer to Material Design Dec 30, 2024
@danielchalmers danielchalmers merged commit 6d9bec8 into MudBlazor:dev Dec 30, 2024
2 checks passed
@danielchalmers danielchalmers deleted the menu-design-md branch December 30, 2024 17:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudMenu: New dense variant for desktop users Optimize the Distance Between Icon and Text in MenuItem Component

3 participants