Docs/dashboard style updates

articles/components/dashboard/styling.adoc

@@ -5,6 +5,30 @@ order: 50
 ---
 = Styling
 
+== Style Variants
+
+The following style variants can be applied to the Dashboard to change its appearance:
+
+[cols="2, 2, 3"]
+|===
+| Flow `DashboardVariant` | `theme` attribute | Description
+
+| `LUMO_SHADED_BACKGROUND` | `shaded-background` | Applies shading to the dashboard background.
+
+| `LUMO_ELEVATED_WIDGETS` | `elevated-widgets` | Makes the widgets appear elevated above the dashboard surface.
+
+| `LUMO_FLAT_WIDGETS` | `flat-widgets` | A flat, borderless widget style.
+
+|===
+
+[.example.render-only.embedded]
+--
+[source,html]
+----
+include::{root}/frontend/demo/component/dashboard/dashboard-variants.ts[render,persistent]
+----
+--
+
 
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 
@@ -56,13 +80,13 @@ include::../_styling-section-theming-props.adoc[tag=style-properties]
 |`--vaadin-dashboard-widget-shadow`
 |`0 0 0 0 transparent`
 
-|Editable widget shadow
-|`--vaadin-dashboard-widget-editable-shadow`
-|`--lumo-box-shadow-s`
+|Widget content padding
+|`vaadin-dashboard-widget-padding`
+|`0px`
 
-|Selected widget shadow
-|`--vaadin-dashboard-widget-selected-shadow`
-|`0 2px 4px -1px var(--lumo-primary-color-10pct), 0 3px 12px -1px var(--lumo-primary-color-50pct);`
+|Widget title wrapping
+|`--vaadin-dashboard-widget-title-wrap`
+|`wrap`
 
 |Drop target / resize box background color
 |`--vaadin-dashboard-drop-target-background-color`

frontend/demo/component/dashboard/dashboard-basic.ts

@@ -32,7 +32,7 @@ export class Example extends LitElement {
         </vaadin-dashboard-widget>
         <vaadin-dashboard-widget
           widget-title="Visitors by country"
-          style="--vaadin-dashboard-item-rowspan: 2;"
+          style="--vaadin-dashboard-widget-rowspan: 2;"
         >
           <div class="dashboard-widget-content"></div>
         </vaadin-dashboard-widget>
@@ -44,7 +44,7 @@ export class Example extends LitElement {
         </vaadin-dashboard-widget>
         <vaadin-dashboard-widget
           widget-title="Visitors by browser"
-          style="--vaadin-dashboard-item-colspan: 2;"
+          style="--vaadin-dashboard-widget-colspan: 2;"
         >
           <div class="dashboard-widget-content"></div>
         </vaadin-dashboard-widget>

frontend/demo/component/dashboard/dashboard-dense-layout.ts

@@ -33,13 +33,13 @@ export class Example extends LitElement {
       >
         <vaadin-dashboard-widget
           widget-title="Wide widget 1"
-          style="--vaadin-dashboard-item-colspan: 2"
+          style="--vaadin-dashboard-widget-colspan: 2"
         >
           <div class="dashboard-widget-content small"></div>
         </vaadin-dashboard-widget>
         <vaadin-dashboard-widget
           widget-title="Wide widget 2"
-          style="--vaadin-dashboard-item-colspan: 2"
+          style="--vaadin-dashboard-widget-colspan: 2"
         >
           <div class="dashboard-widget-content small"></div>
         </vaadin-dashboard-widget>

frontend/demo/component/dashboard/dashboard-sections.ts

@@ -38,7 +38,7 @@ export class Example extends LitElement {
         <vaadin-dashboard-section section-title="Visitor Details">
           <vaadin-dashboard-widget
             widget-title="Visitors by country"
-            style="--vaadin-dashboard-item-rowspan: 2;"
+            style="--vaadin-dashboard-widget-rowspan: 2;"
           >
             <div class="dashboard-widget-content"></div>
           </vaadin-dashboard-widget>
@@ -50,7 +50,7 @@ export class Example extends LitElement {
           </vaadin-dashboard-widget>
           <vaadin-dashboard-widget
             widget-title="Visitors by browser"
-            style="--vaadin-dashboard-item-colspan: 2;"
+            style="--vaadin-dashboard-widget-colspan: 2;"
           >
             <div class="dashboard-widget-content"></div>
           </vaadin-dashboard-widget>

frontend/demo/component/dashboard/dashboard-variants.ts

@@ -0,0 +1,69 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/dashboard/vaadin-dashboard.js'; // hidden-source-line
+import '@vaadin/dashboard/vaadin-dashboard-layout.js';
+import '@vaadin/dashboard/vaadin-dashboard-widget.js';
+import '@vaadin/select';
+import '@vaadin/checkbox';
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+import { SelectChangeEvent } from '@vaadin/select';
+import { CheckboxChangeEvent } from '@vaadin/checkbox';
+
+@customElement('dashboard-variants')
+export class Example extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  @state()
+  items = [
+    { label: 'Outlined (default)', value: ' ' },
+    { label: 'Flat', value: 'flat-widgets' },
+    { label: 'Elevated', value: 'elevated-widgets' },
+  ];
+
+  @state()
+  widgetVariant: string = ' ';
+
+  @state()
+  shadedBoard: string = '';
+
+  onWidgetVariantChange(event: SelectChangeEvent) {
+    this.widgetVariant = event.target.value;
+  }
+
+  onShadedBgChange(event: CheckboxChangeEvent) {
+    this.shadedBoard = event.target.checked ? 'shaded-background' : '';
+  }
+
+  render() {
+    return html`
+      <div style="display:flex; align-items:baseline; gap:1rem; padding-inline:var(--lumo-space-m);">
+        <vaadin-select
+            label="Widget variant"
+            .items="${this.items}"
+            value=" "
+            @change="${this.onWidgetVariantChange}"
+        ></vaadin-select>
+        <vaadin-checkbox
+            label="Shaded board background"
+            @change="${this.onShadedBgChange}"
+        ></vaadin-checkbox>
+      </div>
+      <vaadin-dashboard-layout theme="${this.widgetVariant} ${this.shadedBoard}"
+        style=" width:100%; --vaadin-dashboard-row-min-height:200px; --vaadin-dashboard-col-min-width: 100px; --vaadin-dashboard-col-max-count: 3;"
+      >
+        <vaadin-dashboard-widget widget-title="Visitors">
+        </vaadin-dashboard-widget>
+        <vaadin-dashboard-widget widget-title="Downloads">
+        </vaadin-dashboard-widget>
+        <vaadin-dashboard-widget widget-title="Conversions">
+        </vaadin-dashboard-widget>
+      </vaadin-dashboard-layout>
+    `;
+  }
+}

frontend/demo/component/dashboard/react/dashboard-basic.tsx

@@ -22,7 +22,7 @@ function Example() {
       </DashboardWidget>
       <DashboardWidget
         widgetTitle="Visitors by country"
-        style={{ '--vaadin-dashboard-item-rowspan': '2' }}
+        style={{ '--vaadin-dashboard-widget-rowspan': '2' }}
       >
         <div className="dashboard-widget-content" />
       </DashboardWidget>
@@ -34,7 +34,7 @@ function Example() {
       </DashboardWidget>
       <DashboardWidget
         widgetTitle="Visitors by browser"
-        style={{ '--vaadin-dashboard-item-colspan': '2' }}
+        style={{ '--vaadin-dashboard-widget-colspan': '2' }}
       >
         <div className="dashboard-widget-content" />
       </DashboardWidget>

frontend/demo/component/dashboard/react/dashboard-sections.tsx

@@ -27,7 +27,7 @@ function Example() {
       <DashboardSection sectionTitle="Visitor Details">
         <DashboardWidget
           widgetTitle="Visitors by country"
-          style={{ '--vaadin-dashboard-item-rowspan': '2' }}
+          style={{ '--vaadin-dashboard-widget-rowspan': '2' }}
         >
           <div className="dashboard-widget-content"></div>
         </DashboardWidget>
@@ -39,7 +39,7 @@ function Example() {
         </DashboardWidget>
         <DashboardWidget
           widgetTitle="Visitors by browser"
-          style={{ '--vaadin-dashboard-item-colspan': '2' }}
+          style={{ '--vaadin-dashboard-widget-colspan': '2' }}
         >
           <div className="dashboard-widget-content"></div>
         </DashboardWidget>