Skip to content

refactor: update dashboard styles, add Lumo theme variants #8962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 28 commits into from
May 19, 2025
Merged

refactor: update dashboard styles, add Lumo theme variants #8962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
e5cf364
Removed header border, header gap, content padding.
rolfsmeds Apr 4, 2025
6594cd7
Refactored widget border from shadow to ::before with border
rolfsmeds Apr 4, 2025
ec3d273
Added pointer-events:none to border pseudo just to be on the safe side
rolfsmeds Apr 4, 2025
4ecafdb
Tweaked the psuedo's border radius to look better
rolfsmeds Apr 4, 2025
df14465
Added 3 theme variants
rolfsmeds Apr 4, 2025
4a0f724
Added widget style props to jsdoc
rolfsmeds Apr 7, 2025
8972bb7
Force widget border in edit mode
rolfsmeds Apr 7, 2025
75ead65
Added "flat" widget variant
rolfsmeds Apr 7, 2025
24cd287
Removed widget-padding variant.
rolfsmeds Apr 15, 2025
8693c92
Support for wrapping titles.
rolfsmeds Apr 15, 2025
8cdd0e9
re-added margin removed by mistake
rolfsmeds Apr 15, 2025
e571cc3
override section header alignment to center
rolfsmeds Apr 15, 2025
a7439f0
Changed wrapping titles to default.
rolfsmeds Apr 15, 2025
c79aec8
Merge branch 'main' into feat/dashboard-widget-styles
rolfsmeds Apr 15, 2025
051daee
test: add visual tests
ugur-vaadin Apr 28, 2025
6246c69
chore: align docs for properties
ugur-vaadin Apr 28, 2025
52b4ccc
chore: add title wrap to property list
ugur-vaadin Apr 28, 2025
d3f665d
Moved scrolling from #grid to root
rolfsmeds May 7, 2025
93ddf24
Renamed --vaadin-dashboard-item-* properties to --vaadin-dashboard-wi…
rolfsmeds May 7, 2025
606b5ca
Removed public style properties for editable and selected shadows
rolfsmeds May 7, 2025
982fb6d
test: update lumo baseline images
ugur-vaadin May 7, 2025
9ea0a9f
Couple of tweaks to lift widget and section titles a bit higher for b…
rolfsmeds May 8, 2025
97abeb9
test: update baseline images
ugur-vaadin May 8, 2025
d3acf3c
Removed "vaadin-dashboard" from names of private css properties.
rolfsmeds May 19, 2025
608c611
test: use non editable dashboard by default and update baseline images
ugur-vaadin May 19, 2025
bf6c33b
Appeasing the linter
rolfsmeds May 19, 2025
1ee8232
chore: fix indentation in JSDoc
web-padawan May 19, 2025
d4bc89e
Update packages/dashboard/src/vaadin-dashboard-layout-mixin.js
web-padawan May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dev/dashboard-layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@
<div class="kpi-number">+203%</div>
</vaadin-dashboard-widget>

<vaadin-dashboard-widget style="--vaadin-dashboard-item-colspan: 2" widget-title="Sales">
<vaadin-dashboard-widget style="--vaadin-dashboard-widget-colspan: 2" widget-title="Sales">
<span slot="header-content">2023-2024</span>
<div class="chart"></div>
</vaadin-dashboard-widget>

<vaadin-dashboard-section section-title="Section">
<vaadin-dashboard-widget style="--vaadin-dashboard-item-rowspan: 2" widget-title="Sales closed this month">
<vaadin-dashboard-widget style="--vaadin-dashboard-widget-rowspan: 2" widget-title="Sales closed this month">
<div class="kpi-number">54 000€</div>
</vaadin-dashboard-widget>

Expand Down
10 changes: 5 additions & 5 deletions packages/dashboard/src/vaadin-dashboard-item-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,13 +210,13 @@ export const DashboardItemMixin = (superClass) =>
/** @private */
__renderResizeControls() {
const style = getComputedStyle(this);
const hasMinRowHeight = style.getPropertyValue('--_vaadin-dashboard-row-min-height') !== 'auto';
const hasMinRowHeight = style.getPropertyValue('--_row-min-height') !== 'auto';

const effectiveColCount = style.getPropertyValue('--_vaadin-dashboard-col-count');
const maxColCount = style.getPropertyValue('--_vaadin-dashboard-col-max-count');
const effectiveColCount = style.getPropertyValue('--_col-count');
const maxColCount = style.getPropertyValue('--_col-max-count');
const colCount = Math.min(effectiveColCount, maxColCount);
const colspan = style.getPropertyValue('--vaadin-dashboard-item-colspan') || 1;
const rowspan = style.getPropertyValue('--vaadin-dashboard-item-rowspan') || 1;
const colspan = style.getPropertyValue('--vaadin-dashboard-widget-colspan') || 1;
const rowspan = style.getPropertyValue('--vaadin-dashboard-widget-rowspan') || 1;
const canShrinkWidth = colspan > 1;
const canShrinkHeight = rowspan > 1;
const canGrowWidth = colspan < colCount;
Expand Down
75 changes: 29 additions & 46 deletions packages/dashboard/src/vaadin-dashboard-layout-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ export const DashboardLayoutMixin = (superClass) =>
return css`
:host {
display: block;
overflow: hidden;
overflow: auto;
box-sizing: border-box;
width: 100%;
}

Expand All @@ -39,76 +40,58 @@ export const DashboardLayoutMixin = (superClass) =>
box-sizing: border-box;

/* Padding around dashboard edges */
--_vaadin-dashboard-default-padding: 1rem;
--_vaadin-dashboard-padding: max(
0px,
var(--vaadin-dashboard-padding, var(--_vaadin-dashboard-default-padding))
);
padding: var(--_vaadin-dashboard-padding);
--_default-padding: 1rem;
--_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
padding: var(--_padding);

/* Gap between widgets */
--_vaadin-dashboard-default-gap: 1rem;
--_vaadin-dashboard-gap: max(0px, var(--vaadin-dashboard-gap, var(--_vaadin-dashboard-default-gap)));
gap: var(--_vaadin-dashboard-gap);
--_default-gap: 1rem;
--_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
gap: var(--_gap);

/* Default min and max column widths */
--_vaadin-dashboard-default-col-min-width: 25rem;
--_vaadin-dashboard-default-col-max-width: 1fr;
--_default-col-min-width: 25rem;
--_default-col-max-width: 1fr;

/* Effective min and max column widths */
--_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)
);
--_col-min-width: var(--vaadin-dashboard-col-min-width, var(--_default-col-min-width));
--_col-max-width: var(--vaadin-dashboard-col-max-width, var(--_default-col-max-width));

/* Effective max column count */
--_vaadin-dashboard-col-max-count: var(--vaadin-dashboard-col-max-count, var(--_vaadin-dashboard-col-count));
--_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));

/* Effective column count */
--_vaadin-dashboard-effective-col-count: min(
var(--_vaadin-dashboard-col-count),
var(--_vaadin-dashboard-col-max-count)
);
--_effective-col-count: min(var(--_col-count), var(--_col-max-count));

/* Default row min height */
--_vaadin-dashboard-default-row-min-height: 12rem;
--_default-row-min-height: 12rem;
/* Effective row min height */
--_vaadin-dashboard-row-min-height: var(
--vaadin-dashboard-row-min-height,
var(--_vaadin-dashboard-default-row-min-height)
);
--_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
/* Effective row height */
--_vaadin-dashboard-row-height: minmax(var(--_vaadin-dashboard-row-min-height, auto), auto);
--_row-height: minmax(var(--_row-min-height, auto), auto);

display: grid;
overflow: auto;
height: 100%;
overflow: hidden;
min-width: calc(var(--_col-min-width) + var(--_padding) * 2);

grid-template-columns: repeat(
var(--_vaadin-dashboard-effective-col-count, auto-fill),
minmax(var(--_vaadin-dashboard-col-min-width), var(--_vaadin-dashboard-col-max-width))
var(--_effective-col-count, auto-fill),
minmax(var(--_col-min-width), var(--_col-max-width))
);

grid-auto-rows: var(--_vaadin-dashboard-row-height);
grid-auto-rows: var(--_row-height);
}

::slotted(*) {
/* The grid-column value applied to children */
--_vaadin-dashboard-item-column: span
min(
var(--vaadin-dashboard-item-colspan, 1),
var(--_vaadin-dashboard-effective-col-count, var(--_vaadin-dashboard-col-count))
);
--_item-column: span
min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));

grid-column: var(--_vaadin-dashboard-item-column);
grid-column: var(--_item-column);

/* The grid-row value applied to children */
--_vaadin-dashboard-item-row: span var(--vaadin-dashboard-item-rowspan, 1);
grid-row: var(--_vaadin-dashboard-item-row);
--_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
grid-row: var(--_item-row);
}
`;
}
Expand Down Expand Up @@ -152,10 +135,10 @@ export const DashboardLayoutMixin = (superClass) =>
*/
__updateColumnCount() {
// Clear the previously computed column count
this.$.grid.style.removeProperty('--_vaadin-dashboard-col-count');
this.$.grid.style.removeProperty('--_col-count');
// Get the column count (with no colspans etc in effect)...
const columnCount = getComputedStyle(this.$.grid).gridTemplateColumns.split(' ').length;
// ...and set it as the new value
this.$.grid.style.setProperty('--_vaadin-dashboard-col-count', columnCount);
this.$.grid.style.setProperty('--_col-count', columnCount);
}
};
32 changes: 13 additions & 19 deletions packages/dashboard/src/vaadin-dashboard-section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,36 +85,30 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
display: grid;
position: relative;
grid-template-columns: subgrid;
--_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);
--_section-column: 1 / calc(var(--_effective-col-count) + 1);
grid-column: var(--_section-column) !important;
gap: var(--_gap, 1rem);
/* Dashboard section header height */
--_vaadin-dashboard-section-header-height: minmax(0, auto);
grid-template-rows: var(--_vaadin-dashboard-section-header-height) repeat(
auto-fill,
var(--_vaadin-dashboard-row-height)
);
grid-auto-rows: var(--_vaadin-dashboard-row-height);
--_section-header-height: minmax(0, auto);
grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
grid-auto-rows: var(--_row-height);
}

:host([hidden]) {
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);
--_vaadin-dashboard-item-row: span var(--vaadin-dashboard-item-rowspan, 1);
grid-row: var(--_vaadin-dashboard-item-row);
--_item-column: span
min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));

grid-column: var(--_item-column);
--_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
grid-row: var(--_item-row);
}

header {
grid-column: var(--_vaadin-dashboard-section-column);
grid-column: var(--_section-column);
}

:host::before {
Expand Down
15 changes: 11 additions & 4 deletions packages/dashboard/src/vaadin-dashboard-widget.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,17 @@ import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
*
* The following custom properties are available:
*
* Custom Property | Description
* ----------------------------------|-------------
* `--vaadin-dashboard-item-colspan` | colspan of the widget
* `--vaadin-dashboard-item-rowspan` | rowspan of the widget
* Custom Property | Description
* --------------------------------------------|----------------------
* `--vaadin-dashboard-widget-colspan` | colspan of the widget
* `--vaadin-dashboard-widget-rowspan` | rowspan of the widget
* `--vaadin-dashboard-widget-background` | widget background
* `--vaadin-dashboard-widget-border-radius` | widget corner radius
* `--vaadin-dashboard-widget-border-width` | widget border width
* `--vaadin-dashboard-widget-border-color` | widget border color
* `--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)
* `--vaadin-dashboard-widget-padding` | padding around widget content
* `--vaadin-dashboard-widget-title-wrap` | widget title wrap
*
* The following state attributes are available for styling:
*
Expand Down
23 changes: 15 additions & 8 deletions packages/dashboard/src/vaadin-dashboard-widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,17 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
*
* The following custom properties are available:
*
* Custom Property | Description
* ----------------------------------|-------------
* `--vaadin-dashboard-item-colspan` | colspan of the widget
* `--vaadin-dashboard-item-rowspan` | rowspan of the widget
* Custom Property | Description
* --------------------------------------------|----------------------
* `--vaadin-dashboard-widget-colspan` | colspan of the widget
* `--vaadin-dashboard-widget-rowspan` | rowspan of the widget
* `--vaadin-dashboard-widget-background` | widget background
* `--vaadin-dashboard-widget-border-radius` | widget corner radius
* `--vaadin-dashboard-widget-border-width` | widget border width
* `--vaadin-dashboard-widget-border-color` | widget border color
* `--vaadin-dashboard-widget-shadow` | widget shadow (non edit mode)
* `--vaadin-dashboard-widget-padding` | padding around widget content
* `--vaadin-dashboard-widget-title-wrap` | widget title wrap
*
* The following state attributes are available for styling:
*
Expand Down Expand Up @@ -110,8 +117,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
:host {
display: flex;
flex-direction: column;
grid-column: var(--_vaadin-dashboard-item-column);
grid-row: var(--_vaadin-dashboard-item-row);
grid-column: var(--_item-column);
grid-row: var(--_item-row);
position: relative;
}

Expand Down Expand Up @@ -141,8 +148,8 @@ class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(Poly
z-index: 2;
position: absolute;
top: -1px;
width: var(--_vaadin-dashboard-widget-resizer-width, 0);
height: var(--_vaadin-dashboard-widget-resizer-height, 0);
width: var(--_widget-resizer-width, 0);
height: var(--_widget-resizer-height, 0);
background: rgba(0, 0, 0, 0.1);
border-radius: inherit;
}
Expand Down
8 changes: 4 additions & 4 deletions packages/dashboard/src/vaadin-dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,8 +433,8 @@ class Dashboard extends DashboardLayoutMixin(
/** @private */
__updateWrapper(wrapper, item) {
const style = `
${item.colspan ? `--vaadin-dashboard-item-colspan: ${item.colspan};` : ''}
${item.rowspan ? `--vaadin-dashboard-item-rowspan: ${item.rowspan};` : ''}
${item.colspan ? `--vaadin-dashboard-widget-colspan: ${item.colspan};` : ''}
${item.rowspan ? `--vaadin-dashboard-widget-rowspan: ${item.rowspan};` : ''}
`.trim();

wrapper.__item = item;
Expand Down Expand Up @@ -498,11 +498,11 @@ class Dashboard extends DashboardLayoutMixin(
* @private
*/
__updateColumnCount() {
const previousColumnCount = this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count');
const previousColumnCount = this.$.grid.style.getPropertyValue('--_col-count');
super.__updateColumnCount();

// Request update for all the widgets if the column count has changed on resize
if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_vaadin-dashboard-col-count')) {
if (previousColumnCount !== this.$.grid.style.getPropertyValue('--_col-count')) {
this.querySelectorAll(WRAPPER_LOCAL_NAME).forEach((wrapper) => {
if (wrapper.firstElementChild && 'requestUpdate' in wrapper.firstElementChild) {
wrapper.firstElementChild.requestUpdate();
Expand Down
10 changes: 5 additions & 5 deletions packages/dashboard/src/widget-resize-controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,8 @@ export class WidgetResizeController {
}

const itemWrapper = this.__getItemWrapper(this.resizedItem);
itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-width');
itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-height');
itemWrapper.style.removeProperty('--_widget-resizer-width');
itemWrapper.style.removeProperty('--_widget-resizer-height');
if (itemWrapper.firstElementChild) {
itemWrapper.firstElementChild.toggleAttribute('resizing', false);
}
Expand Down Expand Up @@ -157,7 +157,7 @@ export class WidgetResizeController {
}

const gridStyle = getComputedStyle(this.host.$.grid);
if (rowspanDelta && gridStyle.getPropertyValue('--_vaadin-dashboard-row-min-height') === 'auto') {
if (rowspanDelta && gridStyle.getPropertyValue('--_row-min-height') === 'auto') {
// Do not resize vertically if the min row height is not set
return;
}
Expand All @@ -182,8 +182,8 @@ export class WidgetResizeController {
/** @private */
__updateWidgetStyles() {
const itemWrapper = this.__getItemWrapper(this.resizedItem);
itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-width', `${this.__resizeWidth}px`);
itemWrapper.style.setProperty('--_vaadin-dashboard-widget-resizer-height', `${this.__resizeHeight}px`);
itemWrapper.style.setProperty('--_widget-resizer-width', `${this.__resizeWidth}px`);
itemWrapper.style.setProperty('--_widget-resizer-height', `${this.__resizeHeight}px`);
if (itemWrapper.firstElementChild) {
itemWrapper.firstElementChild.toggleAttribute('resizing', true);
}
Expand Down
4 changes: 0 additions & 4 deletions packages/dashboard/test/dashboard-layout.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,6 @@ describe('dashboard layout', () => {
expect(scrollingContainer.scrollLeft).to.eql(1);
});

it('should hide content overflowing the host', () => {
expect(getComputedStyle(dashboard).overflow).to.eql('hidden');
});

describe('minimum column width', () => {
it('should have a default minimum column width', async () => {
// Clear the minimum column width used in the tests
Expand Down
6 changes: 3 additions & 3 deletions packages/dashboard/test/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function getCssGrid(element: Element): Element {
* Returns the scrolling container of the dashboard.
*/
export function getScrollingContainer(dashboard: Element): Element {
return getCssGrid(dashboard);
return dashboard;
}

export function getParentSection(element?: Element | null): DashboardSection | null {
Expand Down Expand Up @@ -109,14 +109,14 @@ export function setMaximumColumnWidth(dashboard: HTMLElement, width?: number): v
* Sets the column span of the element
*/
export function setColspan(element: HTMLElement, colspan?: number): void {
element.style.setProperty('--vaadin-dashboard-item-colspan', colspan !== undefined ? `${colspan}` : null);
element.style.setProperty('--vaadin-dashboard-widget-colspan', colspan !== undefined ? `${colspan}` : null);
}

/**
* Sets the row span of the element
*/
export function setRowspan(element: HTMLElement, rowspan?: number): void {
element.style.setProperty('--vaadin-dashboard-item-rowspan', rowspan !== undefined ? `${rowspan}` : null);
element.style.setProperty('--vaadin-dashboard-widget-rowspan', rowspan !== undefined ? `${rowspan}` : null);
}

/**
Expand Down
Loading