feat: add FormItem and labelsAside support to autoResponsive mode (#8729)

- Added support for <vaadin-form-item> elements with labels positioned above inputs by default when used with autoResponsive (which is opposite to its default behavior with responsiveSteps).
- Introduced a labelsAside property, which allows <vaadin-form-item> labels to be displayed next to inputs when there is enough space in the container.

Author: vursen

dev/form-layout-auto-responsive.html

@@ -191,6 +191,37 @@ <h1>autoResponsive inside Dialog + expandColumns</h1>
             ></vaadin-dialog>
             <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
 
+            <h1>autoResponsive inside Dialog + labelsAside</h1>
+            <vaadin-dialog
+              ${dialogRenderer(
+                (dialog) => html`
+                  <vaadin-form-layout auto-responsive auto-rows 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-dialog>
+            <vaadin-button @click="${this.openPrevSiblingDialog}">Open</vaadin-button>
+
             <h1>autoResponsive inside Dialog 80%</h1>
             <vaadin-dialog
               width="80%"

packages/form-layout/src/vaadin-form-layout-mixin.d.ts

@@ -108,6 +108,21 @@ export declare class FormLayoutMixinClass {
    */
   autoRows: boolean;
 
+  /**
+   * When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning
+   * labels beside the fields. If the layout is too narrow to fit a single column
+   * with side labels, they revert to their default position above the fields.
+   *
+   * To customize the label width and the gap between the label and the field,
+   * use the following CSS properties:
+   *
+   * - `--vaadin-form-layout-label-width`
+   * - `--vaadin-form-layout-label-spacing`
+   *
+   * @attr {boolean} labels-aside
+   */
+  labelsAside: boolean;
+
   /**
    * Update the layout.
    */

packages/form-layout/src/vaadin-form-layout-mixin.js

@@ -146,6 +146,26 @@ export const FormLayoutMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning
+         * labels beside the fields. If the layout is too narrow to fit a single column
+         * with side labels, they revert to their default position above the fields.
+         *
+         * To customize the label width and the gap between the label and the field,
+         * use the following CSS properties:
+         *
+         * - `--vaadin-form-layout-label-width`
+         * - `--vaadin-form-layout-label-spacing`
+         *
+         * @attr {boolean} labels-aside
+         */
+        labelsAside: {
+          type: Boolean,
+          sync: true,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /**
          * Current number of columns in the layout
          * @private
@@ -392,8 +412,10 @@ export const FormLayoutMixin = (superClass) =>
 
     /** @private */
     __updateCSSGridLayout() {
-      let resetColumn = false;
+      const fitsLabelsAside = this.offsetWidth >= this.__columnWidthWithLabelsAside;
+      this.$.layout.toggleAttribute('fits-labels-aside', this.labelsAside && fitsLabelsAside);
 
+      let resetColumn = false;
       [...this.children]
         .flatMap((child) => {
           return child.localName === 'vaadin-form-row' ? [...child.children] : child;
@@ -448,4 +470,10 @@ export const FormLayoutMixin = (superClass) =>
         this.style.removeProperty('--_max-columns');
       }
     }
+
+    /** @private */
+    get __columnWidthWithLabelsAside() {
+      const { backgroundPositionY } = getComputedStyle(this.$.layout, '::before');
+      return parseFloat(backgroundPositionY);
+    }
   };

packages/form-layout/src/vaadin-form-layout-styles.js

@@ -45,19 +45,25 @@ export const formLayoutStyles = css`
   }
 
   :host([auto-responsive]) {
-    --_column-gap: var(--vaadin-form-layout-column-spacing);
-    --_max-total-gap-width: calc((var(--_max-columns) - 1) * var(--_column-gap));
-    --_max-total-col-width: calc(var(--_max-columns) * var(--_column-width));
+    --_column-width-labels-above: var(--_column-width);
+    --_column-width-labels-aside: calc(
+      var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
+    );
 
     display: flex;
-    min-width: var(--_column-width);
+    min-width: var(--_column-width-labels-above);
   }
 
   :host([auto-responsive]) #layout {
+    --_grid-column-gap: var(--vaadin-form-layout-column-spacing);
+    --_grid-column-width: var(--_column-width-labels-above);
+    --_grid-column-max-total-gap: calc((var(--_max-columns) - 1) * var(--_grid-column-gap));
+    --_grid-column-max-total-width: calc(var(--_max-columns) * var(--_column-width-labels-above));
+
     display: grid;
-    grid-template-columns: repeat(auto-fit, var(--_column-width));
+    grid-template-columns: repeat(auto-fit, var(--_grid-column-width));
     justify-items: start;
-    gap: var(--vaadin-form-layout-row-spacing) var(--_column-gap);
+    gap: var(--vaadin-form-layout-row-spacing) var(--_grid-column-gap);
 
     /*
       To prevent the layout from exceeding the column limit defined by --_max-columns,
@@ -71,7 +77,7 @@ export const formLayoutStyles = css`
       number of columns inside <vaadin-overlay>, which creates a new stacking context
       without a predefined width.
     */
-    width: calc(var(--_max-total-col-width) + var(--_max-total-gap-width));
+    width: calc(var(--_grid-column-max-total-width) + var(--_grid-column-max-total-gap));
 
     /*
       Firefox requires min-width on both :host and #layout to allow the layout
@@ -80,13 +86,33 @@ export const formLayoutStyles = css`
     min-width: inherit;
   }
 
+  :host([auto-responsive]) #layout::before {
+    background-position-y: var(--_column-width-labels-aside);
+  }
+
   :host([auto-responsive]) #layout ::slotted(*) {
+    --_form-item-labels-above: initial; /* true */
+    --_form-item-labels-aside: ' '; /* false */
+
     grid-column-start: 1;
   }
 
   :host([auto-responsive][auto-rows]) #layout ::slotted(*) {
     grid-column-start: var(--_column-start, auto);
   }
+
+  :host([auto-responsive][labels-aside]) #layout {
+    --_grid-column-max-total-width: calc(var(--_max-columns) * var(--_column-width-labels-aside));
+  }
+
+  :host([auto-responsive][labels-aside]) #layout[fits-labels-aside] {
+    --_grid-column-width: var(--_column-width-labels-aside);
+  }
+
+  :host([auto-responsive][labels-aside]) #layout[fits-labels-aside] ::slotted(*) {
+    --_form-item-labels-above: ' '; /* false */
+    --_form-item-labels-aside: initial; /* true */
+  }
 `;
 
 export const formRowStyles = css`
@@ -109,30 +135,33 @@ export const formRowStyles = css`
 
 export const formItemStyles = css`
   :host {
+    --_form-item-labels-above: ' '; /* false */
+    --_form-item-labels-aside: initial; /* true */
+
     display: inline-flex;
-    flex-direction: row;
-    align-items: baseline;
+    align-items: var(--_form-item-labels-aside, baseline);
+    flex-flow: var(--_form-item-labels-above, column) nowrap;
+    justify-self: stretch;
     margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
   }
 
   :host([label-position='top']) {
-    flex-direction: column;
-    align-items: stretch;
+    --_form-item-labels-above: initial; /* true */
+    --_form-item-labels-aside: ' '; /* false */
   }
 
   :host([hidden]) {
     display: none !important;
   }
 
   #label {
-    width: var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em));
+    width: var(
+      --_form-item-labels-aside,
+      var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
+    );
     flex: 0 0 auto;
   }
 
-  :host([label-position='top']) #label {
-    width: auto;
-  }
-
   #spacing {
     width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
     flex: 0 0 auto;

packages/form-layout/test/dom/__snapshots__/form-layout.test.snap.js

@@ -40,6 +40,20 @@ snapshots["vaadin-form-layout auto-responsive basic host columnWidth"] =
 `;
 /* end snapshot vaadin-form-layout auto-responsive basic host columnWidth */
 
+snapshots["vaadin-form-layout auto-responsive basic host labelsAside"] = 
+`<vaadin-form-layout
+  auto-responsive=""
+  labels-aside=""
+  style="--_column-width: 13em; --_max-columns: 10;"
+>
+  <input placeholder="First name">
+  <input placeholder="Last name">
+  <input placeholder="Email">
+  <input placeholder="Phone">
+</vaadin-form-layout>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic host labelsAside */
+
 snapshots["vaadin-form-layout auto-responsive basic shadow default"] = 
 `<div id="layout">
   <slot id="slot">
@@ -48,6 +62,25 @@ snapshots["vaadin-form-layout auto-responsive basic shadow default"] =
 `;
 /* end snapshot vaadin-form-layout auto-responsive basic shadow default */
 
+snapshots["vaadin-form-layout auto-responsive basic shadow labelsAside in narrow container"] = 
+`<div id="layout">
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic shadow labelsAside in narrow container */
+
+snapshots["vaadin-form-layout auto-responsive basic shadow labelsAside in wide container"] = 
+`<div
+  fits-labels-aside=""
+  id="layout"
+>
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout auto-responsive basic shadow labelsAside in wide container */
+
 snapshots["vaadin-form-layout auto-responsive autoRows default"] = 
 `<vaadin-form-layout
   auto-responsive=""

packages/form-layout/test/dom/form-layout.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import '../../src/vaadin-form-layout.js';
 
 describe('vaadin-form-layout', () => {
@@ -33,12 +33,32 @@ describe('vaadin-form-layout', () => {
           layout.columnWidth = '15em';
           await expect(layout).dom.to.equalSnapshot();
         });
+
+        it('labelsAside', async () => {
+          layout.labelsAside = true;
+          await nextResize(layout);
+          await expect(layout).dom.to.equalSnapshot();
+        });
       });
 
       describe('shadow', () => {
         it('default', async () => {
           await expect(layout).shadowDom.to.equalSnapshot();
         });
+
+        it('labelsAside in narrow container', async () => {
+          layout.style.width = `calc(${layout.columnWidth} + 6em)`;
+          layout.labelsAside = true;
+          await nextResize(layout);
+          await expect(layout).shadowDom.to.equalSnapshot();
+        });
+
+        it('labelsAside in wide container', async () => {
+          layout.style.width = '40em';
+          layout.labelsAside = true;
+          await nextResize(layout);
+          await expect(layout).shadowDom.to.equalSnapshot();
+        });
       });
     });
 

packages/form-layout/test/form-item.test.js

@@ -75,7 +75,7 @@ describe('form-item', () => {
       item.setAttribute('label-position', 'top');
 
       expect(getComputedStyle(item).getPropertyValue('flex-direction')).to.equal('column');
-      expect(getComputedStyle(item).getPropertyValue('align-items')).to.equal('stretch');
+      expect(getComputedStyle(item).getPropertyValue('align-items')).to.equal('normal');
     });
   });