From 22832364ee8f9746a3f56ad63766f2aa1f80d7fd Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Tue, 13 Aug 2024 15:28:08 +0300 Subject: [PATCH 01/11] feat: add vaadin-dashboard-layout --- dev/dashboard-layout.html | 42 ++++++ .../src/vaadin-dashboard-layout-mixin.d.ts | 20 +++ .../src/vaadin-dashboard-layout-mixin.js | 45 ++++++ .../src/vaadin-dashboard-layout.d.ts | 27 ++++ .../dashboard/src/vaadin-dashboard-layout.js | 40 ++++++ packages/dashboard/src/vaadin-dashboard.d.ts | 3 +- packages/dashboard/src/vaadin-dashboard.js | 4 +- .../dashboard/test/dashboard-layout.test.ts | 129 ++++++++++++++++++ packages/dashboard/test/helpers.ts | 52 +++++++ .../dashboard/test/typings/dashboard.types.ts | 20 +++ .../theme/lumo/vaadin-dashboard-layout.js | 1 + .../theme/material/vaadin-dashboard-layout.js | 1 + .../dashboard/vaadin-dashboard-layout.d.ts | 1 + packages/dashboard/vaadin-dashboard-layout.js | 3 + 14 files changed, 386 insertions(+), 2 deletions(-) create mode 100644 dev/dashboard-layout.html create mode 100644 packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts create mode 100644 packages/dashboard/src/vaadin-dashboard-layout-mixin.js create mode 100644 packages/dashboard/src/vaadin-dashboard-layout.d.ts create mode 100644 packages/dashboard/src/vaadin-dashboard-layout.js create mode 100644 packages/dashboard/test/dashboard-layout.test.ts create mode 100644 packages/dashboard/test/helpers.ts create mode 100644 packages/dashboard/test/typings/dashboard.types.ts create mode 100644 packages/dashboard/theme/lumo/vaadin-dashboard-layout.js create mode 100644 packages/dashboard/theme/material/vaadin-dashboard-layout.js create mode 100644 packages/dashboard/vaadin-dashboard-layout.d.ts create mode 100644 packages/dashboard/vaadin-dashboard-layout.js diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html new file mode 100644 index 0000000000..649cabb195 --- /dev/null +++ b/dev/dashboard-layout.html @@ -0,0 +1,42 @@ + + + + + + + Dashboard layout + + + + + + + + + +
Item 0
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+ + + diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts b/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts new file mode 100644 index 0000000000..350c711546 --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts @@ -0,0 +1,20 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import type { Constructor } from '@open-wc/dedupe-mixin'; + +/** + * A mixin to enable the dashboard layout functionality. + */ +export declare function DashboardLayoutMixin>( + base: T, +): Constructor & T; + +export declare class DashboardLayoutMixinClass {} diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js new file mode 100644 index 0000000000..c62f4f9fcb --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js @@ -0,0 +1,45 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +/** + * A mixin to enable the dashboard layout functionality + * + * @polymerMixin + * @mixes ResizeMixin + */ +export const DashboardLayoutMixin = (superClass) => + class DashboardLayoutMixinClass extends superClass { + static get styles() { + return css` + :host { + display: grid; + + --_vaadin-dashboard-default-col-min-width: 200px; + --_vaadin-dashboard-default-col-max-width: 400px; + + --_vaadin-dashboard-col-min-width: var( + --vaadin-dashboard-col-min-width, + var(--_vaadin-dashboard-default-col-min-width) + ); + --_vaadin-dashboard-col-max-width: var( + --vaadin-dashboard-col-max-width, + var(--_vaadin-dashboard-default-col-max-width) + ); + + grid-template-columns: repeat( + auto-fill, + minmax(var(--_vaadin-dashboard-col-min-width), var(--_vaadin-dashboard-col-max-width)) + ); + } + `; + } + }; diff --git a/packages/dashboard/src/vaadin-dashboard-layout.d.ts b/packages/dashboard/src/vaadin-dashboard-layout.d.ts new file mode 100644 index 0000000000..8437503236 --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard-layout.d.ts @@ -0,0 +1,27 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; + +export type DashboardLayoutEventMap = HTMLElementEventMap; + +/** + * A responsive, grid-based dashboard layout component + */ +declare class DashboardLayout extends ElementMixin(ThemableMixin(HTMLElement)) {} + +declare global { + interface HTMLElementTagNameMap { + 'vaadin-dashboard-layout': DashboardLayout; + } +} + +export { DashboardLayout }; diff --git a/packages/dashboard/src/vaadin-dashboard-layout.js b/packages/dashboard/src/vaadin-dashboard-layout.js new file mode 100644 index 0000000000..a4f799f6b5 --- /dev/null +++ b/packages/dashboard/src/vaadin-dashboard-layout.js @@ -0,0 +1,40 @@ +/** + * @license + * Copyright (c) 2000 - 2024 Vaadin Ltd. + * + * This program is available under Vaadin Commercial License and Service Terms. + * + * + * See https://vaadin.com/commercial-license-and-service-terms for the full + * license. + */ +import { html, LitElement } from 'lit'; +import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js'; + +/** + * A responsive, grid-based dashboard layout component + * + * @customElement + * @extends HTMLElement + * @mixes DashboardLayoutMixin + * @mixes ElementMixin + * @mixes ThemableMixin + */ +class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) { + static get is() { + return 'vaadin-dashboard-layout'; + } + + /** @protected */ + render() { + return html``; + } +} + +defineCustomElement(DashboardLayout); + +export { DashboardLayout }; diff --git a/packages/dashboard/src/vaadin-dashboard.d.ts b/packages/dashboard/src/vaadin-dashboard.d.ts index 9ddad5ac0a..bf19da0601 100644 --- a/packages/dashboard/src/vaadin-dashboard.d.ts +++ b/packages/dashboard/src/vaadin-dashboard.d.ts @@ -9,11 +9,12 @@ * license. */ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js'; /** * A responsive, grid-based dashboard layout component */ -declare class Dashboard extends ElementMixin(HTMLElement) {} +declare class Dashboard extends DashboardLayoutMixin(ElementMixin(HTMLElement)) {} declare global { interface HTMLElementTagNameMap { diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js index 09e890c7b6..60bb5ad67f 100644 --- a/packages/dashboard/src/vaadin-dashboard.js +++ b/packages/dashboard/src/vaadin-dashboard.js @@ -13,6 +13,7 @@ import { html, LitElement } from 'lit'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js'; /** * A responsive, grid-based dashboard layout component @@ -20,8 +21,9 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; * @customElement * @extends HTMLElement * @mixes ElementMixin + * @mixes DashboardLayoutMixin */ -class Dashboard extends ElementMixin(PolylitMixin(LitElement)) { +class Dashboard extends DashboardLayoutMixin(ElementMixin(PolylitMixin(LitElement))) { static get is() { return 'vaadin-dashboard'; } diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts new file mode 100644 index 0000000000..47dc9a9f04 --- /dev/null +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -0,0 +1,129 @@ +import { expect } from '@vaadin/chai-plugins'; +import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; +import '../vaadin-dashboard-layout.js'; +import type { DashboardLayout } from '../vaadin-dashboard-layout.js'; +import { + getColumnWidths, + getElementFromCell, + setGap, + setMaximumColumnWidth, + setMinimumColumnWidth, +} from './helpers.js'; + +/** + * Validates the given grid layout. + * + * This function iterates through a number matrix representing the IDs of + * the items in the layout, and checks if the elements in the corresponding + * cells of the grid match the expected IDs. + * + * For example, the following layout would expect a grid with two columns + * and three rows, where the first row has one element with ID "item-0" spanning + * two columns, and the second row has two elements with IDs "item-1" and "item-2" + * where the first one spans two rows, and the last cell in the third row has + * an element with ID "item-3": + * + * ``` + * [ + * [0, 0], + * [1, 2], + * [1, 3] + * ] + * ``` + */ +function expectLayout(dashboard: DashboardLayout, layout: number[][]) { + layout.forEach((row, rowIndex) => { + row.forEach((itemId, columnIndex) => { + const element = getElementFromCell(dashboard, rowIndex, columnIndex); + if (!element) { + expect(itemId).to.be.undefined; + } else { + expect(element.id).to.equal(`item-${itemId}`); + } + }); + }); +} + +describe('dashboard layout', () => { + let dashboard: DashboardLayout; + const columnWidth = 100; + + beforeEach(async () => { + dashboard = fixtureSync(` + +
Item 0
+
Item 1
+ + `); + // Disable gap between items in these tests + setGap(dashboard, 0); + // Set the column width to a fixed value + setMinimumColumnWidth(dashboard, columnWidth); + setMaximumColumnWidth(dashboard, columnWidth); + // Make the dashboard wide enough to fit all items on a single row + dashboard.style.width = `${columnWidth * dashboard.childElementCount}px`; + + await nextFrame(); + + expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth]); + /* prettier-ignore */ + expectLayout(dashboard, [ + [0, 1], + ]); + }); + + it('should be responsive', () => { + // Narrow down the component to fit one column + dashboard.style.width = `${columnWidth}px`; + + /* prettier-ignore */ + expectLayout(dashboard, [ + [0], + [1], + ]); + }); + + describe('minimum column width', () => { + it('should have one overflown column if narrowed below miminum column width', () => { + // Narrow down the component to have the width of half a column + dashboard.style.width = `${columnWidth / 2}px`; + // Expect the column width to still be the same (overflown) + expect(getColumnWidths(dashboard)).to.eql([columnWidth]); + }); + + it('should not overflow if narrowed to the minimum column width', () => { + // Set the min column width to half of the column width + setMinimumColumnWidth(dashboard, columnWidth / 2); + // Narrow down the component to have the width of half a column + dashboard.style.width = `${columnWidth / 2}px`; + // Expect the column width to equal the min column width + // expect(getColumnWidths(dashboard)).to.eql([columnWidth / 2]); + }); + + it('should have one wide column with large minimum column width', () => { + // Set the min column width to be twice as wide + setMinimumColumnWidth(dashboard, columnWidth * 2); + // Expect there to only be one column with twice the width + expect(getColumnWidths(dashboard)).to.eql([columnWidth * 2]); + /* prettier-ignore */ + expectLayout(dashboard, [ + [0], + [1], + ]); + }); + }); + + describe('maximum column width', () => { + it('should have one wide column with large maximum column width', () => { + // Allow the column to be twice as wide + setMaximumColumnWidth(dashboard, columnWidth * 2); + // Expect there to only be one column with twice the width + expect(getColumnWidths(dashboard)).to.eql([columnWidth * 2]); + /* prettier-ignore */ + expectLayout(dashboard, [ + [0], + [1], + ]); + }); + }); +}); diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts new file mode 100644 index 0000000000..509727e0b9 --- /dev/null +++ b/packages/dashboard/test/helpers.ts @@ -0,0 +1,52 @@ +/** + * Returns the effective column widths of the dashboard as an array of numbers. + */ +export function getColumnWidths(dashboard: HTMLElement): number[] { + return getComputedStyle(dashboard) + .gridTemplateColumns.split(' ') + .map((width) => parseFloat(width)); +} + +/** + * Returns the effective row heights of the dashboard as an array of numbers. + */ +export function getRowHeights(dashboard: HTMLElement): number[] { + return getComputedStyle(dashboard) + .gridTemplateRows.split(' ') + .map((height) => parseFloat(height)); +} + +/** + * Returns the element at the center of the cell at the given row and column index. + */ +export function getElementFromCell(dashboard: HTMLElement, rowIndex: number, columnIndex: number): Element | null { + const { top, left } = dashboard.getBoundingClientRect(); + const columnWidths = getColumnWidths(dashboard); + const rowHeights = getRowHeights(dashboard); + + const x = left + columnWidths.slice(0, columnIndex).reduce((sum, width) => sum + width, 0); + const y = top + rowHeights.slice(0, rowIndex).reduce((sum, height) => sum + height, 0); + + return document.elementFromPoint(x + columnWidths[columnIndex] / 2, y + rowHeights[rowIndex] / 2); +} + +/** + * Sets the minimum column width of the dashboard. + */ +export function setMinimumColumnWidth(dashboard: HTMLElement, width: number): void { + dashboard.style.setProperty('--vaadin-dashboard-col-min-width', `${width}px`); +} + +/** + * Sets the maximum column width of the dashboard. + */ +export function setMaximumColumnWidth(dashboard: HTMLElement, width: number): void { + dashboard.style.setProperty('--vaadin-dashboard-col-max-width', `${width}px`); +} + +/** + * Sets the gap between the cells of the dashboard. + */ +export function setGap(dashboard: HTMLElement, gap: number): void { + dashboard.style.gap = `${gap}px`; +} diff --git a/packages/dashboard/test/typings/dashboard.types.ts b/packages/dashboard/test/typings/dashboard.types.ts new file mode 100644 index 0000000000..4c775a8093 --- /dev/null +++ b/packages/dashboard/test/typings/dashboard.types.ts @@ -0,0 +1,20 @@ +import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js'; +import type { DashboardLayoutMixinClass } from '../../src/vaadin-dashboard-layout-mixin.js'; +import type { Dashboard } from '../../vaadin-dashboard.js'; +import type { DashboardLayout } from '../../vaadin-dashboard-layout.js'; + +const assertType = (actual: TExpected) => actual; + +/* Dashboard */ +const dashboard = document.createElement('vaadin-dashboard'); +assertType(dashboard); + +assertType(dashboard); +assertType(dashboard); + +/* DashboardLayout */ +const layout = document.createElement('vaadin-dashboard-layout'); +assertType(layout); + +assertType(layout); +assertType(layout); diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js b/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js new file mode 100644 index 0000000000..523bb302e6 --- /dev/null +++ b/packages/dashboard/theme/lumo/vaadin-dashboard-layout.js @@ -0,0 +1 @@ +import '../../src/vaadin-dashboard-layout.js'; diff --git a/packages/dashboard/theme/material/vaadin-dashboard-layout.js b/packages/dashboard/theme/material/vaadin-dashboard-layout.js new file mode 100644 index 0000000000..523bb302e6 --- /dev/null +++ b/packages/dashboard/theme/material/vaadin-dashboard-layout.js @@ -0,0 +1 @@ +import '../../src/vaadin-dashboard-layout.js'; diff --git a/packages/dashboard/vaadin-dashboard-layout.d.ts b/packages/dashboard/vaadin-dashboard-layout.d.ts new file mode 100644 index 0000000000..3738a8b0a0 --- /dev/null +++ b/packages/dashboard/vaadin-dashboard-layout.d.ts @@ -0,0 +1 @@ +export * from './src/vaadin-dashboard-layout.js'; diff --git a/packages/dashboard/vaadin-dashboard-layout.js b/packages/dashboard/vaadin-dashboard-layout.js new file mode 100644 index 0000000000..a1dc780790 --- /dev/null +++ b/packages/dashboard/vaadin-dashboard-layout.js @@ -0,0 +1,3 @@ +import './theme/lumo/vaadin-dashboard-layout.js'; + +export * from './src/vaadin-dashboard-layout.js'; From a000898c4cb2bfb9e78a66c16f0260db87c57f19 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 14 Aug 2024 14:21:57 +0300 Subject: [PATCH 02/11] test default min and max col width --- .../dashboard/test/dashboard-layout.test.ts | 20 ++++++++++++++++++- packages/dashboard/test/helpers.ts | 12 +++++++++-- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index 47dc9a9f04..ec77c4889b 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -84,6 +84,15 @@ describe('dashboard layout', () => { }); describe('minimum column width', () => { + it('should have a default minimum column width', () => { + // Clear the minimum column width used in the tests + setMinimumColumnWidth(dashboard, undefined); + // Narrow down the component to have the width of 0 + dashboard.style.width = '0'; + // Expect the column width to equal the default minimum column width + expect(getColumnWidths(dashboard)).to.eql([200]); + }); + it('should have one overflown column if narrowed below miminum column width', () => { // Narrow down the component to have the width of half a column dashboard.style.width = `${columnWidth / 2}px`; @@ -97,7 +106,7 @@ describe('dashboard layout', () => { // Narrow down the component to have the width of half a column dashboard.style.width = `${columnWidth / 2}px`; // Expect the column width to equal the min column width - // expect(getColumnWidths(dashboard)).to.eql([columnWidth / 2]); + expect(getColumnWidths(dashboard)).to.eql([columnWidth / 2]); }); it('should have one wide column with large minimum column width', () => { @@ -114,6 +123,15 @@ describe('dashboard layout', () => { }); describe('maximum column width', () => { + it('should have a default maximum column width', () => { + // Clear the maximum column width used in the tests + setMaximumColumnWidth(dashboard, undefined); + // Widen the component + dashboard.style.width = '1000px'; + // Expect the column width to equal the default maximum column width + expect(getColumnWidths(dashboard)[0]).to.eql(400); + }); + it('should have one wide column with large maximum column width', () => { // Allow the column to be twice as wide setMaximumColumnWidth(dashboard, columnWidth * 2); diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts index 509727e0b9..9246ec6e5d 100644 --- a/packages/dashboard/test/helpers.ts +++ b/packages/dashboard/test/helpers.ts @@ -33,14 +33,22 @@ export function getElementFromCell(dashboard: HTMLElement, rowIndex: number, col /** * Sets the minimum column width of the dashboard. */ -export function setMinimumColumnWidth(dashboard: HTMLElement, width: number): void { +export function setMinimumColumnWidth(dashboard: HTMLElement, width?: number): void { + if (width === undefined) { + dashboard.style.removeProperty('--vaadin-dashboard-col-min-width'); + return; + } dashboard.style.setProperty('--vaadin-dashboard-col-min-width', `${width}px`); } /** * Sets the maximum column width of the dashboard. */ -export function setMaximumColumnWidth(dashboard: HTMLElement, width: number): void { +export function setMaximumColumnWidth(dashboard: HTMLElement, width?: number): void { + if (width === undefined) { + dashboard.style.removeProperty('--vaadin-dashboard-col-max-width'); + return; + } dashboard.style.setProperty('--vaadin-dashboard-col-max-width', `${width}px`); } From a4b187092cf69ef576de37490248a9cacf28f50f Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 14 Aug 2024 14:30:00 +0300 Subject: [PATCH 03/11] cleanup --- packages/dashboard/src/vaadin-dashboard-layout.d.ts | 2 -- packages/dashboard/test/helpers.ts | 12 ++---------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/dashboard/src/vaadin-dashboard-layout.d.ts b/packages/dashboard/src/vaadin-dashboard-layout.d.ts index 8437503236..ab4d7425eb 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout.d.ts +++ b/packages/dashboard/src/vaadin-dashboard-layout.d.ts @@ -11,8 +11,6 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -export type DashboardLayoutEventMap = HTMLElementEventMap; - /** * A responsive, grid-based dashboard layout component */ diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts index 9246ec6e5d..8ce6da27bd 100644 --- a/packages/dashboard/test/helpers.ts +++ b/packages/dashboard/test/helpers.ts @@ -34,22 +34,14 @@ export function getElementFromCell(dashboard: HTMLElement, rowIndex: number, col * Sets the minimum column width of the dashboard. */ export function setMinimumColumnWidth(dashboard: HTMLElement, width?: number): void { - if (width === undefined) { - dashboard.style.removeProperty('--vaadin-dashboard-col-min-width'); - return; - } - dashboard.style.setProperty('--vaadin-dashboard-col-min-width', `${width}px`); + dashboard.style.setProperty('--vaadin-dashboard-col-min-width', width !== undefined ? `${width}px` : null); } /** * Sets the maximum column width of the dashboard. */ export function setMaximumColumnWidth(dashboard: HTMLElement, width?: number): void { - if (width === undefined) { - dashboard.style.removeProperty('--vaadin-dashboard-col-max-width'); - return; - } - dashboard.style.setProperty('--vaadin-dashboard-col-max-width', `${width}px`); + dashboard.style.setProperty('--vaadin-dashboard-col-max-width', width !== undefined ? `${width}px` : null); } /** From 39aa823a7fe32e8e6cb4e5d76428f5c7b6989760 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 14 Aug 2024 14:56:38 +0300 Subject: [PATCH 04/11] add comments to css properties --- packages/dashboard/src/vaadin-dashboard-layout-mixin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js index c62f4f9fcb..81387d99e3 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js @@ -22,10 +22,10 @@ export const DashboardLayoutMixin = (superClass) => return css` :host { display: grid; - + /* Default min and max column widths */ --_vaadin-dashboard-default-col-min-width: 200px; --_vaadin-dashboard-default-col-max-width: 400px; - + /* Effective min and max column widths */ --_vaadin-dashboard-col-min-width: var( --vaadin-dashboard-col-min-width, var(--_vaadin-dashboard-default-col-min-width) From cdc7f35c754cc7e5634bc14845c9ce8377462f6c Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 14 Aug 2024 16:03:16 +0300 Subject: [PATCH 05/11] test: make sure max col width is not smaller than min col width in a test --- packages/dashboard/test/dashboard-layout.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index ec77c4889b..295a0ee2ef 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -110,6 +110,7 @@ describe('dashboard layout', () => { }); it('should have one wide column with large minimum column width', () => { + setMaximumColumnWidth(dashboard, columnWidth * 2); // Set the min column width to be twice as wide setMinimumColumnWidth(dashboard, columnWidth * 2); // Expect there to only be one column with twice the width From 557352ae05d8900fdbfbe88c5801229eee64d3d0 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 14 Aug 2024 16:10:24 +0300 Subject: [PATCH 06/11] remove "mixes ResizeMixin" --- packages/dashboard/src/vaadin-dashboard-layout-mixin.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js index 81387d99e3..307b92c7ec 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js @@ -14,7 +14,6 @@ import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; * A mixin to enable the dashboard layout functionality * * @polymerMixin - * @mixes ResizeMixin */ export const DashboardLayoutMixin = (superClass) => class DashboardLayoutMixinClass extends superClass { From ca24c3c79825552bc4e478e4009b76af51d5db53 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Thu, 15 Aug 2024 09:26:11 +0300 Subject: [PATCH 07/11] change the default value for max col width to 1fr --- .../src/vaadin-dashboard-layout-mixin.js | 2 +- packages/dashboard/test/dashboard-layout.test.ts | 16 +++++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js index 307b92c7ec..e647fed84f 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js @@ -23,7 +23,7 @@ export const DashboardLayoutMixin = (superClass) => display: grid; /* Default min and max column widths */ --_vaadin-dashboard-default-col-min-width: 200px; - --_vaadin-dashboard-default-col-max-width: 400px; + --_vaadin-dashboard-default-col-max-width: 1fr; /* Effective min and max column widths */ --_vaadin-dashboard-col-min-width: var( --vaadin-dashboard-col-min-width, diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index 295a0ee2ef..168decbbdc 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -124,13 +124,19 @@ describe('dashboard layout', () => { }); describe('maximum column width', () => { - it('should have a default maximum column width', () => { + it('should have a default maximum column width of 1fr', () => { // Clear the maximum column width used in the tests setMaximumColumnWidth(dashboard, undefined); - // Widen the component - dashboard.style.width = '1000px'; - // Expect the column width to equal the default maximum column width - expect(getColumnWidths(dashboard)[0]).to.eql(400); + expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth]); + // Widen the component to have the width of 2.5 columns + dashboard.style.width = `${columnWidth * 2.5}px`; + expect(getColumnWidths(dashboard)).to.eql([columnWidth * 1.25, columnWidth * 1.25]); + // Widen the component to have the width of 3 columns + dashboard.style.width = `${columnWidth * 3}px`; + expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth, columnWidth]); + // Shrink the component to have the width of 1.5 columns + dashboard.style.width = `${columnWidth * 1.5}px`; + expect(getColumnWidths(dashboard)).to.eql([columnWidth * 1.5]); }); it('should have one wide column with large maximum column width', () => { From 93145bfceda103f163410971ae98d7d2ba78cf3a Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Thu, 15 Aug 2024 09:38:15 +0300 Subject: [PATCH 08/11] use min/max col width values from ac --- .../src/vaadin-dashboard-layout-mixin.js | 4 ++-- .../dashboard/test/dashboard-layout.test.ts | 19 +++++++------------ 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js index e647fed84f..70769f2f46 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js @@ -22,8 +22,8 @@ export const DashboardLayoutMixin = (superClass) => :host { display: grid; /* Default min and max column widths */ - --_vaadin-dashboard-default-col-min-width: 200px; - --_vaadin-dashboard-default-col-max-width: 1fr; + --_vaadin-dashboard-default-col-min-width: 15rem; + --_vaadin-dashboard-default-col-max-width: 30rem; /* Effective min and max column widths */ --_vaadin-dashboard-col-min-width: var( --vaadin-dashboard-col-min-width, diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index 168decbbdc..6fa6b932b9 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -47,6 +47,7 @@ function expectLayout(dashboard: DashboardLayout, layout: number[][]) { describe('dashboard layout', () => { let dashboard: DashboardLayout; const columnWidth = 100; + const remValue = parseFloat(getComputedStyle(document.documentElement).fontSize); beforeEach(async () => { dashboard = fixtureSync(` @@ -90,7 +91,7 @@ describe('dashboard layout', () => { // Narrow down the component to have the width of 0 dashboard.style.width = '0'; // Expect the column width to equal the default minimum column width - expect(getColumnWidths(dashboard)).to.eql([200]); + expect(getColumnWidths(dashboard)).to.eql([remValue * 15]); }); it('should have one overflown column if narrowed below miminum column width', () => { @@ -124,19 +125,13 @@ describe('dashboard layout', () => { }); describe('maximum column width', () => { - it('should have a default maximum column width of 1fr', () => { + it('should have a default maximum column width', () => { // Clear the maximum column width used in the tests setMaximumColumnWidth(dashboard, undefined); - expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth]); - // Widen the component to have the width of 2.5 columns - dashboard.style.width = `${columnWidth * 2.5}px`; - expect(getColumnWidths(dashboard)).to.eql([columnWidth * 1.25, columnWidth * 1.25]); - // Widen the component to have the width of 3 columns - dashboard.style.width = `${columnWidth * 3}px`; - expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth, columnWidth]); - // Shrink the component to have the width of 1.5 columns - dashboard.style.width = `${columnWidth * 1.5}px`; - expect(getColumnWidths(dashboard)).to.eql([columnWidth * 1.5]); + // Widen the component + dashboard.style.width = '10000px'; + // Expect the column width to equal the default maximum column width + expect(getColumnWidths(dashboard)[0]).to.eql(remValue * 30); }); it('should have one wide column with large maximum column width', () => { From d4fd49a6add779fdd2e1e7f6e209e3d184db417c Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Thu, 15 Aug 2024 11:48:29 +0300 Subject: [PATCH 09/11] update default values --- .../src/vaadin-dashboard-layout-mixin.js | 4 ++-- packages/dashboard/test/dashboard-layout.test.ts | 16 +++++++++++----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js index 70769f2f46..e4afeac34d 100644 --- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js +++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js @@ -22,8 +22,8 @@ export const DashboardLayoutMixin = (superClass) => :host { display: grid; /* Default min and max column widths */ - --_vaadin-dashboard-default-col-min-width: 15rem; - --_vaadin-dashboard-default-col-max-width: 30rem; + --_vaadin-dashboard-default-col-min-width: 25rem; + --_vaadin-dashboard-default-col-max-width: 1fr; /* Effective min and max column widths */ --_vaadin-dashboard-col-min-width: var( --vaadin-dashboard-col-min-width, diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index 6fa6b932b9..026737bdfa 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -91,7 +91,7 @@ describe('dashboard layout', () => { // Narrow down the component to have the width of 0 dashboard.style.width = '0'; // Expect the column width to equal the default minimum column width - expect(getColumnWidths(dashboard)).to.eql([remValue * 15]); + expect(getColumnWidths(dashboard)).to.eql([remValue * 25]); }); it('should have one overflown column if narrowed below miminum column width', () => { @@ -128,10 +128,16 @@ describe('dashboard layout', () => { it('should have a default maximum column width', () => { // Clear the maximum column width used in the tests setMaximumColumnWidth(dashboard, undefined); - // Widen the component - dashboard.style.width = '10000px'; - // Expect the column width to equal the default maximum column width - expect(getColumnWidths(dashboard)[0]).to.eql(remValue * 30); + expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth]); + // Widen the component to have the width of 2.5 columns + dashboard.style.width = `${columnWidth * 2.5}px`; + expect(getColumnWidths(dashboard)).to.eql([columnWidth * 1.25, columnWidth * 1.25]); + // Widen the component to have the width of 3 columns + dashboard.style.width = `${columnWidth * 3}px`; + expect(getColumnWidths(dashboard)).to.eql([columnWidth, columnWidth, columnWidth]); + // Shrink the component to have the width of 1.5 columns + dashboard.style.width = `${columnWidth * 1.5}px`; + expect(getColumnWidths(dashboard)).to.eql([columnWidth * 1.5]); }); it('should have one wide column with large maximum column width', () => { From 1c484347aaab9753ce50ef1673e0bc4e1fe9c5c6 Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Fri, 16 Aug 2024 09:04:57 +0300 Subject: [PATCH 10/11] Update packages/dashboard/test/dashboard-layout.test.ts Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com> --- packages/dashboard/test/dashboard-layout.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index 026737bdfa..dea058cfc5 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -94,7 +94,7 @@ describe('dashboard layout', () => { expect(getColumnWidths(dashboard)).to.eql([remValue * 25]); }); - it('should have one overflown column if narrowed below miminum column width', () => { + it('should have one overflown column if narrowed below mininum column width', () => { // Narrow down the component to have the width of half a column dashboard.style.width = `${columnWidth / 2}px`; // Expect the column width to still be the same (overflown) From 00c1537f4fad4e4f674daa557e909b3bf7867cca Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Fri, 16 Aug 2024 09:06:36 +0300 Subject: [PATCH 11/11] fix typo --- packages/dashboard/test/dashboard-layout.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts index dea058cfc5..1ac507dd02 100644 --- a/packages/dashboard/test/dashboard-layout.test.ts +++ b/packages/dashboard/test/dashboard-layout.test.ts @@ -94,7 +94,7 @@ describe('dashboard layout', () => { expect(getColumnWidths(dashboard)).to.eql([remValue * 25]); }); - it('should have one overflown column if narrowed below mininum column width', () => { + it('should have one overflown column if narrowed below minimum column width', () => { // Narrow down the component to have the width of half a column dashboard.style.width = `${columnWidth / 2}px`; // Expect the column width to still be the same (overflown)