feat: dashboard lumo styles

dev/dashboard-layout.html

@@ -14,13 +14,6 @@
  </script>
 
  <style>
- vaadin-dashboard-widget {
- background-color: #f5f5f5;
- border: 1px solid #e0e0e0;
- border-radius: 4px;
- padding: 10px;
- }
-
  vaadin-dashboard-layout {
  --vaadin-dashboard-col-min-width: 300px;
  --vaadin-dashboard-col-max-width: 500px;

dev/dashboard.html

@@ -8,12 +8,6 @@
  <script type="module" src="./common.js"></script>
 
  <style>
- vaadin-dashboard-widget {
- background-color: #f5f5f5;
- border-radius: 4px;
- padding: 10px;
- }
-
  vaadin-dashboard {
  --vaadin-dashboard-col-min-width: 300px;
  --vaadin-dashboard-col-max-width: 500px;

packages/dashboard/package.json

@@ -37,6 +37,7 @@
  ],
  "dependencies": {
  "@open-wc/dedupe-mixin": "^1.3.0",
+ "@vaadin/button": "24.5.0-alpha11",
  "@vaadin/component-base": "24.5.0-alpha11",
  "@vaadin/vaadin-lumo-styles": "24.5.0-alpha11",
  "@vaadin/vaadin-material-styles": "24.5.0-alpha11",

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

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { buttonStyles, buttonTemplate } from '@vaadin/button/src/vaadin-button-base.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+ static get is() {
+ return 'vaadin-dashboard-button';
+ }
+
+ static get styles() {
+ return buttonStyles;
+ }
+
+ /** @protected */
+ render() {
+ return buttonTemplate(html);
+ }
+
+ /** @protected */
+ ready() {
+ super.ready();
+
+ this._tooltipController = new TooltipController(this);
+ this.addController(this._tooltipController);
+ }
+}
+
+defineCustomElement(DashboardButton);
+
+export { DashboardButton };

packages/dashboard/src/vaadin-dashboard-item-mixin.js

@@ -8,6 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
+import './vaadin-dashboard-button.js';
 import { html } from 'lit';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
@@ -92,27 +93,34 @@ export const DashboardItemMixin = (superClass) =>
 
  /** @private */
  __renderDragHandle() {
- // To make the button draggable on Firefox, using a workaround from https://stackoverflow.com/a/55019027/3409629
- return html`<label draggable="true" class="drag-handle" id="drag-handle-wrapper">
- <button
- id="drag-handle"
- aria-label="${this.__i18n.move}"
- title="${this.__i18n.move}"
- tabindex="${this.__selected ? 0 : -1}"
- @click="${() => this.__enterMoveMode()}"
- ></button>
- </label>`;
+ return html`<vaadin-dashboard-button
+ id="drag-handle"
+ draggable="true"
+ class="drag-handle"
+ part="move-button"
+ theme="icon tertiary"
+ aria-label="${this.__i18n.move}"
+ title="${this.__i18n.move}"
+ tabindex="${this.__selected ? 0 : -1}"
+ @click="${() => this.__enterMoveMode()}"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>`;
  }
 
  /** @private */
  __renderRemoveButton() {
- return html`<button
+ return html`<vaadin-dashboard-button
  aria-label="${this.__i18n.remove}"
  title="${this.__i18n.remove}"
  id="remove-button"
+ part="remove-button"
+ theme="icon tertiary"
  tabindex="${this.__selected ? 0 : -1}"
  @click="${() => fireRemove(this)}"
- ></button>`;
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>`;
  }
 
  /** @private */
@@ -133,14 +141,18 @@ export const DashboardItemMixin = (superClass) =>
 
  /** @private */
  __renderResizeHandle() {
- return html`<button
+ return html`<vaadin-dashboard-button
  aria-label="${this.__i18n.resize}"
  title="${this.__i18n.resize}"
  id="resize-handle"
+ part="resize-button"
  class="resize-handle"
+ theme="icon tertiary"
  tabindex="${this.__selected ? 0 : -1}"
  @click="${() => this.__enterResizeMode()}"
- ></button>`;
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>`;
  }
 
  /** @private */
@@ -151,24 +163,36 @@ export const DashboardItemMixin = (superClass) =>
  .hidden="${!this.__moveMode}"
  @pointerdown="${(e) => e.preventDefault()}"
  >
- <button
+ <vaadin-dashboard-button
+ theme="primary icon"
  aria-label="${this.__i18n.moveBackward}"
  title="${this.__i18n.moveBackward}"
  @click="${() => fireMove(this, -1)}"
  id="move-backward"
- ></button>
- <button
+ part="move-backward-button"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
+ <vaadin-dashboard-button
+ theme="primary icon large"
  aria-label="${this.__i18n.moveApply}"
  title="${this.__i18n.moveApply}"
  @click="${() => this.__exitMode(true)}"
  id="move-apply"
- ></button>
- <button
+ part="move-apply-button"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
+ <vaadin-dashboard-button
+ theme="primary icon"
  aria-label="${this.__i18n.moveForward}"
  title="${this.__i18n.moveForward}"
  @click="${() => fireMove(this, 1)}"
  id="move-forward"
- ></button>
+ part="move-forward-button"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
  </div>`;
  }
 
@@ -182,38 +206,58 @@ export const DashboardItemMixin = (superClass) =>
  .hidden="${!this.__resizeMode}"
  @pointerdown="${(e) => e.preventDefault()}"
  >
- <button
+ <vaadin-dashboard-button
+ theme="primary icon large"
  aria-label="${this.__i18n.resizeApply}"
  title="${this.__i18n.resizeApply}"
  @click="${() => this.__exitMode(true)}"
  id="resize-apply"
- ></button>
- <button
+ part="resize-apply-button"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
+ <vaadin-dashboard-button
+ theme="primary icon"
  aria-label="${this.__i18n.resizeShrinkWidth}"
  title="${this.__i18n.resizeShrinkWidth}"
  @click="${() => fireResize(this, -1, 0)}"
  id="resize-shrink-width"
- ></button>
- <button
+ part="resize-shrink-width-button"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
+ <vaadin-dashboard-button
+ theme="primary icon"
  aria-label="${this.__i18n.resizeGrowWidth}"
  title="${this.__i18n.resizeGrowWidth}"
  @click="${() => fireResize(this, 1, 0)}"
  id="resize-grow-width"
- ></button>
- <button
+ part="resize-grow-width-button"
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
+ <vaadin-dashboard-button
+ theme="primary icon"
  aria-label="${this.__i18n.resizeShrinkHeight}"
  title="${this.__i18n.resizeShrinkHeight}"
  @click="${() => fireResize(this, 0, -1)}"
  id="resize-shrink-height"
+ part="resize-shrink-height-button"
  .hidden="${!hasMinRowHeight}"
- ></button>
- <button
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
+ <vaadin-dashboard-button
+ theme="primary icon"
  aria-label="${this.__i18n.resizeGrowHeight}"
  title="${this.__i18n.resizeGrowHeight}"
  @click="${() => fireResize(this, 0, 1)}"
  id="resize-grow-height"
+ part="resize-grow-height-button"
  .hidden="${!hasMinRowHeight}"
- ></button>
+ >
+ <div class="icon"></div>
+ </vaadin-dashboard-button>
  </div>`;
  }
 
@@ -231,7 +275,10 @@ export const DashboardItemMixin = (superClass) =>
  }
 
  /** @private */
- __selectedChanged(selected) {
+ __selectedChanged(selected, oldSelected) {
+ if (!!selected === !!oldSelected) {
+ return;
+ }
  this.dispatchEvent(new CustomEvent('item-selected-changed', { bubbles: true, detail: { value: selected } }));
  if (selected) {
  this.__focusTrapController.trapFocus(this.$.focustrap);
@@ -291,12 +338,18 @@ export const DashboardItemMixin = (superClass) =>
  }
 
  /** @private */
- __moveModeChanged(moveMode) {
+ __moveModeChanged(moveMode, oldMoveMode) {
+ if (!!moveMode === !!oldMoveMode) {
+ return;
+ }
  this.dispatchEvent(new CustomEvent('item-move-mode-changed', { bubbles: true, detail: { value: moveMode } }));
  }
 
  /** @private */
- __resizeModeChanged(resizeMode) {
+ __resizeModeChanged(resizeMode, oldResizeMode) {
+ if (!!resizeMode === !!oldResizeMode) {
+ return;
+ }
  this.dispatchEvent(new CustomEvent('item-resize-mode-changed', { bubbles: true, detail: { value: resizeMode } }));
  }
  };

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

@@ -35,7 +35,7 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * `--vaadin-dashboard-col-max-width` | maximum column width of the layout
  * `--vaadin-dashboard-row-min-height` | minimum row height of the layout
  * `--vaadin-dashboard-col-max-count` | maximum column count of the layout
- * `--vaadin-dashboard-spacing` | spacing between child elements and space around its outer edges
+ * `--vaadin-dashboard-spacing` | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
  *
  * The following state attributes are available for styling:
  *

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

@@ -38,7 +38,7 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * `--vaadin-dashboard-col-max-width` | maximum column width of the layout
  * `--vaadin-dashboard-row-min-height` | minimum row height of the layout
  * `--vaadin-dashboard-col-max-count` | maximum column count of the layout
- * `--vaadin-dashboard-spacing` | spacing between child elements and space around its outer edges
+ * `--vaadin-dashboard-spacing` | spacing between child elements and space around its outer edges. Must be in length units (0 is not allowed, 0px is)
  *
  * The following state attributes are available for styling:
  *