diff --git a/dev/dashboard-layout.html b/dev/dashboard-layout.html
index 06f778feb84..78bafcd9c47 100644
--- a/dev/dashboard-layout.html
+++ b/dev/dashboard-layout.html
@@ -49,13 +49,13 @@
+203%
-
+
2023-2024
-
+
54 000€
diff --git a/packages/dashboard/src/vaadin-dashboard-item-mixin.js b/packages/dashboard/src/vaadin-dashboard-item-mixin.js
index 1130406b234..eccf708bc84 100644
--- a/packages/dashboard/src/vaadin-dashboard-item-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-item-mixin.js
@@ -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;
diff --git a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
index 77cae12803b..10d77fd3bcb 100644
--- a/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
+++ b/packages/dashboard/src/vaadin-dashboard-layout-mixin.js
@@ -23,7 +23,8 @@ export const DashboardLayoutMixin = (superClass) =>
return css`
:host {
display: block;
- overflow: hidden;
+ overflow: auto;
+ box-sizing: border-box;
width: 100%;
}
@@ -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);
}
`;
}
@@ -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);
}
};
diff --git a/packages/dashboard/src/vaadin-dashboard-section.js b/packages/dashboard/src/vaadin-dashboard-section.js
index ac7a61261a0..0738bad0c37 100644
--- a/packages/dashboard/src/vaadin-dashboard-section.js
+++ b/packages/dashboard/src/vaadin-dashboard-section.js
@@ -85,16 +85,13 @@ 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]) {
@@ -102,19 +99,16 @@ class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(Pol
}
::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 {
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.d.ts b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
index 17103f25d1a..5450a8e6427 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.d.ts
+++ b/packages/dashboard/src/vaadin-dashboard-widget.d.ts
@@ -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:
*
diff --git a/packages/dashboard/src/vaadin-dashboard-widget.js b/packages/dashboard/src/vaadin-dashboard-widget.js
index a99f3ca96a7..39dc7707bd6 100644
--- a/packages/dashboard/src/vaadin-dashboard-widget.js
+++ b/packages/dashboard/src/vaadin-dashboard-widget.js
@@ -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:
*
@@ -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;
}
@@ -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;
}
diff --git a/packages/dashboard/src/vaadin-dashboard.js b/packages/dashboard/src/vaadin-dashboard.js
index f16f3ceba3f..90ff016065b 100644
--- a/packages/dashboard/src/vaadin-dashboard.js
+++ b/packages/dashboard/src/vaadin-dashboard.js
@@ -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;
@@ -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();
diff --git a/packages/dashboard/src/widget-resize-controller.js b/packages/dashboard/src/widget-resize-controller.js
index 62019550728..28431403b87 100644
--- a/packages/dashboard/src/widget-resize-controller.js
+++ b/packages/dashboard/src/widget-resize-controller.js
@@ -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);
}
@@ -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;
}
@@ -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);
}
diff --git a/packages/dashboard/test/dashboard-layout.test.ts b/packages/dashboard/test/dashboard-layout.test.ts
index dc355e288f6..a881ab2c15a 100644
--- a/packages/dashboard/test/dashboard-layout.test.ts
+++ b/packages/dashboard/test/dashboard-layout.test.ts
@@ -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
diff --git a/packages/dashboard/test/helpers.ts b/packages/dashboard/test/helpers.ts
index 844ccf512c2..37e99f45786 100644
--- a/packages/dashboard/test/helpers.ts
+++ b/packages/dashboard/test/helpers.ts
@@ -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 {
@@ -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);
}
/**
diff --git a/packages/dashboard/test/visual/lumo/dashboard.test.ts b/packages/dashboard/test/visual/lumo/dashboard.test.ts
index c65294c8c86..ac8962bf48f 100644
--- a/packages/dashboard/test/visual/lumo/dashboard.test.ts
+++ b/packages/dashboard/test/visual/lumo/dashboard.test.ts
@@ -47,7 +47,7 @@ describe('dashboard', () => {
}
beforeEach(async () => {
- element = fixtureSync(``, div);
+ element = fixtureSync(``, div);
element.renderer = (wrapper) => {
render(
@@ -75,17 +75,20 @@ describe('dashboard', () => {
});
it('focused widget', async () => {
+ element.editable = true;
await sendKeys({ press: 'Tab' });
await visualDiff(div, getName('focused-widget'));
});
it('selected widget', async () => {
+ element.editable = true;
await sendKeys({ press: 'Tab' });
await sendKeys({ press: 'Enter' });
await visualDiff(div, getName('selected-widget'));
});
it('resize mode', async () => {
+ element.editable = true;
const firstWidget = getElementFromCell(element, 0, 0)!;
const resizeHandle = getResizeHandle(firstWidget) as HTMLElement;
resizeHandle.click();
@@ -94,6 +97,7 @@ describe('dashboard', () => {
});
it('move mode', async () => {
+ element.editable = true;
const firstWidget = getElementFromCell(element, 0, 0)!;
const moveHandle = getDraggable(firstWidget) as HTMLElement;
moveHandle.click();
@@ -102,6 +106,7 @@ describe('dashboard', () => {
});
it('dragged widget', async () => {
+ element.editable = true;
fireDragStart(getElementFromCell(element, 0, 0)!);
await nextFrame();
@@ -109,6 +114,7 @@ describe('dashboard', () => {
});
it('resized widget', async () => {
+ element.editable = true;
fireResizeStart(getElementFromCell(element, 0, 0)!);
await nextFrame();
fireResizeOver(getElementFromCell(element, 0, 0)!, 'end');
@@ -123,9 +129,65 @@ describe('dashboard', () => {
await visualDiff(div, getName('no-gap'));
});
- it('non-editable', async () => {
- element.editable = false;
- await visualDiff(div, getName('non-editable'));
+ it('editable', async () => {
+ element.editable = true;
+ await visualDiff(div, getName('editable'));
+ });
+
+ describe('long title', () => {
+ beforeEach(async () => {
+ element.items = [
+ { colspan: 1 },
+ { colspan: 1 },
+ {
+ title:
+ 'Section long title: Nunc sit amet suscipit tellus, id fermentum massa. Aliquam vel tellus cursus, sodales ligula sed, iaculis justo.',
+ items: [{ colspan: 1, rowspan: 1 }, { colspan: 1 }],
+ },
+ ];
+
+ element.renderer = (wrapper) => {
+ render(
+ html`
+ Header content
+ Content
+ `,
+ wrapper,
+ );
+ };
+
+ await nextFrame();
+ });
+
+ it('title wrap', async () => {
+ await nextFrame();
+ await visualDiff(div, getName('title-wrap'));
+ });
+
+ it('no title wrap', async () => {
+ element.style.setProperty('--vaadin-dashboard-widget-title-wrap', 'nowrap');
+ await nextFrame();
+ await visualDiff(div, getName('no-title-wrap'));
+ });
+ });
+
+ describe('theme', () => {
+ it('shaded background', async () => {
+ element.setAttribute('theme', 'shaded-background');
+ await visualDiff(div, getName('theme-shaded-background'));
+ });
+
+ it('elevated widgets', async () => {
+ element.setAttribute('theme', 'elevated-widgets');
+ await visualDiff(div, getName('theme-elevated-widgets'));
+ });
+
+ it('flat widgets', async () => {
+ element.setAttribute('theme', 'flat-widgets');
+ await visualDiff(div, getName('theme-flat-widgets'));
+ });
});
});
});
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-default.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-default.png
index 63f87c0449c..16a729ba71f 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-default.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-default.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-dragged-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-dragged-widget.png
index 252af35c1dd..2029f6afd0b 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-dragged-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-dragged-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-editable.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-editable.png
new file mode 100644
index 00000000000..a55db946c02
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-editable.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-focused-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-focused-widget.png
index 19468dbcb93..6d2df4fcd6b 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-focused-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-focused-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-move-mode.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-move-mode.png
index 4bdf917b175..9cb457b190d 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-move-mode.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-move-mode.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-gap.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-gap.png
index fc341c36a41..38e8e805ad1 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-gap.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-gap.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-title-wrap.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-title-wrap.png
new file mode 100644
index 00000000000..4bfa43e1cb1
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-no-title-wrap.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-non-editable.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-non-editable.png
deleted file mode 100644
index a52b7bc614f..00000000000
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-non-editable.png and /dev/null differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resize-mode.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resize-mode.png
index f24f66578b8..f7e55156993 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resize-mode.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resize-mode.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resized-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resized-widget.png
index d21e64c8b4f..7253ca1b846 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resized-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-resized-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-selected-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-selected-widget.png
index fe6922ce57c..ded3da3f711 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-selected-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-selected-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-elevated-widgets.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-elevated-widgets.png
new file mode 100644
index 00000000000..d504d7b811e
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-elevated-widgets.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-flat-widgets.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-flat-widgets.png
new file mode 100644
index 00000000000..1852607fb68
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-flat-widgets.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-shaded-background.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-shaded-background.png
new file mode 100644
index 00000000000..ac1a2bf1645
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-theme-shaded-background.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-title-wrap.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-title-wrap.png
new file mode 100644
index 00000000000..623cb82579c
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/ltr-title-wrap.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-default.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-default.png
index 2409de5a9fb..cfea4403b71 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-default.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-default.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-dragged-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-dragged-widget.png
index 8c1fe5b9598..858ab933e50 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-dragged-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-dragged-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-editable.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-editable.png
new file mode 100644
index 00000000000..66c344c0b31
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-editable.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-focused-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-focused-widget.png
index b43c320b2f3..f3388f791b6 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-focused-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-focused-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-move-mode.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-move-mode.png
index 7636ba21077..ab3b3ceb65e 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-move-mode.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-move-mode.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-gap.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-gap.png
index 52906303a61..4b9c63fc0dc 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-gap.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-gap.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-title-wrap.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-title-wrap.png
new file mode 100644
index 00000000000..58503470b24
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-no-title-wrap.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-non-editable.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-non-editable.png
deleted file mode 100644
index 36757ab20c7..00000000000
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-non-editable.png and /dev/null differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resize-mode.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resize-mode.png
index d509717a4f6..d8dca43f723 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resize-mode.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resize-mode.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resized-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resized-widget.png
index 0afe421f609..0bca417b01e 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resized-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-resized-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-selected-widget.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-selected-widget.png
index 6e9edc16b2f..58f7a60558b 100644
Binary files a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-selected-widget.png and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-selected-widget.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-elevated-widgets.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-elevated-widgets.png
new file mode 100644
index 00000000000..872728cc530
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-elevated-widgets.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-flat-widgets.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-flat-widgets.png
new file mode 100644
index 00000000000..39b066b7016
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-flat-widgets.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-shaded-background.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-shaded-background.png
new file mode 100644
index 00000000000..dfee1230e3e
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-theme-shaded-background.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-title-wrap.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-title-wrap.png
new file mode 100644
index 00000000000..a38f2a0362e
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/rtl-title-wrap.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-elevated-widgets.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-elevated-widgets.png
new file mode 100644
index 00000000000..476f465e86c
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-elevated-widgets.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-flat-widgets.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-flat-widgets.png
new file mode 100644
index 00000000000..00cf0026660
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-flat-widgets.png differ
diff --git a/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-shaded-background.png b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-shaded-background.png
new file mode 100644
index 00000000000..cab613c6171
Binary files /dev/null and b/packages/dashboard/test/visual/lumo/screenshots/dashboard/baseline/theme-shaded-background.png differ
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
index fe4a275f1e9..5d7a0381b59 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js
@@ -1,9 +1,25 @@
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
export const dashboardLayoutStyles = css`
+ :host([theme~='shaded-background']) {
+ background: var(--lumo-shade-5pct);
+ }
+
+ :host([theme~='elevated-widgets']) {
+ --vaadin-dashboard-widget-shadow: var(--lumo-box-shadow-xs);
+ --vaadin-dashboard-widget-border-color: var(--lumo-contrast-10pct);
+ --vaadin-dashboard-widget-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct))
+ var(--lumo-base-color);
+ }
+
+ :host([theme~='flat-widgets']) {
+ --vaadin-dashboard-widget-background: var(--lumo-contrast-5pct);
+ --vaadin-dashboard-widget-border-color: transparent;
+ }
+
#grid {
- --_vaadin-dashboard-default-gap: var(--lumo-space-m);
- --_vaadin-dashboard-default-padding: var(--lumo-space-m);
+ --_default-gap: var(--lumo-space-m);
+ --_default-padding: var(--lumo-space-m);
}
`;
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
index 170b6c15305..8062fddd206 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js
@@ -10,7 +10,7 @@ const section = css`
/* stylelint-disable rule-empty-line-before */
:host {
- --_section-outline-offset: calc(min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding)) / 3);
+ --_section-outline-offset: calc(min(var(--_gap), var(--_padding)) / 3);
--_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
border-radius: var(--lumo-border-radius-l);
}
@@ -20,11 +20,14 @@ const section = css`
line-height: var(--lumo-line-height-s);
padding-inline: var(--lumo-space-s);
min-height: var(--lumo-size-l);
+ align-items: center;
}
[part='title'] {
font-size: var(--lumo-font-size-xl);
font-weight: 600;
+ white-space: nowrap;
+ line-height: var(--lumo-line-height-m);
}
/* Section states */
@@ -59,14 +62,14 @@ const section = css`
}
:host([move-mode]) ::slotted(*) {
- --_vaadin-dashboard-widget-opacity: 0.3;
- --_vaadin-dashboard-widget-filter: blur(10px);
+ --_widget-opacity: 0.3;
+ --_widget-filter: blur(10px);
}
:host([dragging]) {
- background: var(--_vaadin-dashboard-drop-target-background-color);
- outline: var(--_vaadin-dashboard-drop-target-border);
- box-shadow: 0 0 0 var(--_section-outline-offset) var(--_vaadin-dashboard-drop-target-background-color);
+ background: var(--_drop-target-background-color);
+ outline: var(--_drop-target-border);
+ box-shadow: 0 0 0 var(--_section-outline-offset) var(--_drop-target-background-color);
}
/* Accessible move mode controls */
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
index eaf23e86ee1..15f5fa960ba 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-styles.js
@@ -3,11 +3,11 @@ import { dashboardLayoutStyles } from './vaadin-dashboard-layout-styles.js';
const dashboard = css`
:host {
- --_vaadin-dashboard-widget-opacity: 1;
+ --_widget-opacity: 1;
}
:host([item-selected]) {
- --_vaadin-dashboard-widget-opacity: 0.7;
+ --_widget-opacity: 0.7;
}
`;
diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
index d946ae54122..276be92f86b 100644
--- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
+++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
@@ -12,28 +12,19 @@ const dashboardWidgetAndSection = css`
/* stylelint-disable length-zero-no-unit */
:host {
- --_vaadin-dashboard-widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
- --_vaadin-dashboard-widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
- --_vaadin-dashboard-widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
- --_vaadin-dashboard-widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
- --_vaadin-dashboard-widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
- --_vaadin-dashboard-widget-editable-shadow: var(
- --vaadin-dashboard-widget-editable-shadow,
- var(--lumo-box-shadow-s)
- );
- --_vaadin-dashboard-widget-selected-shadow: var(
- --vaadin-dashboard-widget-selected-shadow,
- 0 2px 4px -1px var(--lumo-primary-color-10pct),
- 0 3px 12px -1px var(--lumo-primary-color-50pct)
- );
- --_vaadin-dashboard-drop-target-background-color: var(
+ --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
+ --_widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l));
+ --_widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px);
+ --_widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct));
+ --_widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent);
+ --_widget-editable-shadow: var(--lumo-box-shadow-s);
+ --_widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct),
+ 0 3px 12px -1px var(--lumo-primary-color-50pct);
+ --_drop-target-background-color: var(
--vaadin-dashboard-drop-target-background-color,
var(--lumo-primary-color-10pct)
);
- --_vaadin-dashboard-drop-target-border: var(
- --vaadin-dashboard-drop-target-border,
- 1px dashed var(--lumo-primary-color-50pct)
- );
+ --_drop-target-border: var(--vaadin-dashboard-drop-target-border, 1px dashed var(--lumo-primary-color-50pct));
color: var(--lumo-body-text-color);
font-family: var(--lumo-font-family);
@@ -42,8 +33,8 @@ const dashboardWidgetAndSection = css`
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
--_icon-color: var(--lumo-contrast-60pct);
- opacity: var(--_vaadin-dashboard-widget-opacity);
- filter: var(--_vaadin-dashboard-widget-filter);
+ opacity: var(--_widget-opacity);
+ filter: var(--_widget-filter);
}
:host([selected]) {
@@ -57,19 +48,20 @@ const dashboardWidgetAndSection = css`
header {
display: flex;
- align-items: center;
+ align-items: start;
box-sizing: border-box;
justify-content: space-between;
- gap: var(--lumo-space-xs);
}
[part='title'] {
flex: 1;
color: var(--lumo-header-text-color);
- margin: 0;
- white-space: nowrap;
+ white-space: var(--vaadin-dashboard-widget-title-wrap, wrap);
text-overflow: ellipsis;
overflow: hidden;
+ line-height: var(--lumo-line-height-s);
+ margin: 0 0 1px;
+ align-self: safe center;
}
vaadin-dashboard-button {
@@ -110,6 +102,7 @@ const dashboardWidgetAndSection = css`
[part~='remove-button'] {
cursor: pointer;
--icon: var(--lumo-icons-cross);
+ margin-inline-start: var(--lumo-space-xs);
}
/* Mode controls */
@@ -142,45 +135,55 @@ const dashboardWidgetAndSection = css`
/* Widget styles */
const dashboardWidget = css`
:host {
- background: var(--_vaadin-dashboard-widget-background);
- border-radius: var(--_vaadin-dashboard-widget-border-radius);
- --_border-shadow: 0 0 0 var(--_vaadin-dashboard-widget-border-width) var(--_vaadin-dashboard-widget-border-color);
- --_shadow: var(--_vaadin-dashboard-widget-shadow);
- box-shadow: var(--_shadow), var(--_border-shadow);
+ background: var(--_widget-background);
+ border-radius: var(--_widget-border-radius);
+ box-shadow: var(--_widget-shadow);
+ position: relative;
+ }
+
+ :host::before {
+ content: '';
+ position: absolute;
+ inset: calc(-1 * var(--_widget-border-width));
+ border: var(--_widget-border-width) solid var(--_widget-border-color);
+ border-radius: calc(var(--_widget-border-radius) + var(--_widget-border-width));
+ pointer-events: none;
}
/* Widget states */
:host([editable]) {
- --_shadow: var(--_vaadin-dashboard-widget-editable-shadow);
+ --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
+ --_widget-border-color: var(--lumo-contrast-20pct);
+ --_widget-border-width: 1px;
}
- :host([focused]) {
- --_border-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+ :host([focused])::before {
+ border-width: var(--_focus-ring-width);
+ border-color: var(--_focus-ring-color);
}
:host([selected]) {
- --_shadow: var(--_vaadin-dashboard-widget-selected-shadow);
+ --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
background: var(--lumo-primary-color-10pct);
}
:host([dragging]) {
box-shadow: none;
- background: var(--_vaadin-dashboard-drop-target-background-color);
- border: var(--_vaadin-dashboard-drop-target-border);
+ background: var(--_drop-target-background-color);
+ border: var(--_drop-target-border);
}
:host([resizing])::after {
- background: var(--_vaadin-dashboard-drop-target-background-color);
- border: var(--_vaadin-dashboard-drop-target-border);
+ background: var(--_drop-target-background-color);
+ border: var(--_drop-target-border);
}
/* Widget parts */
header {
min-height: var(--lumo-size-l);
- padding: 0 var(--lumo-space-m);
- border-bottom: 1px solid var(--lumo-contrast-10pct);
+ padding: var(--lumo-space-xs) var(--lumo-space-m);
}
:host([editable]) header {
@@ -194,7 +197,16 @@ const dashboardWidget = css`
#content {
min-height: var(--lumo-size-m);
- padding: var(--lumo-space-s);
+ padding: var(--vaadin-dashboard-widget-padding, 0);
+ padding-top: 0;
+ border-radius: inherit;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ overflow: hidden;
+ }
+
+ ::slotted([slot='header-content']) {
+ align-self: center;
}
:host([resize-mode]) #content,
@@ -206,7 +218,7 @@ const dashboardWidget = css`
/* Resize handle */
[part~='resize-button'] {
- --_resize-button-offset: min(var(--_vaadin-dashboard-gap), var(--_vaadin-dashboard-padding), var(--lumo-space-xs));
+ --_resize-button-offset: min(var(--_gap), var(--_padding), var(--lumo-space-xs));
position: absolute;
bottom: calc(-1 * var(--_resize-button-offset));
inset-inline-end: calc(-1 * var(--_resize-button-offset));