From 676bd513359082cad531619dbe06d03185620e32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 3 Dec 2025 09:52:23 +0100 Subject: [PATCH 1/9] dashboard props --- articles/components/dashboard/styling.adoc | 48 ++++++++++++---------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index f10bbfb0ce..a3ab669ce6 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -9,15 +9,21 @@ order: 50 The following style variants can be applied to the Dashboard to change its appearance: -[cols="2,2,3"] +[cols="1,3,1"] |=== -| Flow `DashboardVariant` | `theme` attribute | Description +| Variant | Description | Supported by -| `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background. +| `shaded-background` +| Applies shading to the dashboard background. +| Lumo -| `LUMO_ELEVATED_WIDGETS` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface. +| `elevated-widgets` +| Makes the widgets appear elevated above the dashboard surface. +| Lumo -| `LUMO_FLAT_WIDGETS` | `flat-widgets` | A flat, borderless widget style. +| `flat-widgets` +| A flat, borderless widget style. +| Lumo |=== @@ -34,67 +40,67 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] [cols="1,2,1"] |=== -| Feature | Property | Default Value +| Feature | Property | Supported by |Minimum column width |`--vaadin-dashboard-col-min-width` -|`25rem` +|Aura, Lumo |Maximum column width |`--vaadin-dashboard-col-min-width` -|`1fr` +|Aura, Lumo |Maximum column count |`--vaadin-dashboard-col-max-count` -| +|Aura, Lumo |Minimum row height |`--vaadin-dashboard-row-min-height` -|`12rem` +|Aura, Lumo |Dashboard padding (around contents) |`--vaadin-dashboard-padding` -|`--lumo-space-m` +|Aura, Lumo |Widget gap |`--vaadin-dashboard-gap` -|`--lumo-space-m` +|Aura, Lumo |Widget background |`--vaadin-dashboard-widget-background` -|`--lumo-base-color` +|Aura, Lumo |Widget corner radius |`--vaadin-dashboard-widget-border-radius` -|`--lumo-border-radius-l` +|Aura, Lumo |Widget border width |`--vaadin-dashboard-widget-border-width` -|`--1px` +|Aura, Lumo |Widget border color |`--vaadin-dashboard-widget-border-color` -|`--lumo-contrast-20pct` +|Aura, Lumo |Widget shadow (non-editable) |`--vaadin-dashboard-widget-shadow` -|`0 0 0 0 transparent` +|Aura, Lumo |Widget content padding |`--vaadin-dashboard-widget-padding` -|`0px` +|Aura, Lumo |Widget title wrapping |`--vaadin-dashboard-widget-title-wrap` -|`wrap` +|Aura, Lumo |Drop target / resize box background color |`--vaadin-dashboard-drop-target-background-color` -|`--lumo-primary-color-10pct` +|Lumo |Drop target / resize box border |`--vaadin-dashboard-drop-target-border` -|`--1px dashed var(--lumo-primary-color-50pct)` +|Lumo |=== From 1881ca8adf28ad6a18712d99e6242e92a0143093 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 3 Dec 2025 15:01:42 +0100 Subject: [PATCH 2/9] update styling page --- articles/components/dashboard/index.adoc | 2 +- articles/components/dashboard/styling.adoc | 57 +++++++++++++++------- 2 files changed, 40 insertions(+), 19 deletions(-) diff --git a/articles/components/dashboard/index.adoc b/articles/components/dashboard/index.adoc index 187a909e96..27a1334280 100644 --- a/articles/components/dashboard/index.adoc +++ b/articles/components/dashboard/index.adoc @@ -18,7 +18,7 @@ A component for building static dashboard layouts and dynamic, user-configurable :commercial-feature: Dashboard include::{articles}/_commercial-banner.adoc[opts=optional] -[.example.tall] +[.example.tall,themes="lumo,aura"] -- ifdef::flow[] [source,java] diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index a3ab669ce6..ac96c0694f 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -38,72 +38,93 @@ include::{root}/frontend/demo/component/dashboard/dashboard-variants.ts[render,p include::../_styling-section-theming-props.adoc[tag=style-properties] -[cols="1,2,1"] +=== Layout Properties + +[cols="3,1"] |=== -| Feature | Property | Supported by +| Property | Supported by -|Minimum column width |`--vaadin-dashboard-col-min-width` |Aura, Lumo -|Maximum column width |`--vaadin-dashboard-col-min-width` |Aura, Lumo -|Maximum column count |`--vaadin-dashboard-col-max-count` |Aura, Lumo -|Minimum row height |`--vaadin-dashboard-row-min-height` |Aura, Lumo -|Dashboard padding (around contents) |`--vaadin-dashboard-padding` |Aura, Lumo -|Widget gap |`--vaadin-dashboard-gap` |Aura, Lumo -|Widget background +|=== + + +=== Widget Properties + +[cols="3,1"] +|=== +| Property | Supported by + |`--vaadin-dashboard-widget-background` |Aura, Lumo -|Widget corner radius |`--vaadin-dashboard-widget-border-radius` |Aura, Lumo -|Widget border width |`--vaadin-dashboard-widget-border-width` |Aura, Lumo -|Widget border color |`--vaadin-dashboard-widget-border-color` |Aura, Lumo -|Widget shadow (non-editable) |`--vaadin-dashboard-widget-shadow` |Aura, Lumo -|Widget content padding |`--vaadin-dashboard-widget-padding` -|Aura, Lumo +|Lumo + +|`--vaadin-dashboard-widget-header-padding` +|Aura + +|`--vaadin-dashboard-widget-title-color` +|Aura + +|`--vaadin-dashboard-widget-title-font-size` +|Aura + +|`--vaadin-dashboard-widget-title-font-weight` +|Aura + +|`--vaadin-dashboard-widget-title-line-height` +|Aura -|Widget title wrapping |`--vaadin-dashboard-widget-title-wrap` |Aura, Lumo -|Drop target / resize box background color |`--vaadin-dashboard-drop-target-background-color` |Lumo -|Drop target / resize box border |`--vaadin-dashboard-drop-target-border` |Lumo |=== +=== Section Properties + +[cols="3,1"] +|=== +| Property | Supported by + +|`--vaadin-dashboard-section-border-radius` +|Aura + +|=== include::../_styling-section-intros.adoc[tag=selectors] From b1f944fbb7a368111356048c9c595a82ea09f943 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 3 Dec 2025 15:08:17 +0100 Subject: [PATCH 3/9] update example styles --- frontend/themes/docs/dashboard.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/themes/docs/dashboard.css b/frontend/themes/docs/dashboard.css index 84dff43574..97eb05f0f6 100644 --- a/frontend/themes/docs/dashboard.css +++ b/frontend/themes/docs/dashboard.css @@ -1,7 +1,7 @@ .dashboard-widget-content { + --stripe-color: hsla(214, 61%, 25%, 0.075); height: 100%; - background: repeating-linear-gradient(45deg, var(--lumo-contrast-5pct), var(--lumo-contrast-5pct) 10px, transparent 10px, transparent 20px) var(--lumo-contrast-5pct); - border-radius: var(--lumo-border-radius-m); + background: repeating-linear-gradient(45deg, var(--stripe-color), var(--stripe-color) 10px, transparent 10px, transparent 20px) var(--stripe-color); } .dashboard-widget-content.small { From 29d09a4a8bbbe127b05596c78ad7c23588386211 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 3 Dec 2025 15:15:49 +0100 Subject: [PATCH 4/9] fix prop name --- articles/components/dashboard/styling.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index ac96c0694f..56bbe17150 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -47,7 +47,7 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-col-min-width` |Aura, Lumo -|`--vaadin-dashboard-col-min-width` +|`--vaadin-dashboard-col-max-width` |Aura, Lumo |`--vaadin-dashboard-col-max-count` From c5d0c9a91227235c46822e74cd4b9d3d6402060d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Thu, 4 Dec 2025 08:41:55 +0100 Subject: [PATCH 5/9] improve column sizing --- articles/components/dashboard/styling.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index 56bbe17150..4b5ed06c83 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -9,7 +9,7 @@ order: 50 The following style variants can be applied to the Dashboard to change its appearance: -[cols="1,3,1"] +[cols="1,2,1"] |=== | Variant | Description | Supported by From ad4f80eabf3b8c180f7a3ee57273813ab58fbb39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Thu, 4 Dec 2025 09:32:33 +0100 Subject: [PATCH 6/9] use vaadin color palette --- frontend/themes/docs/dashboard.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/themes/docs/dashboard.css b/frontend/themes/docs/dashboard.css index 97eb05f0f6..23c9cd5692 100644 --- a/frontend/themes/docs/dashboard.css +++ b/frontend/themes/docs/dashboard.css @@ -1,5 +1,5 @@ .dashboard-widget-content { - --stripe-color: hsla(214, 61%, 25%, 0.075); + --stripe-color: var(--vaadin-background-container-strong); height: 100%; background: repeating-linear-gradient(45deg, var(--stripe-color), var(--stripe-color) 10px, transparent 10px, transparent 20px) var(--stripe-color); } From 73ccc95058f4b80b787dc695b31f9dfa7f47dcd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Thu, 4 Dec 2025 12:07:51 +0100 Subject: [PATCH 7/9] add --vaadin-dashboard-header-gap --- articles/components/dashboard/styling.adoc | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index 4b5ed06c83..ec2b1fa2c9 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -92,6 +92,9 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-widget-header-padding` |Aura +|`--vaadin-dashboard-header-gap` +|Aura + |`--vaadin-dashboard-widget-title-color` |Aura @@ -124,6 +127,9 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-section-border-radius` |Aura +|`--vaadin-dashboard-header-gap` +|Aura + |=== From 2d943be89ffccb2729ded9df6ff50b2596868bff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Thu, 4 Dec 2025 12:10:07 +0100 Subject: [PATCH 8/9] add colspan and rowspan --- articles/components/dashboard/styling.adoc | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index ec2b1fa2c9..abfe8ea3ed 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -56,6 +56,12 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-row-min-height` |Aura, Lumo +|`--vaadin-dashboard-widget-rowspan` +|Aura, Lumo + +|`--vaadin-dashboard-widget-colspan` +|Aura, Lumo + |`--vaadin-dashboard-padding` |Aura, Lumo From 4cc8be58bc47d55316f791c01055fd982287b8b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Thu, 4 Dec 2025 14:12:01 +0100 Subject: [PATCH 9/9] add property that also apply to section --- articles/components/dashboard/styling.adoc | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index abfe8ea3ed..7fa0c10c1f 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -98,7 +98,7 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-widget-header-padding` |Aura -|`--vaadin-dashboard-header-gap` +|`--vaadin-dashboard-widget-header-gap` |Aura |`--vaadin-dashboard-widget-title-color` @@ -133,9 +133,24 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |`--vaadin-dashboard-section-border-radius` |Aura -|`--vaadin-dashboard-header-gap` +|`--vaadin-dashboard-widget-header-gap` |Aura +|`--vaadin-dashboard-widget-title-color` +|Aura + +|`--vaadin-dashboard-widget-title-font-size` +|Aura + +|`--vaadin-dashboard-widget-title-font-weight` +|Aura + +|`--vaadin-dashboard-widget-title-line-height` +|Aura + +|`--vaadin-dashboard-widget-title-wrap` +|Aura, Lumo + |===