fix: enable rowspan for section widgets

vaadin · Sep 9, 2024 · 7961a10 · 7961a10
1 parent 7be8e20
commit 7961a10
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
@@ -59,7 +59,7 @@
       </vaadin-dashboard-widget>
 
       <vaadin-dashboard-section section-title="Section">
-        <vaadin-dashboard-widget widget-title="Sales closed this month">
+        <vaadin-dashboard-widget style="--vaadin-dashboard-item-rowspan: 2" widget-title="Sales closed this month">
           <div class="kpi-number">54 000€</div>
         </vaadin-dashboard-widget>
 

diff --git a/dev/dashboard.html b/dev/dashboard.html
@@ -62,6 +62,7 @@
           items: [
             {
               title: 'Sales closed this month',
+              rowspan: 2,
               content: '54 000€',
               type: 'kpi',
             },

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -66,6 +66,8 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
             );
 
           grid-column: var(--_vaadin-dashboard-item-column);
+          --_vaadin-dashboard-item-row: span var(--vaadin-dashboard-item-rowspan, 1);
+          grid-row: var(--_vaadin-dashboard-item-row);
         }
 
         header {

diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -264,6 +264,7 @@ describe('dashboard layout', () => {
 
   describe('row span', () => {
     it('should span multiple rows', async () => {
+      setMinimumRowHeight(dashboard, 100);
       setRowspan(childElements[0], 2);
       await nextFrame();
 
@@ -275,6 +276,7 @@ describe('dashboard layout', () => {
     });
 
     it('should span multiple rows on a single column', async () => {
+      setMinimumRowHeight(dashboard, 100);
       setRowspan(childElements[0], 2);
       await nextFrame();
 
@@ -457,6 +459,19 @@ describe('dashboard layout', () => {
       ]);
     });
 
+    it('should span multiple rows inside a section', async () => {
+      setMinimumRowHeight(dashboard, 100);
+      setRowspan(childElements[2], 2);
+      await nextFrame();
+
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 1],
+        [2, 3],
+        [2, null]
+      ]);
+    });
+
     it('should use minimum row height for all section rows', async () => {
       dashboard.style.width = `${columnWidth}px`;
       setMinimumRowHeight(dashboard, 300);