feat: add expandColumns support to autoResponsive mode (#8749)

Author: vursen

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

@@ -123,6 +123,16 @@ export declare class FormLayoutMixinClass {
    */
   labelsAside: boolean;
 
+  /**
+   * When `autoResponsive` is enabled, specifies whether the columns should expand
+   * in width to evenly fill any remaining space after the layout has created as
+   * many fixed-width (`columnWidth`) columns as possible within the `maxColumns`
+   * limit. The default value is `false`.
+   *
+   * @attr {boolean} expand-columns
+   */
+  expandColumns: boolean;
+
   /**
    * Update the layout.
    */

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

@@ -166,6 +166,21 @@ export const FormLayoutMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * When `autoResponsive` is enabled, specifies whether the columns should expand
+         * in width to evenly fill any remaining space after the layout has created as
+         * many fixed-width (`columnWidth`) columns as possible within the `maxColumns`
+         * limit. The default value is `false`.
+         *
+         * @attr {boolean} expand-columns
+         */
+        expandColumns: {
+          type: Boolean,
+          sync: true,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /**
          * Current number of columns in the layout
          * @private

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

@@ -59,9 +59,10 @@ export const formLayoutStyles = css`
     --_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));
+    --_grid-repeat: var(--_grid-column-width);
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, var(--_grid-column-width));
+    grid-template-columns: repeat(auto-fit, var(--_grid-repeat));
     justify-items: start;
     gap: var(--vaadin-form-layout-row-spacing) var(--_grid-column-gap);
 
@@ -94,6 +95,7 @@ export const formLayoutStyles = css`
     --_form-item-labels-above: initial; /* true */
     --_form-item-labels-aside: ' '; /* false */
 
+    /* By default, place each child on a new row */
     grid-column-start: 1;
   }
 
@@ -113,6 +115,24 @@ export const formLayoutStyles = css`
     --_form-item-labels-above: ' '; /* false */
     --_form-item-labels-aside: initial; /* true */
   }
+
+  :host([auto-responsive][expand-columns]) #layout {
+    /*
+      The "min" value in minmax ensures that once "maxColumns" is reached, the grid stops adding
+      new columns and instead expands the existing ones evenly to fill the available space.
+
+      The "max" value in minmax allows CSS grid columns to grow and evenly distribute any space
+      that remains when there isn't room for an additional column and "maxColumns" hasn't been
+      reached yet.
+    */
+    --_grid-repeat: minmax(
+      max(var(--_grid-column-width), calc((100% - var(--_grid-column-max-total-gap)) / var(--_max-columns))),
+      1fr
+    );
+
+    /* Allow the layout to take up full available width of the parent element. */
+    flex-grow: 1;
+  }
 `;
 
 export const formRowStyles = css`

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

@@ -54,6 +54,20 @@ snapshots["vaadin-form-layout auto-responsive basic host labelsAside"] =
 `;
 /* end snapshot vaadin-form-layout auto-responsive basic host labelsAside */
 
+snapshots["vaadin-form-layout auto-responsive basic host expandColumns"] = 
+`<vaadin-form-layout
+  auto-responsive=""
+  expand-columns=""
+  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 expandColumns */
+
 snapshots["vaadin-form-layout auto-responsive basic shadow default"] = 
 `<div id="layout">
   <slot id="slot">

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

@@ -39,6 +39,11 @@ describe('vaadin-form-layout', () => {
           await nextResize(layout);
           await expect(layout).dom.to.equalSnapshot();
         });
+
+        it('expandColumns', async () => {
+          layout.expandColumns = true;
+          await expect(layout).dom.to.equalSnapshot();
+        });
       });
 
       describe('shadow', () => {

packages/form-layout/test/typings/form-layout.types.ts

@@ -17,6 +17,7 @@ assertType<boolean>(layout.autoResponsive);
 assertType<string>(layout.columnWidth);
 assertType<number>(layout.maxColumns);
 assertType<boolean>(layout.autoRows);
+assertType<boolean>(layout.expandColumns);
 
 assertType<string | 0 | undefined>(responsiveSteps.minWidth);
 assertType<number | undefined>(responsiveSteps.columns);

packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js

@@ -184,6 +184,20 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'form-items');
     });
 
+    it('expandColumns in narrow container', async () => {
+      container.style.width = `calc(${element.columnWidth} + 6em)`;
+      element.expandColumns = true;
+      await nextResize(element);
+      await visualDiff(container, 'form-items-expand-columns-narrow-container');
+    });
+
+    it('expandColumns in wide container', async () => {
+      container.style.width = '50em';
+      element.expandColumns = true;
+      await nextResize(element);
+      await visualDiff(container, 'form-items-expand-columns-wide-container');
+    });
+
     it('labelsAside in narrow container', async () => {
       container.style.width = `calc(${element.columnWidth} + 6em)`;
       element.labelsAside = true;
@@ -198,6 +212,22 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'form-items-labels-aside-wide-container');
     });
 
+    it('labelsAside + expandColumns in narrow container', async () => {
+      container.style.width = `calc(${element.columnWidth} + 6em)`;
+      element.labelsAside = true;
+      element.expandColumns = true;
+      await nextResize(element);
+      await visualDiff(container, 'form-items-labels-aside-expand-columns-narrow-container');
+    });
+
+    it('labelsAside + expandColumns in wide container', async () => {
+      container.style.width = '50em';
+      element.labelsAside = true;
+      element.expandColumns = true;
+      await nextResize(element);
+      await visualDiff(container, 'form-items-labels-aside-expand-columns-wide-container');
+    });
+
     it('labelsAside + custom CSS properties', async () => {
       element.labelsAside = true;
       element.style.setProperty('--vaadin-form-layout-label-width', '200px');