FormLayout: Side-labels without manually wrapping fields into FormItems

[rolfsmeds]

Describe your motivation

Currently FormLayout can render labels next to fields (i.e. labels-aside mode) (instead of the normal above) only if the fields are manually wrapped into FormItems. This has several drawbacks:

• More code required
• Labels must be placed in the FormItem instead of the field itself
• Colspans must be placed on the FormItem instead of the field itself
• This approach may have discoverability issues

Describe the solution you'd like

Support side-label rendering without requiring fields to be manually wrapped into FormItems.
This could be done in two ways:

A) FormItem automatically wraps fields into FormItems

• The autogenerated wrapper would read the label from the field automatically (similarly to how fields' required state is currently reflected in the FormItem label).
• In practice this would probably mean that all FormLayout items would always be wrapped, and either the wrapper's or the field's label hidden when the other is shown.

Pros:

• Easier implementation?
• Much smaller risk of breaking changes (only affects FormItem);
• Add-ons would support it without changes;
• Would also allow fields in labels-above mode to have labels longer than the field itself (although this could probably be achieved with fields' built-in fields too).
• Fields wrapped in FormItems would be render the same way as automatically wrapped fields

B) Fields themselves support side-placed labels.

• This would require refactoring the vaadin-field-container element in field components to be based on css grid.

Pros:

• Could be used outside of FormLayout;
• Smaller DOM footprint.

Manual FormItem wrapping still supported

Manually wrapping fields into FormItems would still be supported for two important cases:

• Existing applications that use FormItems;
• For providing labels for elements that are not Vaadin input field components (and thus lack labels implemented the way required to support this feature).

Additional context

Ideally, this would be supported in both autoResponsive and responsiveSteps modes. However, the default responsiveSteps applies side-label mode in all but the smallest breakpoint, but many (most?) existing apps use FormLayout without FormItemwrappers, and thus render labels above fields despite the responsiveSteps setting. This means that if wrappers are suddenly applied automatically, those forms would suddenly switch to labels-aside.
The responsiveSteps default cannot be changed as that would break apps that do use FormItem wrappers.

This leaves us with two options:

1. Introduce this feature only for autoResponsive mode, where the default is labels-above, and thus the change would not affect anything (except a minor DOM change that may affect custom styling and possibly clientside UI tests, but would be easy to adjust for).
2. Introduce this for both modes, and provide a feature flag or API-based way to revert it. (The API-based way could be to override the default responsiveSteps, in which case we may as well make autoResponsive the default mode at the same time. The same feature flag could be used for both too.)

Perhaps we could go with option 1 (autoResponsive only) in V25, and then support responsiveSteps from V26 onwards?

[jouni]

Option A could offer a path toward field components that don't provide label, helper, and error message features, but those features would become part of the FormItem’s feature set. This would make Custom Field largely redundant as well.

[rolfsmeds]

Related: #2883

[rolfsmeds]

Option B above could probably be implemented using css grid together with #7500.

In order to avoid suddenly making all FormLayouts with default responsiveSteps but without FormItem wrappers change from labels-above to labels-aside in existing applications, this would need to be limited to FormLayout's autoResponsive mode, and/or be opt-in somehow (e.g. through a feature flag).