Menus should add padding

[WordlessEcho]

In Material Design Guidelines, menus should have:

• Top padding: 8dp
• Bottom padding: 8dp

But Material Design Components Web Menu only have bottom padding, have no top padding:

Anyway, seems that menus "dividing line" should have 16px padding? Guidelines is not clear about that.

[robzenn92]

@WordlessEcho nice catch! However, to me it seems that it does not have the bottom padding too. To the best of my knowledge the little space between the last child and the end of the menu is caused by line 66.

Isn't enough to remove line 66 and replace line 128 with padding: 8px 0; ? Am I wrong?

Regarding the dividing line I think it definitely needs to be adjusted.

EDIT: by the way now I see that there is a difference between mobile and desktop: so on mobile the top-bottom padding must be 8px while on tablet/desktop it needs to be 16px.

[WordlessEcho]

Yep! That's right!

[robzenn92]

Cool! 😃 So I am going to open a PR with the fix!

There is still the need to understand whether the desktop should have a 16px padding and where to put it, cause I don't see media queries. Hence, I think that the whole desktop style is missing.

[WordlessEcho]

Top padding, bottom padding and dividing line need 8px on mobile, 16px on desktop (Anyway, seems that table is same of desktop).
Thanks!

[robzenn92]

Actually, here I found the following:

Default desktop menu
Menu item height: 32px
Menu item text left padding: 24px
Top padding: 8px
Bottom padding: 8px
Typography: 15px

So both the top and bottom padding for desktop are the same as the mobile while the difference is the Menu item height and the Menu item text left padding.

The third picture you posted for the dividing line is related to the Cascading menu which is different. See #53.

[WordlessEcho]

The third picture you posted for the dividing line is related to the Cascading menu which is different.

I nearly forget it... You're right. XD