feat: add wrap theme to vertical-layout (#8128)

vaadin · Nov 13, 2024 · f31d9af · f31d9af
1 parent 0dee248
commit f31d9af
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 0 deletions.
diff --git a/packages/vertical-layout/src/vaadin-vertical-layout.d.ts b/packages/vertical-layout/src/vaadin-vertical-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 height
  */
 declare class VerticalLayout extends ThemableMixin(ElementMixin(HTMLElement)) {}
 

diff --git a/packages/vertical-layout/src/vaadin-vertical-layout.js b/packages/vertical-layout/src/vaadin-vertical-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 height
  *
  * @customElement
  * @extends HTMLElement

diff --git a/...cal-layout/test/visual/lumo/screenshots/vertical-layout/baseline/theme-wrap.png b/...cal-layout/test/visual/lumo/screenshots/vertical-layout/baseline/theme-wrap.png
diff --git a/packages/vertical-layout/test/visual/lumo/vertical-layout.test.js b/packages/vertical-layout/test/visual/lumo/vertical-layout.test.js
@@ -72,4 +72,10 @@ describe('vertical-layout', () => {
     element.setAttribute('theme', 'spacing-xl');
     await visualDiff(div, 'theme-spacing-xl');
   });
+
+  it('theme-wrap', async () => {
+    element.setAttribute('theme', 'wrap');
+    element.style.height = '100px';
+    await visualDiff(div, 'theme-wrap');
+  });
 });
diff --git a/...layout/test/visual/material/screenshots/vertical-layout/baseline/theme-wrap.png b/...layout/test/visual/material/screenshots/vertical-layout/baseline/theme-wrap.png
diff --git a/packages/vertical-layout/test/visual/material/vertical-layout.test.js b/packages/vertical-layout/test/visual/material/vertical-layout.test.js
@@ -52,4 +52,11 @@ describe('vertical-layout', () => {
     element.setAttribute('theme', 'margin padding spacing');
     await visualDiff(div, 'theme-margin-padding-spacing');
   });
+
+  it('theme-wrap', async () => {
+    element.setAttribute('theme', 'wrap');
+    element.style.height = '100px';
+
+    await visualDiff(div, 'theme-wrap');
+  });
 });
diff --git a/packages/vertical-layout/theme/lumo/vaadin-vertical-layout-styles.js b/packages/vertical-layout/theme/lumo/vaadin-vertical-layout-styles.js
@@ -29,6 +29,10 @@ const verticalLayout = css`
   :host([theme~='spacing-xl']) {
     gap: var(--lumo-space-xl);
   }
+
+  :host([theme~='wrap']) {
+    flex-wrap: wrap;
+  }
 `;
 
 registerStyles('vaadin-vertical-layout', verticalLayout, { moduleId: 'lumo-vertical-layout' });
diff --git a/packages/vertical-layout/theme/material/vaadin-vertical-layout-styles.js b/packages/vertical-layout/theme/material/vaadin-vertical-layout-styles.js
@@ -28,6 +28,10 @@ const verticalLayout = css`
   :host([theme~='spacing-xl']) {
     gap: 40px;
   }
+
+  :host([theme~='wrap']) {
+    flex-wrap: wrap;
+  }
 `;
 
 registerStyles('vaadin-vertical-layout', verticalLayout, { moduleId: 'material-vertical-layout' });