Labels-aside support in input field components

[rolfsmeds]

Description

Built-in support for rendering labels "aside" (instead of on top) in all input field components, without the need for vaadin-form-item wrappers.

Acceptance criteria

• [ ] Works on all input field components with labels above the field (excluding vaadin-checkbox and vaadin-radio-button as the labels on those are different)
• [ ] Applied by setting a label-position="aside" or label-aside attribute on the component (dedicated Flow API postponed until later)
• [ ] Compatible with a css-grid refactorization of the layouting in vaadin-form-layout
• [ ] Applied automatically to fields in vaadin-form-layout for responsiveSteps with "labelsPosition":"aside"
• [ ] (Not decided: should form-layout automation mentioned above be behind feature flag or similar opt-in mechanism to avoid potentially breaking existing forms where labelsPosition:aside is used with fields not wrapped in FormItem?)

General criteria

• [ ] APIs reviewed
• [ ] Design https://github.com/vaadin/web-components/issues/2883#issuecomment-947679302
• [ ] UX/DX tests in Alpha
• [ ] Documentation: to be added as a new sub-section to https://vaadin.com/docs/latest/ds/components/input-fields/#label
• [ ] How to test?
• [ ] Limitations: no Flow API for setting per-component attribute for now

[rolfsmeds]

Open question: Should the API for this be a theme variant applied with something like theme="label-aside" / *Variant.LUMO_LABEL_ASIDE rather than a component feature with its own property?

[rolfsmeds]

One unfortunate detail in using the built-in label aside is that there's currently no way (that I'm aware of) to make the labels have dynamic width, i.e. automatically be as wide as the widest label in the form (e.g. in a vaadin-form-layout). Instead, a css property would be used to set a fixed width for the labels.

Dynamic label width is a feature of the css-grid form-layout refac here: https://github.com/vaadin/web-components/issues/4583, which still uses the current vaadin-form-item wrappers for having labels outside the component. So by using these aside-labels-in-components we lose that.

I'm quite certain dynamic label width would be possible with CSS sub-grid, but browser support is still quite far away: https://caniuse.com/css-subgrid

[knoobie]

Theme variant sounds fine! (If it's feasible to implement. Otherwise the property would be also okay)

[knoobie]

One unfortunate detail

Personally, I'm totally fine with that. Normally people should test their app with the supported locales anyway.

Dynamic label width

Couldn't this be implemented in the form? Like it knows all fields you add and calculates with JS the widest label and apply this width to the label? There are probably edge cases I forgot.. but it sounds possible theoretically.

[rolfsmeds]

Regardless of different strings for different locales, it would be useful to have dynamic label width, so that you wouldn't have to adjust the width in your forms at all – it would just automatically be wide enough for the labels, so that if you only have very short labels, the label "column" would only be as wide as they need, and if you have longer labels in another form, they'd automatically adapt to accommodate that.

But yes, you're correct in that it could probably be implemented with scripting. It's just that 1) that's a hassle, 2) those solutions tend to be buggy and/or not entirely reliable, and 3) pure css solution would be nicer.

[knoobie]

Sadly all three points are valid concerns 🙇‍♂️