testing

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

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
@@ -10,7 +10,6 @@
     <script type="module">
       import '@vaadin/dashboard/vaadin-dashboard-layout.js';
       import '@vaadin/dashboard/vaadin-dashboard-widget.js';
-      import '@vaadin/dashboard/vaadin-dashboard-section.js';
     </script>
 
     <style>
@@ -57,16 +56,14 @@
         <div class="chart"></div>
       </vaadin-dashboard-widget>
 
-      <vaadin-dashboard-section section-title="Section">
-        <vaadin-dashboard-widget widget-title="Sales closed this month">
-          <div class="kpi-number">54 000€</div>
-        </vaadin-dashboard-widget>
+      <vaadin-dashboard-widget widget-title="Sales closed this month">
+        <div class="kpi-number">54 000€</div>
+      </vaadin-dashboard-widget>
 
-        <vaadin-dashboard-widget widget-title="Just some number">
-          <span slot="header">2014-2024</span>
-          <div class="kpi-number">1234</div>
-        </vaadin-dashboard-widget>
-      </vaadin-dashboard-section>
+      <vaadin-dashboard-widget widget-title="Just some number">
+        <span slot="header">2014-2024</span>
+        <div class="kpi-number">1234</div>
+      </vaadin-dashboard-widget>
 
       <vaadin-dashboard-widget>
         <h2 slot="title">Activity since 2023</h2>

diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -36,10 +36,13 @@ export const DashboardLayoutMixin = (superClass) =>
             var(--_vaadin-dashboard-default-col-max-width)
           );
 
+          /* Effective maxcolumn count */
+          --_vaadin-dashboard-col-max-count: var(--vaadin-dashboard-col-max-count, 6);
+
           /* Effective column count */
           --_vaadin-dashboard-effective-col-count: min(
             var(--_vaadin-dashboard-col-count),
-            var(--vaadin-dashboard-col-max-count)
+            var(--_vaadin-dashboard-col-max-count)
           );
 
           display: grid;

diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -34,7 +34,8 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
       :host {
         display: grid;
         grid-template-columns: subgrid;
-        grid-column: 1 / -1 !important;
+        --_vaadin-dashboard-section-column: 1 / calc(var(--_vaadin-dashboard-effective-col-count) + 1);
+        grid-column: var(--_vaadin-dashboard-section-column) !important;
         gap: var(--vaadin-dashboard-gap, 1rem);
       }
 
@@ -44,7 +45,7 @@ class DashboardSection extends ControllerMixin(ElementMixin(PolylitMixin(LitElem
 
       header {
         display: flex;
-        grid-column: 1 / -1;
+        grid-column: var(--_vaadin-dashboard-section-column);
         justify-content: space-between;
         align-items: center;
       }

diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
@@ -14,6 +14,9 @@ import {
   setMinimumColumnWidth,
 } from './helpers.js';
 
+// eslint-disable-next-line no-console
+console.log(navigator.userAgent);
+
 /**
  * Validates the given grid layout.
  *

diff --git a/packages/dashboard/test/dashboard.test.ts b/packages/dashboard/test/dashboard.test.ts
@@ -7,6 +7,9 @@ import { getElementFromCell, setGap, setMaximumColumnWidth, setMinimumColumnWidt
 
 type TestDashboardItem = DashboardItem & { id: string };
 
+// eslint-disable-next-line no-console
+console.log(navigator.userAgent);
+
 describe('dashboard', () => {
   let dashboard: Dashboard<TestDashboardItem>;
   const columnWidth = 100;