search

PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

Focus style doesn't match material spec #111

Closed cleercode closed 8 years ago

cleercode commented 8 years ago

Expected outcome

Focusing the button using the tab key should give the button a background color of either the fill color or black (unclear from the wording of the spec) at 12% opacity: https://www.google.com/design/spec/components/buttons.html

Actual outcome

Focusing the button makes the font bold.

Note: The bold font weight is especially difficult to distinguish from the normal state if the normal state is made to use medium instead of regular font weight, as the material spec also specifies.

Live Demo

https://elements.polymer-project.org/elements/paper-button?view=demo:demo/index.html

cleercode commented 8 years ago

Should have searched first: https://github.com/PolymerElements/paper-button/issues/94 https://github.com/PolymerElements/paper-button/issues/95

That said, it'd be good to see some consistency on this between Polymer and MD. Apps that are trying to properly implement the spec will override the normal font weight to medium, which will make using bold for focus state insufficient. See for example Chrome's settings UI (Canary, chrome://md-settings).

keanulee commented 8 years ago

95 pretty much sums up why we haven't done this. For now we suggest you override it if that's what you want (knowing why we did this in the first place).