From 3c451c6cd0203f87af2a4a16c2ab75337cc08a12 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Fri, 16 Aug 2024 14:18:09 +0300 Subject: [PATCH] feat: add gap support to dashboard (#7660) --- dev/dashboard-layout.html | 3 +- .../src/vaadin-dashboard-layout-mixin.js | 2 + .../dashboard/test/dashboard-layout.test.ts | 37 +++++++++++++++++++ packages/dashboard/test/helpers.ts | 4 +- .../lumo/vaadin-dashboard-layout-styles.js | 11 ++++++ .../theme/lumo/vaadin-dashboard-layout.js | 1 + .../theme/lumo/vaadin-dashboard-styles.js | 6 +++ .../vaadin-dashboard-layout-styles.js | 11 ++++++ .../theme/material/vaadin-dashboard-layout.js | 1 + .../theme/material/vaadin-dashboard-styles.js | 6 +++ 10 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-layout-styles.js diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html index 58d8beb694..e5dee1145b 100644 --- a/dev/dashboard-layout.html +++ b/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; } diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js index 33af36a735..3b61454251 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js +++ b/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(*) { diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index 816d0036af..77e949db4d 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/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); + }); + }); }); diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts index 17d1f07de5..935222fe99 100644 --- a/packages/dashboard/test/helpers.ts +++ b/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); } diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js new file mode 100644 index 0000000000..3b23ad7ceb --- /dev/null +++ b/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', +}); diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js b/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js index 523bb302e6..f3bc3a4eb2 100644 --- a/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js +++ b/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js @@ -1 +1,2 @@ +import './vaadin-dashboard-layout-styles.js'; import '../../src/vaadin-dashboard-layout.js'; diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js index e69de29bb2..6701a4c3d1 100644 --- a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js +++ b/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', +}); diff --git a/packages/dashboard/theme/material/vaadin-dashboard-layout-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-layout-styles.js new file mode 100644 index 0000000000..141c6e34fd --- /dev/null +++ b/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', +}); diff --git a/packages/dashboard/theme/material/vaadin-dashboard-layout.js b/packages/dashboard/theme/material/vaadin-dashboard-layout.js index 523bb302e6..f3bc3a4eb2 100644 --- a/packages/dashboard/theme/material/vaadin-dashboard-layout.js +++ b/packages/dashboard/theme/material/vaadin-dashboard-layout.js @@ -1 +1,2 @@ +import './vaadin-dashboard-layout-styles.js'; import '../../src/vaadin-dashboard-layout.js'; diff --git a/packages/dashboard/theme/material/vaadin-dashboard-styles.js b/packages/dashboard/theme/material/vaadin-dashboard-styles.js index e69de29bb2..a5572ebecf 100644 --- a/packages/dashboard/theme/material/vaadin-dashboard-styles.js +++ b/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', +});