Dashboard style update

packages/dashboard/src/vaadin-dashboard-widget.d.ts

@@ -62,10 +62,19 @@ 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-item-colspan`           | colspan of the widget
+ * `--vaadin-dashboard-item-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-editable-shadow` | widget edit mode shadow
+ * `--vaadin-dashboard-widget-selected-shadow` | selected widget shadow
+ * `--vaadin-dashboard-widget-padding`         | padding around widget content
+ * `--vaadin-dashboard-widget-title-wrap`      | widget title wrap
  *
  * The following state attributes are available for styling:
  *

packages/dashboard/src/vaadin-dashboard-widget.js

@@ -68,10 +68,19 @@ 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-item-colspan`           | colspan of the widget
+ * `--vaadin-dashboard-item-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-editable-shadow` | widget edit mode shadow
+ * `--vaadin-dashboard-widget-selected-shadow` | selected widget shadow
+ * `--vaadin-dashboard-widget-padding`         | padding around widget content
+ * `--vaadin-dashboard-widget-title-wrap`      | widget title wrap
  *
  * The following state attributes are available for styling:
  *

packages/dashboard/test/visual/lumo/dashboard.test.ts

@@ -127,5 +127,61 @@ describe('dashboard', () => {
       element.editable = false;
       await visualDiff(div, getName('non-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`<vaadin-dashboard-widget
+              widget-title="Long title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies lobortis orci, a faucibus tortor blandit at."
+            >
+              <div class="content" slot="header-content">Header content</div>
+              <div class="content">Content</div>
+            </vaadin-dashboard-widget>`,
+            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'));
+      });
+    });
   });
 });

packages/dashboard/theme/lumo/vaadin-dashboard-layout-styles.js

@@ -1,6 +1,22 @@
 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);

packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js

@@ -20,6 +20,7 @@ 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'] {

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js

@@ -57,19 +57,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;
+    align-self: safe center;
   }
 
   vaadin-dashboard-button {
@@ -110,6 +111,7 @@ const dashboardWidgetAndSection = css`
   [part~='remove-button'] {
     cursor: pointer;
     --icon: var(--lumo-icons-cross);
+    margin-inline-start: var(--lumo-space-xs);
   }
 
   /* Mode controls */
@@ -144,23 +146,35 @@ 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);
+    box-shadow: var(--_vaadin-dashboard-widget-shadow);
+    position: relative;
+  }
+
+  :host::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: calc(-1 * var(--_vaadin-dashboard-widget-border-width));
+    border: var(--_vaadin-dashboard-widget-border-width) solid var(--_vaadin-dashboard-widget-border-color);
+    border-radius: calc(var(--_vaadin-dashboard-widget-border-radius) + var(--_vaadin-dashboard-widget-border-width));
+    pointer-events: none;
   }
 
   /* Widget states */
 
   :host([editable]) {
-    --_shadow: var(--_vaadin-dashboard-widget-editable-shadow);
+    --_vaadin-dashboard-widget-shadow: var(--_vaadin-dashboard-widget-editable-shadow);
+    --_vaadin-dashboard-widget-border-color: var(--lumo-contrast-20pct);
+    --_vaadin-dashboard-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(--_vaadin-dashboard-widget-selected-shadow);
     background: var(--lumo-primary-color-10pct);
   }
 
@@ -179,8 +193,7 @@ const dashboardWidget = css`
 
   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 +207,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,