docs: document FormLayout auto-responsive mode

frontend/demo/component/formlayout/form-layout-basic.ts

@@ -1,10 +1,12 @@
 import 'Frontend/demo/init'; // hidden-source-line
 import '@vaadin/form-layout';
+import '@vaadin/form-layout/vaadin-form-row.js';
 import '@vaadin/password-field';
 import '@vaadin/text-field';
+import '@vaadin/email-field';
+import '@vaadin/split-layout';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import type { FormLayoutResponsiveStep } from '@vaadin/form-layout';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('form-layout-basic')
@@ -16,25 +18,32 @@ export class Example extends LitElement {
     return root;
   }
 
-  // tag::snippet[]
-  private responsiveSteps: FormLayoutResponsiveStep[] = [
-    // Use one column by default
-    { minWidth: 0, columns: 1 },
-    // Use two columns, if layout's width exceeds 500px
-    { minWidth: '500px', columns: 2 },
-  ];
-
   protected override render() {
     return html`
-      <vaadin-form-layout .responsiveSteps="${this.responsiveSteps}">
-        <vaadin-text-field label="First name"></vaadin-text-field>
-        <vaadin-text-field label="Last name"></vaadin-text-field>
-        <!-- Stretch the username field over 2 columns -->
-        <vaadin-text-field colspan="2" label="Username"></vaadin-text-field>
-        <vaadin-password-field label="Password"></vaadin-password-field>
-        <vaadin-password-field label="Confirm password"></vaadin-password-field>
+      <vaadin-split-layout>
+        ${this.renderFormLayout()}
+        <div></div>
+      </vaadin-split-layout>
+    `;
+  }
+
+  private renderFormLayout() {
+    // tag::snippet[]
+    return html`
+      <vaadin-form-layout class="w-full" auto-responsive>
+        <vaadin-form-row>
+          <vaadin-text-field label="First name"></vaadin-text-field>
+          <vaadin-text-field label="Last name"></vaadin-text-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-email-field label="Email address"></vaadin-email-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-password-field label="Password"></vaadin-password-field>
+          <vaadin-password-field label="Confirm password"></vaadin-password-field>
+        </vaadin-form-row>
       </vaadin-form-layout>
     `;
+    // end::snippet[]
   }
-  // end::snippet[]
 }

frontend/demo/component/formlayout/form-layout-colspan.ts

@@ -1,11 +1,9 @@
 import 'Frontend/demo/init'; // hidden-source-line
-import '@vaadin/date-picker';
 import '@vaadin/form-layout';
+import '@vaadin/form-layout/vaadin-form-row.js';
 import '@vaadin/text-field';
-import '@vaadin/time-picker';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import type { FormLayoutResponsiveStep } from '@vaadin/form-layout';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('form-layout-colspan')
@@ -17,21 +15,31 @@ export class Example extends LitElement {
     return root;
   }
 
-  private responsiveSteps: FormLayoutResponsiveStep[] = [
-    { minWidth: 0, columns: 1 },
-    { minWidth: '20em', columns: 3 },
-  ];
-
   protected override render() {
     return html`
-      <vaadin-form-layout .responsiveSteps="${this.responsiveSteps}">
-        <!-- tag::snippet[] -->
-        <vaadin-text-field label="Title" colspan="3"></vaadin-text-field>
-        <!-- end::snippet[] -->
-        <vaadin-date-picker label="Date"></vaadin-date-picker>
-        <vaadin-time-picker label="From"></vaadin-time-picker>
-        <vaadin-time-picker label="To"></vaadin-time-picker>
+      <vaadin-split-layout>
+        ${this.renderFormLayout()}
+        <div></div>
+      </vaadin-split-layout>
+    `;
+  }
+
+  private renderFormLayout() {
+    // tag::snippet[]
+    return html`
+      <vaadin-form-layout class="w-full" auto-responsive column-width="8em" expand-fields>
+        <vaadin-form-row>
+          <vaadin-text-field label="Street address" data-colspan="3"></vaadin-text-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-text-field label="Postal code"></vaadin-text-field>
+          <vaadin-text-field label="City/Town" data-colspan="2"></vaadin-text-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-text-field label="Country" data-colspan="2"></vaadin-text-field>
+        </vaadin-form-row>
       </vaadin-form-layout>
     `;
+    // end::snippet[]
   }
 }

frontend/demo/component/formlayout/form-layout-expand-columns.ts

@@ -0,0 +1,49 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/form-layout';
+import '@vaadin/form-layout/vaadin-form-row.js';
+import '@vaadin/password-field';
+import '@vaadin/text-field';
+import '@vaadin/email-field';
+import '@vaadin/split-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('form-layout-expand-columns')
+export class Example extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  protected override render() {
+    return html`
+      <vaadin-split-layout>
+        ${this.renderFormLayout()}
+        <div></div>
+      </vaadin-split-layout>
+    `;
+  }
+
+  private renderFormLayout() {
+    // tag::snippet[]
+    return html`
+      <vaadin-form-layout class="w-full" auto-responsive column-width="8em" expand-columns>
+        <vaadin-form-row>
+          <vaadin-text-field label="First name"></vaadin-text-field>
+          <vaadin-text-field label="Last name"></vaadin-text-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-email-field label="Email address"></vaadin-email-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-password-field label="Password"></vaadin-password-field>
+          <vaadin-password-field label="Confirm password"></vaadin-password-field>
+        </vaadin-form-row>
+      </vaadin-form-layout>
+    `;
+    // end::snippet[]
+  }
+}

frontend/demo/component/formlayout/form-layout-expand-fields.ts

@@ -0,0 +1,55 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/form-layout';
+import '@vaadin/form-layout/vaadin-form-row.js';
+import '@vaadin/password-field';
+import '@vaadin/text-field';
+import '@vaadin/email-field';
+import '@vaadin/split-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('form-layout-expand-fields')
+export class Example extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  protected override render() {
+    return html`
+      <vaadin-split-layout>
+        ${this.renderFormLayout()}
+        <div></div>
+      </vaadin-split-layout>
+    `;
+  }
+
+  private renderFormLayout() {
+    // tag::snippet[]
+    return html`
+      <vaadin-form-layout
+        class="w-full"
+        auto-responsive
+        column-width="8em"
+        expand-columns
+        expand-fields
+      >
+        <vaadin-form-row>
+          <vaadin-text-field label="First name"></vaadin-text-field>
+          <vaadin-text-field label="Last name"></vaadin-text-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-email-field label="Email address"></vaadin-email-field>
+        </vaadin-form-row>
+        <vaadin-form-row>
+          <vaadin-password-field label="Password"></vaadin-password-field>
+          <vaadin-password-field label="Confirm password"></vaadin-password-field>
+        </vaadin-form-row>
+      </vaadin-form-layout>
+    `;
+    // end::snippet[]
+  }
+}

frontend/demo/component/formlayout/form-layout-labels-aside.ts

@@ -0,0 +1,49 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/form-layout';
+import '@vaadin/form-layout/vaadin-form-item.js';
+import '@vaadin/text-field';
+import '@vaadin/email-field';
+import '@vaadin/split-layout';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('form-layout-labels-aside')
+export class Example extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  protected override render() {
+    return html`
+      <vaadin-split-layout>
+        ${this.renderFormLayout()}
+        <div></div>
+      </vaadin-split-layout>
+    `;
+  }
+
+  private renderFormLayout() {
+    // tag::snippet[]
+    return html`
+      <vaadin-form-layout class="w-full" auto-responsive labels-aside>
+        <vaadin-form-item>
+          <label slot="label">First name</label>
+          <vaadin-text-field></vaadin-text-field>
+        </vaadin-form-item>
+        <vaadin-form-item>
+          <label slot="label">Last name</label>
+          <vaadin-text-field></vaadin-text-field>
+        </vaadin-form-item>
+        <vaadin-form-item>
+          <label slot="label">Email address</label>
+          <vaadin-email-field></vaadin-email-field>
+        </vaadin-form-item>
+      </vaadin-form-layout>
+    `;
+    // end::snippet[]
+  }
+}