Components: Button should be capitalized by default per MD spec

Created on 12 May 2017 · 9Comments · Source: angular/components

Bug, feature request, or proposal:

Button text should be in uppercase according to the material design spec. Should this rule be defaulted in the appropriate contexts in Angular Material?

What is the expected behavior?

https://material.io/guidelines/components/buttons.html#buttons-usage

Button text should be capitalized in languages that have capitalization. For other languages, colored text on flat buttons distinguishes them from normal text.

What is the current behavior?

text is not capitalized

What are the steps to reproduce?

Any button in any sample

What is the use-case or motivation for changing an existing behavior?

Default behavior should follow the spec

Which versions of Angular, Material, OS, browsers are affected?

current version

Is there anything else we should know?

Here's an option to make it work on forms, cards and dialogs and excludes buttons in menus:

form button, md-card button, md-dialog-container button  {
  //:not(md-menu-item)
  text-transform: uppercase;
}

Source

michael-lang

All 9 comments

No, it shouldn't be set by default. As @jelbourn mentioned in #2637:

We specifically do not use text-transform as it may have internationalization issues (changing the case may change the meaning of the text in some locales). If you always want to to capitalize the button text, you can add a global rule specific to your application.

donroyco on 12 May 2017

👍1

What @donroyco said.

jelbourn on 12 May 2017

That makes sense. Thanks for the feedback.

michael-lang on 12 May 2017

@donroyco @jelbourn The button used by md-snackbar (.mat-simple-snackbar-action) does text-transform: uppercase;. It sounds like this may be unintentional.