From bd7777eeb0d68edd4c4a99e1bf08200fe0080897 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Wed, 19 Feb 2025 13:55:16 +0400
Subject: [PATCH] chore: add form-layout-auto-responsive dev page (#8694)

---
 dev/form-layout-auto-responsive.html | 278 +++++++++++++++++++++++++++
 1 file changed, 278 insertions(+)
 create mode 100644 dev/form-layout-auto-responsive.html
diff --git a/dev/form-layout-auto-responsive.html b/dev/form-layout-auto-responsive.html
new file mode 100644
index 00000000000..d71ba665b22
--- /dev/null
+++ b/dev/form-layout-auto-responsive.html
@@ -0,0 +1,278 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title>Form Layout</title>
+    <script type="module" src="./common.js"></script>
+
+    <style>
+      h1 {
+        margin-top: 2em;
+        margin-bottom: 0.5em;
+
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <form-layout-examples></form-layout-examples>
+
+    <script type="module">
+      import '@vaadin/dialog';
+      import '@vaadin/button';
+      import '@vaadin/tabsheet';
+      import '@vaadin/form-layout';
+      import '@vaadin/form-layout/vaadin-form-item.js';
+      import '@vaadin/text-field';
+      import '@vaadin/password-field';
+      import '@vaadin/horizontal-layout';
+      import { render, html, LitElement } from 'lit';
+      import { dialogRenderer } from '@vaadin/dialog/lit.js';
+
+      class FormLayoutExamples extends LitElement {
+        constructor() {
+          super();
+          this.openPrevSiblingDialog = this.openPrevSiblingDialog.bind(this);
+        }
+
+        createRenderRoot() {
+          return this;
+        }
+
+        render() {
+          return html`
+            <h1>autoResponsive</h1>
+            <vaadin-form-layout auto-responsive max-columns="2">
+              <vaadin-text-field label="First name"></vaadin-text-field>
+              <vaadin-text-field label="Last name"></vaadin-text-field>
+              <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+              <vaadin-password-field label="Password"></vaadin-password-field>
+              <vaadin-password-field label="Confirm"></vaadin-password-field>
+              <vaadin-button>Register</vaadin-button>
+            </vaadin-form-layout>
+
+            <h1>autoResponsive + expandColumns</h1>
+            <vaadin-form-layout auto-responsive max-columns="2" expand-columns>
+              <vaadin-text-field label="First name"></vaadin-text-field>
+              <vaadin-text-field label="Last name"></vaadin-text-field>
+              <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+              <vaadin-password-field label="Password"></vaadin-password-field>
+              <vaadin-password-field label="Confirm"></vaadin-password-field>
+              <vaadin-button>Register</vaadin-button>
+            </vaadin-form-layout>
+
+            <h1>autoResponsive + br</h1>
+            <vaadin-form-layout auto-responsive max-columns="2">
+              <vaadin-text-field label="First name"></vaadin-text-field>
+              <br />
+              <vaadin-text-field label="Last name"></vaadin-text-field>
+              <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+              <vaadin-password-field label="Password"></vaadin-password-field>
+              <vaadin-password-field label="Confirm"></vaadin-password-field>
+            </vaadin-form-layout>
+
+            <h1>autoResponsive inside HorizontalLayout + flex:1</h1>
+            <vaadin-horizontal-layout theme="spacing">
+              <vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2">
+                <vaadin-text-field label="First name"></vaadin-text-field>
+                <vaadin-text-field label="Last name"></vaadin-text-field>
+                <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                <vaadin-password-field label="Password"></vaadin-password-field>
+                <vaadin-password-field label="Confirm"></vaadin-password-field>
+              </vaadin-form-layout>
+              <vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" expand-columns>
+                <vaadin-text-field label="First name"></vaadin-text-field>
+                <vaadin-text-field label="Last name"></vaadin-text-field>
+                <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                <vaadin-password-field label="Password"></vaadin-password-field>
+                <vaadin-password-field label="Confirm"></vaadin-password-field>
+              </vaadin-form-layout>
+            </vaadin-horizontal-layout>
+
+            <h1>autoResponsive inside HorizontalLayout + labels aside</h1>
+            <vaadin-horizontal-layout theme="spacing">
+              <vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" 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 colspan="2">
+                  <label slot="label"> Username </label>
+                  <vaadin-text-field colspan="2"></vaadin-text-field>
+                </vaadin-form-item>
+                <vaadin-form-item>
+                  <label slot="label"> Password </label>
+                  <vaadin-password-field></vaadin-password-field>
+                </vaadin-form-item>
+                <vaadin-form-item>
+                  <label slot="label"> Confirm </label>
+                  <vaadin-password-field></vaadin-password-field>
+                </vaadin-form-item>
+              </vaadin-form-layout>
+              <vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" labels-aside expand-columns>
+                <vaadin-form-item>
+                  <label slot="label"> First name </label>
+                  <vaadin-text-field class="full-width"></vaadin-text-field>
+                </vaadin-form-item>
+                <vaadin-form-item>
+                  <label slot="label"> Last name </label>
+                  <vaadin-text-field class="full-width"></vaadin-text-field>
+                </vaadin-form-item>
+                <vaadin-form-item colspan="2">
+                  <label slot="label"> Username </label>
+                  <vaadin-text-field class="full-width" colspan="2"></vaadin-text-field>
+                </vaadin-form-item>
+                <vaadin-form-item>
+                  <label slot="label"> Password </label>
+                  <vaadin-password-field class="full-width"></vaadin-password-field>
+                </vaadin-form-item>
+                <vaadin-form-item>
+                  <label slot="label"> Confirm </label>
+                  <vaadin-password-field class="full-width"></vaadin-password-field>
+                </vaadin-form-item>
+              </vaadin-form-layout>
+            </vaadin-horizontal-layout>
+
+            <h1>autoResponsive inside Dialog</h1>
+            <vaadin-dialog
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-form-layout auto-responsive max-columns="2">
+                    <vaadin-text-field label="First name"></vaadin-text-field>
+                    <vaadin-text-field label="Last name"></vaadin-text-field>
+                    <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                    <vaadin-password-field label="Password"></vaadin-password-field>
+                    <vaadin-password-field label="Confirm"></vaadin-password-field>
+                  </vaadin-form-layout>
+                `,
+              )}
+            ></vaadin-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+
+            <h1>autoResponsive inside Dialog + expandColumns</h1>
+            <vaadin-dialog
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-form-layout auto-responsive max-columns="2" expand-columns>
+                    <vaadin-text-field label="First name"></vaadin-text-field>
+                    <vaadin-text-field label="Last name"></vaadin-text-field>
+                    <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                    <vaadin-password-field label="Password"></vaadin-password-field>
+                    <vaadin-password-field label="Confirm"></vaadin-password-field>
+                  </vaadin-form-layout>
+                `,
+              )}
+            ></vaadin-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+
+            <h1>autoResponsive inside Dialog 80%</h1>
+            <vaadin-dialog
+              width="80%"
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-form-layout auto-responsive max-columns="2">
+                    <vaadin-text-field label="First name"></vaadin-text-field>
+                    <vaadin-text-field label="Last name"></vaadin-text-field>
+                    <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                    <vaadin-password-field label="Password"></vaadin-password-field>
+                    <vaadin-password-field label="Confirm"></vaadin-password-field>
+                  </vaadin-form-layout>
+                `,
+              )}
+            ></vaadin-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+
+            <h1>autoResponsive inside Dialog 80% + expandColumns</h1>
+            <vaadin-dialog
+              width="80%"
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-form-layout auto-responsive max-columns="2" expand-columns>
+                    <vaadin-text-field label="First name"></vaadin-text-field>
+                    <vaadin-text-field label="Last name"></vaadin-text-field>
+                    <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                    <vaadin-password-field label="Password"></vaadin-password-field>
+                    <vaadin-password-field label="Confirm"></vaadin-password-field>
+                  </vaadin-form-layout>
+                `,
+              )}
+            ></vaadin-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+
+            <h1>autoResponsive inside HorizontalLayout inside Dialog + flex: 1</h1>
+            <vaadin-dialog
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-horizontal-layout theme="spacing">
+                    <vaadin-form-layout auto-responsive max-columns="2" style="flex: 1;">
+                      <vaadin-text-field label="First name"></vaadin-text-field>
+                      <vaadin-text-field label="Last name"></vaadin-text-field>
+                      <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                      <vaadin-password-field label="Password"></vaadin-password-field>
+                      <vaadin-password-field label="Confirm"></vaadin-password-field>
+                    </vaadin-form-layout>
+                    <vaadin-form-layout auto-responsive max-columns="2" style="flex: 1;" expand-columns>
+                      <vaadin-text-field label="First name"></vaadin-text-field>
+                      <vaadin-text-field label="Last name"></vaadin-text-field>
+                      <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                      <vaadin-password-field label="Password"></vaadin-password-field>
+                      <vaadin-password-field label="Confirm"></vaadin-password-field>
+                    </vaadin-form-layout>
+                  </vaadin-horizontal-layout>
+                `,
+              )}
+            ></vaadin-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+
+            <h1>autoResponsive inside Tabsheet inside Dialog</h1>
+            <vaadin-dialog
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-tabsheet>
+                    <vaadin-tabs slot="tabs">
+                      <vaadin-tab id="tab-0">Tab 0</vaadin-tab>
+                      <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
+                    </vaadin-tabs>
+                    <vaadin-form-layout tab="tab-0" auto-responsive max-columns="2">
+                      <vaadin-text-field label="First name"></vaadin-text-field>
+                      <vaadin-text-field label="Last name"></vaadin-text-field>
+                      <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                      <vaadin-password-field label="Password"></vaadin-password-field>
+                      <vaadin-password-field label="Confirm"></vaadin-password-field>
+                    </vaadin-form-layout>
+                    <vaadin-form-layout tab="tab-1" auto-responsive max-columns="2" expand-columns>
+                      <vaadin-text-field label="First name"></vaadin-text-field>
+                      <vaadin-text-field label="Last name"></vaadin-text-field>
+                      <vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
+                      <vaadin-password-field label="Password"></vaadin-password-field>
+                      <vaadin-password-field label="Confirm"></vaadin-password-field>
+                    </vaadin-form-layout>
+                  </vaadin-tabsheet>
+                `,
+              )}
+            ></vaadin-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+          `;
+        }
+
+        openPrevSiblingDialog(event) {
+          let dialog = event.target;
+          while (dialog && dialog.localName !== 'vaadin-dialog') {
+            dialog = dialog.previousSibling;
+          }
+          dialog.opened = true;
+        }
+      }
+      customElements.define('form-layout-examples', FormLayoutExamples);
+    </script>
+  </body>
+</html>
