FormLayout: new layout model

[rolfsmeds]

Description

The current FormLayout layout model is inflexible and has several issues. A new layout model based on css grid provides more flexibility, solves many of the issues, and can be backward compatible with the old model.

Features

• Supports explicit grouping of fields into rows (defaulting to single column)
• Automatic breakpoints based on desired column width and available space (based on css grid and container queries)
• Side-labels doesn’t require FormItem wrapping (at least for field components)
• Field size independent of column width
• FormSections with titles for splitting long forms
• Fully backward compatible with old model (through configuration and/or feature flag)

Acceptance criteria

• Defaults to single-column mode
• FormLayoutRow / vaadin-form-layout-row for creating explicit rows of fields
• Number of columns automatically determined based on a configurable column width and the available space
• Automatic wrapping of fields into FormItems for side-label mode
  • Other elements may still require manual FormItem wrapping
• Field width independent from column width
• Colspan support
• FormLayoutSection / vaadin-form-layout-section with titles, for splitting long forms
• APIs for
  • Setting column width
  • Setting whether columns stretch to fill layout width
  • Setting whether fields stretch to fill their columns
  • Setting min/max number of columns
  • Setting column gap
  • Switching to multi-column-default mode (like current FormLayout)
  • Switching to side-labels mode
  • Setting ResponsiveSteps (for backward compatibility)
    • Constant for setting the default steps from the current model

General criteria

• APIs reviewed

• Design

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)