feat: add gap support to dashboard (#7660)

dev/dashboard-layout.html

@@ -18,14 +18,13 @@
         border-radius: 4px;
         padding: 1em;
         text-align: center;
-        margin: 0.5em;
-        box-sizing: border-box;
         height: 100px;
       }
 
       vaadin-dashboard-layout {
         --vaadin-dashboard-col-min-width: 300px;
         --vaadin-dashboard-col-max-width: 500px;
+        --vaadin-dashboard-gap: 20px;
       }
     </style>
   </head>

packages/dashboard/src/vaadin-dashboard-layout-mixin.js

@@ -40,6 +40,8 @@ export const DashboardLayoutMixin = (superClass) =>
             auto-fill,
             minmax(var(--_vaadin-dashboard-col-min-width), var(--_vaadin-dashboard-col-max-width))
           );
+
+          gap: var(--vaadin-dashboard-gap, 1rem);
         }
 
         ::slotted(*) {

packages/dashboard/test/dashboard-layout.test.ts

@@ -199,4 +199,41 @@ describe('dashboard layout', () => {
       ]);
     });
   });
+
+  describe('gap', () => {
+    it('should have a default gap', () => {
+      // Clear the gap used in the tests
+      setGap(dashboard, undefined);
+      // Increase the width of the dashboard to fit two items and a gap
+      dashboard.style.width = `${columnWidth * 2 + remValue}px`;
+
+      const { right: item0Right } = childElements[0].getBoundingClientRect();
+      const { left: item1Left } = childElements[1].getBoundingClientRect();
+      // Expect the items to have a gap of 1rem
+      expect(item1Left - item0Right).to.eql(remValue);
+    });
+
+    it('should have a custom gap between items horizontally', () => {
+      const customGap = 10;
+      setGap(dashboard, customGap);
+      // Increase the width of the dashboard to fit two items and a gap
+      dashboard.style.width = `${columnWidth * 2 + customGap}px`;
+
+      const { right: item0Right } = childElements[0].getBoundingClientRect();
+      const { left: item1Left } = childElements[1].getBoundingClientRect();
+      // Expect the items to have a gap of 10px
+      expect(item1Left - item0Right).to.eql(customGap);
+    });
+
+    it('should have a custom gap between items vertically', () => {
+      const customGap = 10;
+      setGap(dashboard, customGap);
+      dashboard.style.width = `${columnWidth}px`;
+
+      const { bottom: item0Bottom } = childElements[0].getBoundingClientRect();
+      const { top: item1Top } = childElements[1].getBoundingClientRect();
+      // Expect the items to have a gap of 10px
+      expect(item1Top - item0Bottom).to.eql(customGap);
+    });
+  });
 });

packages/dashboard/test/helpers.ts

@@ -54,6 +54,6 @@ export function setColspan(element: HTMLElement, colspan?: number): void {
 /**
  * Sets the gap between the cells of the dashboard.
  */
-export function setGap(dashboard: HTMLElement, gap: number): void {
-  dashboard.style.gap = `${gap}px`;
+export function setGap(dashboard: HTMLElement, gap?: number): void {
+  dashboard.style.setProperty('--vaadin-dashboard-gap', gap !== undefined ? `${gap}px` : null);
 }

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

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const dashboardLayoutStyles = css`
+  :host {
+    --vaadin-dashboard-gap: var(--lumo-space-m);
+  }
+`;
+
+registerStyles('vaadin-dashboard-layout', [dashboardLayoutStyles], {
+  moduleId: 'lumo-dashboard-layout',
+});

packages/dashboard/theme/lumo/vaadin-dashboard-layout.js

@@ -1 +1,2 @@
+import './vaadin-dashboard-layout-styles.js';
 import '../../src/vaadin-dashboard-layout.js';

packages/dashboard/theme/lumo/vaadin-dashboard-styles.js

@@ -0,0 +1,6 @@
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
+
+registerStyles('vaadin-dashboard', [dashboardLayoutStyles], {
+  moduleId: 'lumo-dashboard',
+});

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

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const dashboardLayoutStyles = css`
+  :host {
+    --vaadin-dashboard-gap: 1rem;
+  }
+`;
+
+registerStyles('vaadin-dashboard-layout', [dashboardLayoutStyles], {
+  moduleId: 'material-dashboard-layout',
+});

packages/dashboard/theme/material/vaadin-dashboard-layout.js

@@ -1 +1,2 @@
+import './vaadin-dashboard-layout-styles.js';
 import '../../src/vaadin-dashboard-layout.js';

packages/dashboard/theme/material/vaadin-dashboard-styles.js

@@ -0,0 +1,6 @@
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
+
+registerStyles('vaadin-dashboard', [dashboardLayoutStyles], {
+  moduleId: 'material-dashboard',
+});