FormLayout: Automatic side-label column width

[rolfsmeds]

Describe your motivation

When FormLayout is rendering field labels on the side (using FormItem wrappers), the width of the labels is set to a particular value, that can be configured through a style property --vaadin-form-item-label-width or through the setLabelWidth method in Flow.

If labels are longer than that width, they will wrap to multiple lines if appropriate spaces are available, or, if not, simply overflow the label area:

Not only is it tedious to have to ensure that the label width is set appropriately to avoid this (especially the overflow), but internationalized UIs, where the length of the labels in various languages can vary significantly, places a heavy burden on testing to ensure they fit in all supported languages.

Describe the solution you'd like

Support automatic label width in FormLayout, that automatically sets the labels as long as they need to be to avoid overflow.

Naturally we want all fields in the same column in the form to use the same label width, but each column could have different label widths without looking bad.

This could be implemented by

• Refactoring the css grid used in FormLayout's autoResponsive mode to use separate columns for labels and fields;
• Refactoring FormItem to use a css grid layout with subgrid. so that the label is rendered in the parent grid's label column in side-labels mode.

The style property --vaadin-form-item-label-width (and the corresponding Flow API) could then simply provide the desired width value to the label column, which would support e.g.

• min-content : force the column to be as short as possible, based on the longest word in the column;
• max-content : set the column to be as wide as the longest label in it, without wrapping;
• fit-content(100px) : flex between min-content and max-content or 100px, whichever is smaller
• minmax(min-content, max-content) : flex between the two above, depending on the available space;

Describe alternatives you've considered

A simpler solution to avoid overflow would be to force line breaks in labels that couldn't otherwise wrap by using overflow-wrap: break-word. This would not provide automatic label column widths, however.

Additional context

As this would be opt-in through the style property or corresponding Flow API, it would not constitute a breaking change. However, the refactoring of FormItem to subgrid may affect existing forms at least if custom styling has been applied to FormItem.

This feature would be limited to autoResponsive mode, unless we also refactor responsiveSteps mode to use css grid.

Refactoring FormItem to use css subgrid would have the additional benefit of enabling multi-line labels above fields.