Material-components-web: MDC Simple Menu

Created on 3 Jun 2017  路  6Comments  路  Source: material-components/material-components-web

Hey,
I was making a template for my web app when I saw that the MDC Simple Menu does not look like the menu from the Material Design guidelines page. On the left we have MDC and on the right we have Material Design guidelines's menu.
mdc2
It's actually different in:

  1. The font-size which should be 16px.
  2. The font-weight which should be 400.
  3. The min-width which should be 170px.
  4. The letter-spacing which should be 0.05px. (Should it be more or less than 0.05px? @robzenn92)

And with all these changes, the menu will look _exactly_ like the one on Material Design guidelines page. On the left we have MDC and on the right we have Material Design guidelines's menu.
mdc

help wanted

Most helpful comment

Yes it is! I'll fix it later :) I can make a PR but I didn't because I need the approval of MDC Web developers, then I'll create the PR :)

All 6 comments

@Touficbatache From the examples you posted, to me it seems that also the letter-spacing it's a bit different..isn't it? Do you have a PR for that?

Yes it is! I'll fix it later :) I can make a PR but I didn't because I need the approval of MDC Web developers, then I'll create the PR :)

This looks good. @Touficbatache would you mind making a PR for this? What we'd look for are two things:

  • [ ] We _don't_ want to change letter spacing. What may be right for one set of typography may not be for another
  • [ ] Make sure mdc-typography mixins are used for the solution where appropriate

Thanks!

@amsheehan Yes sure! What do you mean by "Make sure mdc-typography mixins are used for the solution where appropriate" ?

Just not to alter properties like font-size and font-weight directly in the component. Use mdc-typography the way it is used on line 137 of mdc-simple-menu.scss

@amsheehan

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ronnieroyston picture ronnieroyston  路  3Comments

broros picture broros  路  3Comments

ghost picture ghost  路  3Comments

abhiomkar picture abhiomkar  路  3Comments

trimox picture trimox  路  4Comments