feat: add wrap theme to horizontal-layout (#8125)

* feat: add `wrap` theme to horizontal-layout

Adds a new `wrap` theme to `vaadin-horizontal-layout` that simply sets
the `flex-wrap` CSS property on the element to `wrap`, allowing elements
to move to the next line, if there's no space left.

Fixes #7949

* test: add visual tests for the new theme

packages/horizontal-layout/src/vaadin-horizontal-layout.d.ts

@@ -25,6 +25,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `theme="margin"` | Applies the default amount of CSS margin for the host element (specified by the theme)
  * `theme="padding"` | Applies the default amount of CSS padding for the host element (specified by the theme)
  * `theme="spacing"` | Applies the default amount of CSS margin between items (specified by the theme)
+ * `theme="wrap"` | Items wrap to the next row when they exceed the layout width
  */
 declare class HorizontalLayout extends ThemableMixin(ElementMixin(HTMLElement)) {}
 

packages/horizontal-layout/src/vaadin-horizontal-layout.js

@@ -27,6 +27,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `theme="margin"` | Applies the default amount of CSS margin for the host element (specified by the theme)
  * `theme="padding"` | Applies the default amount of CSS padding for the host element (specified by the theme)
  * `theme="spacing"` | Applies the default amount of CSS margin between items (specified by the theme)
+ * `theme="wrap"` | Items wrap to the next row when they exceed the layout width
  *
  * @customElement
  * @extends HTMLElement

packages/horizontal-layout/test/visual/lumo/horizontal-layout.test.js

@@ -72,4 +72,10 @@ describe('horizontal-layout', () => {
     element.setAttribute('theme', 'spacing-xl');
     await visualDiff(div, 'theme-spacing-xl');
   });
+
+  it('theme-wrap', async () => {
+    element.setAttribute('theme', 'wrap');
+    element.style.width = '100px';
+    await visualDiff(div, 'theme-wrap');
+  });
 });

packages/horizontal-layout/test/visual/material/horizontal-layout.test.js

@@ -52,4 +52,10 @@ describe('horizontal-layout', () => {
     element.setAttribute('theme', 'margin padding spacing');
     await visualDiff(div, 'theme-margin-padding-spacing');
   });
+
+  it('theme-wrap', async () => {
+    element.setAttribute('theme', 'wrap');
+    element.style.width = '100px';
+    await visualDiff(div, 'theme-wrap');
+  });
 });

packages/horizontal-layout/theme/lumo/vaadin-horizontal-layout-styles.js

@@ -29,6 +29,10 @@ const horizontalLayout = css`
   :host([theme~='spacing-xl']) {
     gap: var(--lumo-space-xl);
   }
+
+  :host([theme~='wrap']) {
+    flex-wrap: wrap;
+  }
 `;
 
 registerStyles('vaadin-horizontal-layout', horizontalLayout, { moduleId: 'lumo-horizontal-layout' });

packages/horizontal-layout/theme/material/vaadin-horizontal-layout-styles.js

@@ -28,6 +28,10 @@ const horizontalLayout = css`
   :host([theme~='spacing-xl']) {
     gap: 40px;
   }
+
+  :host([theme~='wrap']) {
+    flex-wrap: wrap;
+  }
 `;
 
 registerStyles('vaadin-horizontal-layout', horizontalLayout, { moduleId: 'material-horizontal-layout' });