Button text - Upper case

[nevf]

@finnhvman matter buttons correctly include text-transform: uppercase; which matches the MD spec.

However after checking a variety of Google apps that supposedly implement MD, few if any buttons use upper case text.

Desktop apps I checked include GMail, Drive, Photos etc. On Google's Mobile apps buttons are scarce.

My "personal preference" is not to force upper case, and of course I can add another class to override this, however I'm curious as to your thoughts.

[finnhvman]

Hey @nevf! This is an interesting topic. I understand your issue, using text-transform is very strict, you can only opt out of it with some css. I also noticed that many Google Apps deviate from Material Design. However, I reckon most users would prefer the uppercase version (I might be wrong).

According to Material Design capitalization is about making the button more distinctive. In case of a Text Button this seems like a must, in case of a Contained Button it's less important. I want the buttons to have a consistent behaviour so enforcing uppercase feels like the better choice to me.

So I suggest you override this property, you can use the Matter class for it, like:

.matter-button-contained {
    text-transform: none !important;
}

[nevf]

@finnhvman Thanks, I already did the text-transform: none override, so all good. It will be interesting to hear other opinions as time goes on.

[finnhvman]

@nevf Yes, feedback is welcome!

Next month I will be working on ways to integrate Matter into projects, like using CDN, npm or customized manual downloads. I want to provide some options in case of the latter two. For example, I would create an option (like noUppercase: true,) which allows people to opt out of text-transform: uppercase when downloading a Matter build.

[nevf]

@finnhvman After years of battling with CSS, BEM, Atomic CSS etc. and avoiding any notion of "CSS in JS" I've wavered and started using emotion.js and I have to say I absolutely love it. Most all the pain I've had with CSS has gone away.

With emotion you can compose CSS, use nested selectors, global naming conflicts are gone and unlike other CSS in JS libs no Build step is required. If you haven't looked at it and have time I heartily recommend you do.

As an aside in the Docs you say:

"This is not for complex apps and SPAs. ..." and Its for folks that work on "Simple projects"

I'm curious why you feel this is the case.

I'm personally doing heavy development with Lit-element (Web Components) along with emotion.js for a reasonably complex SPA/PWA and see matter being a great fit. I have no plans or desire to use React, View or Angular etc.

[finnhvman]

@nevf Yeah, maybe I could've phrased that line better. My point is that complex apps usually, SPAs definitely rely on JavaScript. A more comprehensive library usually has APIs for its components, which typically needs with JavaScript.

It's not like you can't use Matter for these types of apps, I'm glad that it fits your case. However, if someone's already working on a React, Vue, or Angular project, they might be better off with the framework-specific implementations.

[finnhvman]

Revisiting this topic I found two mentions of sentence case on buttons:

1. Contained button:

Do. Text labels can be written in sentence case, as long as the button is clearly distinguishable from elements around it.

2. Applying the type scale | Button section:

Button text can be sentence case, sans serif, or serif.

Concluding that the forced uppercase should be removed.

---

Commit 96c9a5caa69924fbe0c9a08c657b555b635bb4d4 removes the forced uppercase from Buttons.

This issue will be closed after the next release.

[nevf]

@finnhvman Great, thanks. Seemed odd in the first place.