Open juuso-vaadin opened 1 week ago
Would be great to be able to do this both for individual fields and to all fields in a particular scope (e.g. globally, or in a particular form).
This could be achieved by introducing a style property like --vaadin-input-field-label-wrap
that sets the appropriate styles in any field label within the scope where it's set. Unfortunately the only ways to set multiple different values with a single property are 1) container style queries, and 2) the empty property value hack.
For DX convenience (esp. Flow), we could also introduce a theme variant wrap-label
/ WRAP_LABEL
that does it for you on the field where it's set.
The former is not yet supported with custom properties on all major browsers, and the latter is quite hacky and leads to a strange API (e.g. --wrap-labels: initial
).
So our options are:
Describe your motivation
Labels that are wider than the input are currently truncated with the overflow ellipsis. This ensures proper vertical alignment, but might not always be important, for example in single column forms.
These styles allow the label to wrap.![image](https://github.com/vaadin/web-components/assets/19607782/841316ed-2305-43cb-980e-3cac86cc274b)
Describe the solution you'd like
New theme variant for all input components
In addition it would be great to take possible tooltip indicator into account as well.
Describe alternatives you've considered
Helper text could be used to provide more more context in addition to short labels. Still this feels a bit artificial.
Additional context
Could also consider possibility to limit the number of rows with CSS line-clamp.