fix: column span in section

vaadin · Aug 22, 2024 · b260a6c · b260a6c
1 parent 2be720f
commit b260a6c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -42,6 +42,16 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
         display: none !important;
       }
 
+      ::slotted(*) {
+        --_vaadin-dashboard-item-column: span
+          min(
+            var(--vaadin-dashboard-item-colspan, 1),
+            var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
+          );
+
+        grid-column: var(--_vaadin-dashboard-item-column);
+      }
+
       header {
         display: flex;
         grid-column: 1 / -1;

diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -320,7 +320,7 @@ describe('dashboard layout', () => {
           <div id="item-2">Section item 2</div>
           <div id="item-3">Section item 3</div>
         </vaadin-dashboard-section>
-        `);
+      `);
       dashboard.appendChild(section);
       await nextFrame();
       childElements = [...dashboard.querySelectorAll('div')];
@@ -371,6 +371,18 @@ describe('dashboard layout', () => {
       ]);
     });
 
+    it('should span multiple columns inside a section', async () => {
+      dashboard.style.width = `${columnWidth * 3}px`;
+      setColspan(childElements[2], 2);
+      await nextFrame();
+
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 1, null],
+        [2, 2, 3],
+      ]);
+    });
+
     describe('gap', () => {
       it('should have a default gap', () => {
         // Clear the gap used in the tests