[TextField] Increase shrunk label width to match 100% input width #11215
Conversation
| @@ -24,6 +24,7 @@ export const styles = theme => ({ | |||
| shrink: { | |||
| transform: 'translate(0, 1.5px) scale(0.75)', | |||
| transformOrigin: 'top left', | |||
| width: `${100 * 4 / 3}%`, | |||
There was a problem hiding this comment.
width: '133%' so the generated CSS isn't a "mess"
|
@pandaiolo Hmmm, why not. I have no idea if it's a good or a bad move. I'm fine trying this change out to discover it. |
oliviertassinari
added
the
component: text field
Input label is shrunk using CSS `scale`. The 100% default width is becoming smaller than full input width. Increasing accordingly the shrunk input label `width` let it occupy as much space as possible, avoiding in some case the wrapping of text, which is very inelegant in this component.
oliviertassinari
force-pushed
the
input-label-shrink-width
branch
from
232f0a9 to
7a2c903
Compare
oliviertassinari
changed the title
|
"Your PR is important to us. Please hold." Any chance of a before / after screenshot so the lazy bums amongst us can follow what changes? |
|
@mbrookes @oliviertassinari here are some screenshots, you can play with example here https://codesandbox.io/s/n9wy1680nl Base component, state focused: With some text, the label displays the number of characters, but given the width of the label, this forces the text to wrap:
With label element highlighted, smaller width is clear:
Given the fact it's scaled down, we can increase width to match component width and avoid wrap / give more room to label-with-input-value:
With label element highlighted:
|
|
Got it - makes perfect sense now. |
* Added styles to move input labels to text left align and fixed dialog flicker but when animating width * Added trailing comma * revert #11215
Description of issue
Input label is shrunk using CSS
scale. The 100% default width of that label makes it smaller than full input width.Solution in this PR
Increasing accordingly the shrunk input label
widthlet it occupy as much space as possible,avoiding in some case the wrapping of text (which is very inelegant in this component).
Side effects / misc
The width being increased, it means there is an inconsistency between unshrunk label unwrapped text capacity, and the shrunk one. It means that some text that is not wrapping when shrunk, would wrap when label is not shrunk.
I think that side effect is less problematic than the gain of this PR.
For example, many time the label is used in different ways when user started typing (hence in a shrunk state) : error state, display total of a sum, display additional information. Hence the benefit from having more space in this area - at least up to the parent input 100% width.