feat(ui5-form): introduce Form web component

[ilhan007]

The change introduces several components - Form, FormGroup and FormItem to build application forms easier and according to latest design guidelines.

Overview

The Form is a layout component that arranges labels and form fields (like input fields) pairs
into specific number of columns.

Structure

• Form is the top-level container component, responsible for the content layout and the responsiveness.
• FormGroup (ui5-form-group) enables the grouping of the Form content.
• FormItem (ui5-form-item) is a pair of label and form field.

The simplest Form consists of a header area on top, displaying a header text and content below - arbitrary number of FormItems, representing the pairs of label and form field.

And, there is also "grouping", enabled by the FormGroup component.

Responsiveness

The Form component reacts and changes its layout on predefined breakpoints.
Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:

• S (< 600px) – 1 column
• M (600px - 1022px) – up to 2 columns are recommended (default: 1)
• L (1023px - 1439px) - up to 3 columns are recommend (default: 2)
• XL (> 1439px) – up to 6 columns are recommend (default: 2)

To change the layout, use the layout property - f.e. layout="S1 M2 L3 XL6".
Note: there is no restriction of the column numbers (f.e you can specify XL9 and get the layout divided in to 9 columns), however recommendations are based on our experience to best suite known use-cases.

Form Groups Distribution

To make better use of screen space, there is built-in logic to calculate how many columns should a FormGroup occupy.

• Example 1 (perfect match): 4 columns and 4 groups: each group will use 1 column.
• Example 2 (balanced distribution): 4 columns and 2 groups: each group will use 2 columns.
• Example 3 (unbalanced distribution): 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.
  Note: The size of a group element is determined by the number of FormItems assigned to it.
  In case of equality, the first in the DOM will use more columns and the last - less columns.
• Example 4 (more groups than columns): 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.

Form Group column-span

To influence the built-in group distribution, you can use the FormGroup's columnSpan property,
that defines how many columns the group should expand to.

Form Item's Label Placement

By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.
You can control what space the labels should take via the labelSpan property
For example:

• To always place the labels on top set: labelSpan="S12 M12 L12 XL12".
• To make the label take half of the item set: labelSpan="S6 M6 L6 XL6".

API

Form

props

• layout!: string; // "S1 M2 L4 XL6"
• labelSpan!: string; // "S12 M4 L4 XL4"
• headerText!: string; // "Address Form"
• itemSpacing!: FormItemSpacing; // "Normal" | "Large"

slots

• header!: Array;
• items!: Array<FormItem | FormGroup>;

<ui5-form header-text="Address" layout="S1 M2 L4 XL6" label-span="S12 M4 L4 XL4" item-spacing="Large">
  <ui5-form-group>
    <ui5-form-item>
      <ui5-label slot="labelContent">Name:</ui5-label>
      <ui5-text>Red Point Stores</ui5-text>
    </ui5-form-item>
  </ui5-form-group>
</ui5-form>

Form Group

props

• headerText!: string; // "Contact Info"
• columnSpan!: number; // 2

slots

• items!: Array;

<ui5-form-group header-text="Contact Info" column-span="2">
  <ui5-form-item>
    <ui5-label slot="labelContent">Name:</ui5-label>
     <ui5-text>Red Point Stores</ui5-text>
  </ui5-form-item>
					
  <ui5-form-item>
    <ui5-label slot="labelContent">ZIPCode/City:</ui5-label>
    <ui5-text>411 Maintown</ui5-text>
  </ui5-form-item>
					
  <ui5-form-item>
    <ui5-label slot="labelContent">Street:</ui5-label>
    <ui5-text>Main St 1618</ui5-text>
  </ui5-form-item>
</ui5-form-group>

Form Item

slots

• labelContent!: Array;
• content!: Array;

<ui5-form-item>
   <ui5-label slot="labelContent">Name:</ui5-label>
   <ui5-text>Red Point Stores</ui5-text>
</ui5-form-item>

Test Pages

Fixes: #7854

[nnaydenow]

Check why the breakpoint is not changed on the corresponding sizes? S breakpoint starts from around 630px when it has to start from 600<

[nnaydenow]

minor: use template literals for properties of type enum. also applying for form item and form group item.