Skip to content

Commit

Permalink
refactor: use vaadin-dashboard-button
Browse files Browse the repository at this point in the history
  • Loading branch information
tomivirkki committed Oct 3, 2024
1 parent ab4e01b commit d582de3
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 30 deletions.
1 change: 1 addition & 0 deletions packages/dashboard/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
40 changes: 40 additions & 0 deletions packages/dashboard/src/vaadin-dashboard-button.js
Original file line number Diff line number Diff line change
@@ -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 };
45 changes: 23 additions & 22 deletions packages/dashboard/src/vaadin-dashboard-item-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -92,7 +93,7 @@ export const DashboardItemMixin = (superClass) =>

/** @private */
__renderDragHandle() {
return html`<vaadin-button
return html`<vaadin-dashboard-button
id="drag-handle"
draggable="true"
class="drag-handle"
Expand All @@ -104,12 +105,12 @@ export const DashboardItemMixin = (superClass) =>
@click="${() => this.__enterMoveMode()}"
>
<div class="icon"></div>
</vaadin-button>`;
</vaadin-dashboard-button>`;
}

/** @private */
__renderRemoveButton() {
return html`<vaadin-button
return html`<vaadin-dashboard-button
aria-label="${this.__i18n.remove}"
title="${this.__i18n.remove}"
id="remove-button"
Expand All @@ -119,7 +120,7 @@ export const DashboardItemMixin = (superClass) =>
@click="${() => fireRemove(this)}"
>
<div class="icon"></div>
</vaadin-button>`;
</vaadin-dashboard-button>`;
}

/** @private */
Expand All @@ -140,7 +141,7 @@ export const DashboardItemMixin = (superClass) =>

/** @private */
__renderResizeHandle() {
return html`<vaadin-button
return html`<vaadin-dashboard-button
aria-label="${this.__i18n.resize}"
title="${this.__i18n.resize}"
id="resize-handle"
Expand All @@ -151,7 +152,7 @@ export const DashboardItemMixin = (superClass) =>
@click="${() => this.__enterResizeMode()}"
>
<div class="icon"></div>
</vaadin-button>`;
</vaadin-dashboard-button>`;
}

/** @private */
Expand All @@ -162,7 +163,7 @@ export const DashboardItemMixin = (superClass) =>
.hidden="${!this.__moveMode}"
@pointerdown="${(e) => e.preventDefault()}"
>
<vaadin-button
<vaadin-dashboard-button
theme="primary icon"
aria-label="${this.__i18n.moveBackward}"
title="${this.__i18n.moveBackward}"
Expand All @@ -171,8 +172,8 @@ export const DashboardItemMixin = (superClass) =>
part="move-backward-button"
>
<div class="icon"></div>
</vaadin-button>
<vaadin-button
</vaadin-dashboard-button>
<vaadin-dashboard-button
theme="primary icon large"
aria-label="${this.__i18n.moveApply}"
title="${this.__i18n.moveApply}"
Expand All @@ -181,8 +182,8 @@ export const DashboardItemMixin = (superClass) =>
part="move-apply-button"
>
<div class="icon"></div>
</vaadin-button>
<vaadin-button
</vaadin-dashboard-button>
<vaadin-dashboard-button
theme="primary icon"
aria-label="${this.__i18n.moveForward}"
title="${this.__i18n.moveForward}"
Expand All @@ -191,7 +192,7 @@ export const DashboardItemMixin = (superClass) =>
part="move-forward-button"
>
<div class="icon"></div>
</vaadin-button>
</vaadin-dashboard-button>
</div>`;
}

Expand All @@ -205,7 +206,7 @@ export const DashboardItemMixin = (superClass) =>
.hidden="${!this.__resizeMode}"
@pointerdown="${(e) => e.preventDefault()}"
>
<vaadin-button
<vaadin-dashboard-button
theme="primary icon large"
aria-label="${this.__i18n.resizeApply}"
title="${this.__i18n.resizeApply}"
Expand All @@ -214,8 +215,8 @@ export const DashboardItemMixin = (superClass) =>
part="resize-apply-button"
>
<div class="icon"></div>
</vaadin-button>
<vaadin-button
</vaadin-dashboard-button>
<vaadin-dashboard-button
theme="primary icon"
aria-label="${this.__i18n.resizeShrinkWidth}"
title="${this.__i18n.resizeShrinkWidth}"
Expand All @@ -224,8 +225,8 @@ export const DashboardItemMixin = (superClass) =>
part="resize-shrink-width-button"
>
<div class="icon"></div>
</vaadin-button>
<vaadin-button
</vaadin-dashboard-button>
<vaadin-dashboard-button
theme="primary icon"
aria-label="${this.__i18n.resizeGrowWidth}"
title="${this.__i18n.resizeGrowWidth}"
Expand All @@ -234,8 +235,8 @@ export const DashboardItemMixin = (superClass) =>
part="resize-grow-width-button"
>
<div class="icon"></div>
</vaadin-button>
<vaadin-button
</vaadin-dashboard-button>
<vaadin-dashboard-button
theme="primary icon"
aria-label="${this.__i18n.resizeShrinkHeight}"
title="${this.__i18n.resizeShrinkHeight}"
Expand All @@ -245,8 +246,8 @@ export const DashboardItemMixin = (superClass) =>
.hidden="${!hasMinRowHeight}"
>
<div class="icon"></div>
</vaadin-button>
<vaadin-button
</vaadin-dashboard-button>
<vaadin-dashboard-button
theme="primary icon"
aria-label="${this.__i18n.resizeGrowHeight}"
title="${this.__i18n.resizeGrowHeight}"
Expand All @@ -256,7 +257,7 @@ export const DashboardItemMixin = (superClass) =>
.hidden="${!hasMinRowHeight}"
>
<div class="icon"></div>
</vaadin-button>
</vaadin-dashboard-button>
</div>`;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/vaadin-dashboard-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const dashboardWidgetAndSectionStyles = css`
overflow: hidden;
}
vaadin-button {
vaadin-dashboard-button {
z-index: 1;
}
Expand Down
1 change: 0 additions & 1 deletion packages/dashboard/src/vaadin-dashboard-widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
* See https://vaadin.com/commercial-license-and-service-terms for the full
* license.
*/
import '@vaadin/button/src/vaadin-button.js';
import { html, LitElement } from 'lit';
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
import { registerStyles } from '@vaadin/vaadin-themable-mixin';

registerStyles('vaadin-dashboard-button', button, {
moduleId: 'lumo-dashboard-button',
});

export { button };
1 change: 1 addition & 0 deletions packages/dashboard/theme/lumo/vaadin-dashboard-button.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import './vaadin-dashboard-button-styles.js';
1 change: 1 addition & 0 deletions packages/dashboard/theme/lumo/vaadin-dashboard-section.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
import './vaadin-dashboard-section-styles.js';
import './vaadin-dashboard-button.js';
import '../../src/vaadin-dashboard-section.js';
10 changes: 5 additions & 5 deletions packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const dashboardWidgetAndSection = css`
}
/* Buttons styling */
vaadin-button {
vaadin-dashboard-button {
font-family: 'lumo-icons';
font-size: var(--lumo-icon-size-s);
}
Expand All @@ -55,9 +55,9 @@ const dashboardWidgetAndSection = css`
content: var(--icon);
}
:host(:not([selected])) *:not(.mode-controls) vaadin-button,
:host([move-mode]) *:not(.mode-controls) vaadin-button,
:host([resize-mode]) *:not(.mode-controls) vaadin-button {
:host(:not([selected])) *:not(.mode-controls) vaadin-dashboard-button,
:host([move-mode]) *:not(.mode-controls) vaadin-dashboard-button,
:host([resize-mode]) *:not(.mode-controls) vaadin-dashboard-button {
color: var(--lumo-disabled-text-color);
}
Expand Down Expand Up @@ -104,7 +104,7 @@ const dashboardWidgetAndSection = css`
}
/* Mode controls styling */
.mode-controls vaadin-button[focused] {
.mode-controls vaadin-dashboard-button[focused] {
z-index: 3;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/theme/lumo/vaadin-dashboard-widget.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import './vaadin-dashboard-widget-styles.js';
import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
import './vaadin-dashboard-button.js';
import '../../src/vaadin-dashboard-widget.js';

0 comments on commit d582de3

Please sign in to comment.