refactor: update dashboard to use base styles, cleanup Lumo CSS (#10054)

Author: web-padawan

packages/dashboard/src/styles/vaadin-dashboard-button-base-styles.js

@@ -12,6 +12,10 @@ import { css } from 'lit';
 import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-styles.js';
 
 const dashboardButton = css`
+  :host {
+    padding: 4px;
+  }
+
   :host([theme~='tertiary']) {
     color: var(--vaadin-dashboard-button-text-color, var(--vaadin-color-subtle));
   }

packages/dashboard/src/styles/vaadin-dashboard-widget-section-base-styles.js

@@ -77,7 +77,6 @@ export const dashboardWidgetAndSectionStyles = css`
 
   vaadin-dashboard-button {
     z-index: 1;
-    padding: 4px;
   }
 
   vaadin-dashboard-button .icon::before {

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

@@ -72,6 +72,12 @@ class DashboardLayout extends DashboardLayoutMixin(
     return dashboardLayoutStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`<div id="grid"><slot></slot></div>`;

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

@@ -81,6 +81,12 @@ class DashboardSection extends DashboardItemMixin(
     return dashboardSectionStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   static get properties() {
     return {
       /**

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

@@ -115,6 +115,12 @@ class DashboardWidget extends DashboardItemMixin(
     return dashboardWidgetStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   static get properties() {
     return {
       /**

packages/dashboard/src/vaadin-dashboard.js

@@ -120,6 +120,12 @@ class Dashboard extends DashboardLayoutMixin(
     return dashboardStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   static get properties() {
     return {
       /**

packages/vaadin-lumo-styles/src/components/dashboard-layout.css

@@ -4,76 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard-layout {
-  :host {
-    display: block;
-    overflow: auto;
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([dense-layout]) #grid {
-    grid-auto-flow: dense;
-  }
-
   #grid {
-    box-sizing: border-box;
-
-    /* Padding around dashboard edges */
     --_default-padding: var(--lumo-space-m);
-    --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
-    padding: var(--_padding);
-
-    /* Gap between widgets */
     --_default-gap: var(--lumo-space-m);
-    --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
-    gap: var(--_gap);
-
-    /* Default min and max column widths */
-    --_default-col-min-width: 25rem;
-    --_default-col-max-width: 1fr;
-
-    /* Effective min and max column widths */
-    --_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 */
-    --_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));
-
-    /* Effective column count */
-    --_effective-col-count: min(var(--_col-count), var(--_col-max-count));
-
-    /* Default row min height */
     --_default-row-min-height: 12rem;
-    /* Effective row min height */
-    --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
-    /* Effective row height */
-    --_row-height: minmax(var(--_row-min-height, auto), auto);
-
-    display: grid;
-    overflow: hidden;
-    min-width: calc(var(--_col-min-width) + var(--_padding) * 2);
-
-    grid-template-columns: repeat(
-      var(--_effective-col-count, auto-fill),
-      minmax(var(--_col-min-width), var(--_col-max-width))
-    );
-
-    grid-auto-rows: var(--_row-height);
-  }
-
-  ::slotted(*) {
-    /* The grid-column value applied to children */
-    --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
-
-    grid-column: var(--_item-column);
-
-    /* The grid-row value applied to children */
-    --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
-    grid-row: var(--_item-row);
   }
 
   :host([theme~='shaded-background']) {

packages/vaadin-lumo-styles/src/components/dashboard-section.css

@@ -5,50 +5,23 @@
  */
 @media lumo_components_dashboard-section {
   :host {
-    display: grid;
-    position: relative;
-    grid-template-columns: subgrid;
-    --_section-column: 1 / calc(var(--_effective-col-count) + 1);
-    grid-column: var(--_section-column) !important;
     gap: var(--_gap, 1rem);
-    /* Dashboard section header 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);
     --_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);
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  ::slotted(*) {
-    --_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);
+    border: none;
+    margin: 0;
+    padding: 0;
   }
 
   header {
-    grid-column: var(--_section-column);
     margin-bottom: calc(-1 * var(--_section-outline-offset));
     line-height: var(--lumo-line-height-s);
     padding-inline: var(--lumo-space-s);
     min-height: var(--lumo-size-l);
     align-items: center;
   }
 
-  :host::before {
-    z-index: 2 !important;
-  }
-
-  ::slotted(vaadin-dashboard-widget-wrapper) {
-    display: contents;
-  }
-
   [part='title'] {
     font-size: var(--lumo-font-size-xl);
     font-weight: 600;
@@ -108,6 +81,5 @@
 
   [part~='move-forward-button'] {
     inset-inline-end: calc(-1 * var(--_section-outline-offset));
-    transform: translateY(-50%);
   }
 }

packages/vaadin-lumo-styles/src/components/dashboard-widget.css

@@ -4,43 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard-widget {
-  :host {
-    display: flex;
-    flex-direction: column;
-    grid-column: var(--_item-column);
-    grid-row: var(--_item-row);
-    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;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host(:not([editable])) [part~='resize-button'] {
-    display: none;
-  }
-
-  [part~='content'] {
-    flex: 1;
-    overflow: hidden;
   }
 
   /* Widget states */
 
   :host([editable]) {
-    --vaadin-dashboard-widget-shadow: var(--_widget-editable-shadow);
     --_widget-border-color: var(--lumo-contrast-20pct);
     --_widget-border-width: 1px;
   }
@@ -51,7 +23,6 @@
   }
 
   :host([selected]) {
-    --vaadin-dashboard-widget-shadow: var(--_widget-selected-shadow);
     background: var(--lumo-primary-color-10pct);
   }
 
@@ -62,13 +33,7 @@
   }
 
   :host([resizing])::after {
-    content: '';
-    z-index: 2;
-    position: absolute;
     top: -1px;
-    width: var(--_widget-resizer-width, 0);
-    height: var(--_widget-resizer-height, 0);
-    border-radius: inherit;
     background: var(--_drop-target-background-color);
     border: var(--_drop-target-border);
   }
@@ -81,7 +46,7 @@
   }
 
   :host([editable]) header {
-    padding-inline: var(--lumo-space-xs);
+    padding: var(--lumo-space-xs);
   }
 
   [part='title'] {
@@ -113,25 +78,12 @@
   /* Resize handle */
 
   [part~='resize-button'] {
-    z-index: 1;
-    overflow: hidden;
     --_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));
-    cursor: nwse-resize;
-    touch-action: none;
     --icon: var(--lumo-icons-resize-handle);
   }
 
-  :host([dir='rtl']) [part~='resize-button'] {
-    cursor: sw-resize;
-  }
-
-  :host([dir='rtl']) [part~='resize-button'] .icon::before {
-    transform: scaleX(-1);
-  }
-
   /* Accessible resize mode controls */
 
   [part~='resize-apply-button'] {
@@ -146,48 +98,11 @@
     min-width: var(--lumo-size-s);
   }
 
-  [part~='resize-shrink-width-button'] + [part~='resize-grow-width-button'] {
-    margin-left: 1px;
-  }
-
   [part~='resize-grow-height-button'],
   [part~='resize-shrink-height-button'] {
     height: var(--lumo-size-s);
     padding-right: 0;
     padding-left: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [part~='resize-shrink-height-button']:not([hidden]) + [part~='resize-grow-height-button'] {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  [part~='resize-shrink-height-button'] + [part~='resize-grow-height-button'] {
-    margin-top: 1px;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-grow-width-button'],
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-grow-width-button'],
-  :host([dir='rtl']) [part~='resize-shrink-width-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  :host(:not([dir='rtl'])) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  :host([dir='rtl']) [part~='resize-shrink-width-button']:not([hidden]) + [part~='resize-grow-width-button'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
   }
 
   [part~='resize-grow-height-button'],

packages/vaadin-lumo-styles/src/components/dashboard.css

@@ -4,15 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_dashboard {
-  #grid[item-resizing] {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  ::slotted(vaadin-dashboard-widget-wrapper) {
-    display: contents;
-  }
-
   :host {
     --_widget-opacity: 1;
   }