search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

MDCTextField: Use em over px for sizing #4164

Open patrickrodee opened 5 years ago

patrickrodee commented 5 years ago

Google internally needs rem over px for sizing of text field content to solve for accessible scaling.

An example working codepen has already been created: https://codepen.io/williamernest/pen/bmOKeQ

Related to #2731, #4142

williamernest commented 5 years ago

rem doesn't solve the use case of having 2 text fields on the same page be different sizes (ex: an email subject vs cc line, or a calendar invite title vs location fields).

By basing it on em it still respects the scale applied to rem but allows for more granular control. I recommend we use em and have users specify the specific font-size on the mdc-text-field element or parent directly.

clshortfuse commented 5 years ago

When trying to fix this exact same issue in AngularJS Material, the solution was to use 1em for the font-size of the input element.

https://github.com/angular/material/commit/1df5336a9e2111109db34a7c7893bb8e0f698d8b#diff-74a081d9d358e41d6c52623c1b29422dR31

But unfortunately, our fix came along way too late in the framework lifecycle so, ultimately, we couldn't risk breaking design layouts. I suggest adding this sooner than later.

The other question you'll have is, if you resize the input label from 16sp, is the label meant to be 12sp or 75% of the input label? I haven't been able to find an answer for that. MD2015 changed all samples to use 16sp instead of varying height. It used to look like this, showing to use 12sp no matter what size the input was. But with the newer redesign, there are no such samples selectively showing large font. It was changed to this.

That's something you'd have to either take a guess at, or ask for some explicit direction from the Googlers.

abhiomkar commented 4 years ago

Since we changed font-size to rem can we close this now?