Button text - Upper case about matter HOT 7 CLOSED

@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.

from matter.

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;
}

from matter.

@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.

from matter.

@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.

from matter.

@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.

from matter.

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 96c9a5c removes the forced uppercase from Buttons.

This issue will be closed after the next release.

from matter.

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

from matter.