jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 12:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to ha-button

Browse Source
This commit is contained in:
Wendelin 2025-05-26 15:05:05 +02:00
parent b8cbd1bb41
commit 71e859675c
No known key found for this signature in database
109 changed files with 1301 additions and 1020 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
cast/src/launcher/layout/hc-cast.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { ActionDetail } from "@material/mwc-list/mwc-list";
import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
import type { Auth, Connection } from "home-assistant-js-websocket";
@ -20,6 +18,7 @@ import { atLeastVersion } from "../../../../src/common/config/version";
import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
import "../../../../src/components/ha-icon";
import "../../../../src/components/ha-list";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-list-item";
import "../../../../src/components/ha-svg-icon";
import {
@ -63,12 +62,20 @@ class HcCast extends LitElement {
<p class="question action-item">
Stay logged in?
<span>
<mwc-button @click=${this._handleSaveTokens}>
<ha-button
appearance="plain"
size="small"
@click=${this._handleSaveTokens}
>
YES
</mwc-button>
<mwc-button @click=${this._handleSkipSaveTokens}>
</ha-button>
<ha-button
appearance="plain"
size="small"
@click=${this._handleSkipSaveTokens}
>
NO
</mwc-button>
</ha-button>
</span>
</p>
`
@ -78,10 +85,10 @@ class HcCast extends LitElement {
: !this.castManager.status
? html`
<p class="center-item">
<mwc-button raised @click=${this._handleLaunch}>
<ha-svg-icon .path=${mdiCast}></ha-svg-icon>
<ha-button @click=${this._handleLaunch}>
<ha-svg-icon slot="prefix" .path=${mdiCast}></ha-svg-icon>
Start Casting
</mwc-button>
</ha-button>
</p>
`
: html`
@ -121,14 +128,22 @@ class HcCast extends LitElement {
<div class="card-actions">
${this.castManager.status
? html`
<mwc-button @click=${this._handleLaunch}>
<ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
<ha-button appearance="plain" @click=${this._handleLaunch}>
<ha-svg-icon
slot="prefix"
.path=${mdiCastConnected}
></ha-svg-icon>
Manage
</mwc-button>
</ha-button>
`
: ""}
<div class="spacer"></div>
<mwc-button @click=${this._handleLogout}>Log out</mwc-button>
<ha-button
variant="danger"
appearance="plain"
@click=${this._handleLogout}
>Log out</ha-button
>
</div>
</hc-layout>
`;
@ -245,13 +260,6 @@ class HcCast extends LitElement {
color: var(--secondary-text-color);
}
mwc-button ha-svg-icon {
margin-right: 8px;
margin-inline-end: 8px;
margin-inline-start: initial;
height: 18px;
}
ha-list-item ha-icon,
ha-list-item ha-svg-icon {
padding: 12px;

26
cast/src/launcher/layout/hc-connect.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiCastConnected, mdiCast } from "@mdi/js";
import type {
Auth,
@ -28,6 +27,7 @@ import "../../../../src/layouts/hass-loading-screen";
import { registerServiceWorker } from "../../../../src/util/register-service-worker";
import "./hc-layout";
import "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-button";
const seeFAQ = (qid) => html`
See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@ -83,11 +83,14 @@ export class HcConnect extends LitElement {
Unable to connect to ${tokens!.hassUrl}.
</div>
<div class="card-actions">
<a href="/">
<mwc-button> Retry </mwc-button>
</a>
<ha-button appearance="plain" href="/">Retry</ha-button>
<div class="spacer"></div>
<mwc-button @click=${this._handleLogout}>Log out</mwc-button>
<ha-button
appearance="plain"
variant="danger"
@click=${this._handleLogout}
>Log out</ha-button
>
</div>
</hc-layout>
`;
@ -128,16 +131,19 @@ export class HcConnect extends LitElement {
${this.error ? html` <p class="error">${this.error}</p> ` : ""}
</div>
<div class="card-actions">
<mwc-button @click=${this._handleDemo}>
<ha-button appearance="plain" @click=${this._handleDemo}>
Show Demo
<ha-svg-icon
slot="suffix"
.path=${this.castManager.castState === "CONNECTED"
? mdiCastConnected
: mdiCast}
></ha-svg-icon>
</mwc-button>
</ha-button>
<div class="spacer"></div>
<mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
<ha-button appearance="plain" @click=${this._handleConnect}
>Authorize</ha-button
>
</div>
</hc-layout>
`;
@ -309,10 +315,6 @@ export class HcConnect extends LitElement {
color: darkred;
}
mwc-button ha-svg-icon {
margin-left: 8px;
}
.spacer {
flex: 1;
}

20
gallery/src/components/demo-black-white-row.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-button/mwc-button";
import type { Button } from "@material/mwc-button";
import type { TemplateResult } from "lit";
import { html, LitElement, css, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/ha-card";
import "../../../src/components/ha-button";
import type { HaButton } from "../../../src/components/ha-button";
@customElement("demo-black-white-row")
class DemoBlackWhiteRow extends LitElement {
@ -25,12 +25,9 @@ class DemoBlackWhiteRow extends LitElement {
<slot name="light"></slot>
</div>
<div class="card-actions">
<mwc-button
.disabled=${this.disabled}
@click=${this.handleSubmit}
>
<ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
Submit
</mwc-button>
</ha-button>
</div>
</ha-card>
</div>
@ -40,12 +37,9 @@ class DemoBlackWhiteRow extends LitElement {
<slot name="dark"></slot>
</div>
<div class="card-actions">
<mwc-button
.disabled=${this.disabled}
@click=${this.handleSubmit}
>
<ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
Submit
</mwc-button>
</ha-button>
</div>
</ha-card>
${this.value
@ -74,7 +68,7 @@ class DemoBlackWhiteRow extends LitElement {
}
handleSubmit(ev) {
const content = (ev.target as Button).closest(".content")!;
const content = (ev.target as HaButton).closest(".content")!;
fireEvent(this, "submitted" as any, {
slot: content.classList.contains("light") ? "light" : "dark",
});

4
gallery/src/pages/components/ha-alert.markdown
View File

@ -147,13 +147,13 @@ The `title ` option should not be used without a description.
<ha-alert alert-type="success">
This is a success alert — check it out!
<mwc-button slot="action" label="Undo"></mwc-button>
<ha-button slot="action" label="Undo"></ha-button>
</ha-alert>
```html
<ha-alert alert-type="success">
This is a success alert — check it out!
<mwc-button slot="action" label="Undo"></mwc-button>
<ha-button slot="action" label="Undo"></ha-button>
</ha-alert>
```

20
gallery/src/pages/components/ha-alert.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators";
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-logo-svg";
const alerts: {
@ -78,13 +78,21 @@ const alerts: {
title: "Error with action",
description: "This is a test error alert with action",
type: "error",
actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
actionSlot: html`<ha-button
size="small"
slot="action"
label="restart"
></ha-button>`,
},
{
title: "Unsaved data",
description: "You have unsaved data",
type: "warning",
actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
actionSlot: html`<ha-button
size="small"
slot="action"
label="save"
></ha-button>`,
},
{
title: "Slotted icon",
@ -108,7 +116,7 @@ const alerts: {
title: "Slotted action",
description: "Alert with slotted action",
type: "info",
actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
actionSlot: html`<ha-button slot="action" label="action"></ha-button>`,
},
{
description: "Dismissable information (RTL)",
@ -120,7 +128,7 @@ const alerts: {
title: "Error with action",
description: "This is a test error alert with action (RTL)",
type: "error",
actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
actionSlot: html`<ha-button slot="action" label="restart"></ha-button>`,
rtl: true,
},
{
@ -211,7 +219,7 @@ export class DemoHaAlert extends LitElement {
max-height: 24px;
width: 24px;
}
mwc-button {
ha-button {
--mdc-theme-primary: var(--primary-text-color);
}
`;

7
gallery/src/pages/misc/util-long-press.ts
View File

@ -1,8 +1,8 @@
import "@material/mwc-button";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-button";
import type { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler";
import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
@ -13,12 +13,13 @@ export class DemoUtilLongPress extends LitElement {
${[1, 2, 3].map(
() => html`
<ha-card>
<mwc-button
<ha-button
appearance="plain"
@action=${this._handleAction}
.actionHandler=${actionHandler({})}
>
(long) press me!
</mwc-button>
</ha-button>
<textarea></textarea>

3
hassio/src/addon-view/config/hassio-addon-network.ts
View File

@ -99,7 +99,8 @@ class HassioAddonNetwork extends LitElement {
: nothing}
<div class="card-actions">
<ha-progress-button
class="warning"
variant="danger"
appearance="plain"
.disabled=${this.disabled}
@click=${this._resetTapped}
>

102
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -25,6 +25,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import memoizeOne from "memoize-one";
import { atLeastVersion } from "../../../../src/common/config/version";
import { fireEvent } from "../../../../src/common/dom/fire_event";
@ -187,12 +188,13 @@ class HassioAddonInfo extends LitElement {
"addon.dashboard.protection_mode.content"
)}
<ha-button
variant="danger"
slot="action"
.label=${this.supervisor.localize(
"addon.dashboard.protection_mode.enable"
)}
@click=${this._protectionToggled}
>
${this.supervisor.localize(
"addon.dashboard.protection_mode.enable"
)}
</ha-button>
</ha-alert>
`
@ -692,14 +694,16 @@ class HassioAddonInfo extends LitElement {
? this._computeIsRunning
? html`
<ha-progress-button
class="warning"
variant="danger"
appearance="plain"
@click=${this._stopClicked}
.disabled=${systemManaged && !this.controlEnabled}
>
${this.supervisor.localize("addon.dashboard.stop")}
</ha-progress-button>
<ha-progress-button
class="warning"
variant="danger"
appearance="plain"
@click=${this._restartClicked}
>
${this.supervisor.localize("addon.dashboard.restart")}
@ -709,48 +713,19 @@ class HassioAddonInfo extends LitElement {
<ha-progress-button
@click=${this._startClicked}
.progress=${this.addon.state === "startup"}
appearance="plain"
>
${this.supervisor.localize("addon.dashboard.start")}
</ha-progress-button>
`
: html`
<ha-progress-button
.disabled=${!this.addon.available}
@click=${this._installClicked}
>
${this.supervisor.localize("addon.dashboard.install")}
</ha-progress-button>
`}
: nothing}
</div>
<div>
${this.addon.version
? html` ${this._computeShowWebUI
? html`
<a
href=${this._pathWebui!}
tabindex="-1"
target="_blank"
rel="noopener"
>
<ha-button>
${this.supervisor.localize(
"addon.dashboard.open_web_ui"
)}
</ha-button>
</a>
`
: nothing}
${this._computeShowIngressUI
? html`
<ha-button @click=${this._openIngress}>
${this.supervisor.localize(
"addon.dashboard.open_web_ui"
)}
</ha-button>
`
: nothing}
? html`
<ha-progress-button
class="warning"
variant="danger"
appearance="plain"
@click=${this._uninstallClicked}
.disabled=${systemManaged && !this.controlEnabled}
>
@ -759,14 +734,47 @@ class HassioAddonInfo extends LitElement {
${this.addon.build
? html`
<ha-progress-button
class="warning"
variant="danger"
appearance="plain"
@click=${this._rebuildClicked}
>
${this.supervisor.localize("addon.dashboard.rebuild")}
</ha-progress-button>
`
: nothing}`
: nothing}
: nothing}
${this._computeShowWebUI || this._computeShowIngressUI
? html`
<ha-button
href=${ifDefined(
!this._computeShowIngressUI
? this._pathWebui!
: nothing
)}
target=${ifDefined(
!this._computeShowIngressUI ? "_blank" : nothing
)}
rel=${ifDefined(
!this._computeShowIngressUI ? "noopener" : nothing
)}
@click=${!this._computeShowWebUI
? this._openIngress
: undefined}
>
${this.supervisor.localize(
"addon.dashboard.open_web_ui"
)}
</ha-button>
`
: nothing}
`
: html`
<ha-progress-button
.disabled=${!this.addon.available}
@click=${this._installClicked}
>
${this.supervisor.localize("addon.dashboard.install")}
</ha-progress-button>
`}
</div>
</div>
</ha-card>
@ -1146,15 +1154,17 @@ class HassioAddonInfo extends LitElement {
),
dismissText: this.supervisor.localize("common.cancel"),
});
button.actionError();
button.progress = false;
return;
}
} catch (err: any) {
button.actionError();
button.progress = false;
showAlertDialog(this, {
title: "Failed to validate addon configuration",
text: extractApiErrorMessage(err),
});
button.progress = false;
return;
}
@ -1168,11 +1178,15 @@ class HassioAddonInfo extends LitElement {
};
fireEvent(this, "hass-api-called", eventdata);
} catch (err: any) {
button.actionError();
button.progress = false;
showAlertDialog(this, {
title: this.supervisor.localize("addon.dashboard.action_error.start"),
text: extractApiErrorMessage(err),
});
return;
}
button.actionSuccess();
button.progress = false;
}
@ -1228,6 +1242,7 @@ class HassioAddonInfo extends LitElement {
path: "uninstall",
};
fireEvent(this, "hass-api-called", eventdata);
button.actionSuccess();
} catch (err: any) {
showAlertDialog(this, {
title: this.supervisor.localize(
@ -1235,6 +1250,7 @@ class HassioAddonInfo extends LitElement {
),
text: extractApiErrorMessage(err),
});
button.actionError();
}
button.progress = false;
}

11
hassio/src/backups/hassio-backups.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { ActionDetail } from "@material/mwc-list";
import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
@ -17,6 +16,7 @@ import type {
} from "../../../src/components/data-table/ha-data-table";
import "../../../src/components/ha-button-menu";
import "../../../src/components/ha-fab";
import "../../../src/components/ha-button";
import "../../../src/components/ha-icon-button";
import "../../../src/components/ha-list-item";
import "../../../src/components/ha-svg-icon";
@ -241,12 +241,13 @@ export class HassioBackups extends LitElement {
<div class="header-btns">
${!this.narrow
? html`
<mwc-button
<ha-button
appearance="plain"
variant="danger"
@click=${this._deleteSelected}
class="warning"
>
${this.supervisor.localize("backup.delete_selected")}
</mwc-button>
</ha-button>
`
: html`
<ha-icon-button
@ -408,7 +409,7 @@ export class HassioBackups extends LitElement {
margin-inline-end: -12px;
margin-inline-start: initial;
}
.header-btns > mwc-button,
.header-btns > ha-button,
.header-btns > ha-icon-button {
margin: 8px;
}

10
hassio/src/dashboard/hassio-update.ts
View File

@ -1,10 +1,9 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-card";
import "../../../src/components/ha-button";
import "../../../src/components/ha-settings-row";
import "../../../src/components/ha-svg-icon";
import type { HassioHassOSInfo } from "../../../src/data/hassio/host";
@ -109,10 +108,9 @@ export class HassioUpdate extends LitElement {
</ha-settings-row>
</div>
<div class="card-actions">
<a href="/hassio/update-available/${key}">
<mwc-button .label=${this.supervisor.localize("common.show")}>
</mwc-button>
</a>
<ha-button appearance="plain" href="/hassio/update-available/${key}">
${this.supervisor.localize("common.show")}
</ha-button>
</div>
</ha-card>
`;

11
hassio/src/dialogs/backup/dialog-hassio-backup-location.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-form/ha-form";
import type { SchemaUnion } from "../../../../src/components/ha-form/types";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@ -77,20 +77,21 @@ class HassioBackupLocationDialog extends LitElement {
@value-changed=${this._valueChanged}
dialogInitialFocus
></ha-form>
<mwc-button
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this.closeDialog}
dialogInitialFocus
>
${this._dialogParams.supervisor.localize("common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
.disabled=${this._waiting || !this._data}
slot="primaryAction"
@click=${this._changeMount}
>
${this._dialogParams.supervisor.localize("common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

1
hassio/src/dialogs/backup/dialog-hassio-backup.ts
View File

@ -8,7 +8,6 @@ import { atLeastVersion } from "../../../../src/common/config/version";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
import { slugify } from "../../../../src/common/string/slugify";
import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-button-menu";

15
hassio/src/dialogs/backup/dialog-hassio-create-backup.ts
View File

@ -1,10 +1,9 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-spinner";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import {
@ -69,16 +68,20 @@ class HassioCreateBackupDialog extends LitElement {
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<mwc-button slot="secondaryAction" @click=${this.closeDialog}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this.closeDialog}
>
${this._dialogParams.supervisor.localize("common.close")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
.disabled=${this._creatingBackup}
slot="primaryAction"
@click=${this._createBackup}
>
${this._dialogParams.supervisor.localize("backup.create")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

12
hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
View File

@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-list-item";
import "../../../../src/components/ha-select";
import "../../../../src/components/ha-spinner";
@ -109,17 +110,18 @@ class HassioDatadiskDialog extends LitElement {
"dialog.datadisk_move.no_devices"
)}
<mwc-button
slot="secondaryAction"
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
dialogInitialFocus
>
${this.dialogParams.supervisor.localize(
"dialog.datadisk_move.cancel"
)}
</mwc-button>
</ha-button>
<mwc-button
<ha-button
.disabled=${!this.selectedDevice}
slot="primaryAction"
@click=${this._moveDatadisk}
@ -127,7 +129,7 @@ class HassioDatadiskDialog extends LitElement {
${this.dialogParams.supervisor.localize(
"dialog.datadisk_move.move"
)}
</mwc-button>`}
</ha-button>`}
</ha-dialog>
`;
}

39
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiClose } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-expansion-panel";
import "../../../../src/components/ha-formfield";
@ -15,7 +15,6 @@ import "../../../../src/components/ha-list";
import "../../../../src/components/ha-list-item";
import "../../../../src/components/ha-password-field";
import "../../../../src/components/ha-radio";
import "../../../../src/components/ha-spinner";
import "../../../../src/components/ha-textfield";
import type { HaTextField } from "../../../../src/components/ha-textfield";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@ -154,16 +153,16 @@ export class DialogHassioNetwork
)}
</p>`
: ""}
<mwc-button
<ha-button
appearance="plain"
size="small"
class="scan"
@click=${this._scanForAP}
.disabled=${this._scanning}
.loading=${this._scanning}
>
${this._scanning
? html`<ha-spinner aria-label="Scanning" size="small">
</ha-spinner>`
: this.supervisor.localize("dialog.network.scan_ap")}
</mwc-button>
${this.supervisor.localize("dialog.network.scan_ap")}
</ha-button>
${this._accessPoints &&
this._accessPoints.accesspoints &&
this._accessPoints.accesspoints.length !== 0
@ -270,16 +269,16 @@ export class DialogHassioNetwork
: ""}
</div>
<div class="buttons">
<mwc-button
.label=${this.supervisor.localize("common.cancel")}
@click=${this.closeDialog}
<ha-button @click=${this.closeDialog} appearance="plain">
${this.supervisor.localize("common.cancel")}
</ha-button>
<ha-button
@click=${this._updateNetwork}
.disabled=${!this._dirty}
.loading=${this._processing}
>
</mwc-button>
<mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
${this._processing
? html`<ha-spinner size="small"> </ha-spinner>`
: this.supervisor.localize("common.save")}
</mwc-button>
${this.supervisor.localize("common.save")}
</ha-button>
</div>`;
}
@ -584,11 +583,7 @@ export class DialogHassioNetwork
}
}
mwc-button.warning {
--mdc-theme-primary: var(--error-color);
}
mwc-button.scan {
ha-button.scan {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;

22
hassio/src/dialogs/registries/dialog-hassio-registries.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete } from "@mdi/js";
import { mdiDelete, mdiPlus } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -7,6 +6,8 @@ import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-form/ha-form";
import type { SchemaUnion } from "../../../../src/components/ha-form/types";
import "../../../../src/components/ha-icon-button";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-svg-icon";
import "../../../../src/components/ha-settings-row";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
import {
@ -84,16 +85,19 @@ class HassioRegistriesDialog extends LitElement {
dialogInitialFocus
></ha-form>
<div class="action">
<mwc-button
<ha-button
?disabled=${Boolean(
!this._input.registry ||
!this._input.username ||
!this._input.password
)}
@click=${this._addNewRegistry}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${this.supervisor.localize("dialog.registries.add_registry")}
</mwc-button>
</ha-button>
</div>
`
: html`${this._registries?.length
@ -126,11 +130,17 @@ class HassioRegistriesDialog extends LitElement {
</ha-alert>
`}
<div class="action">
<mwc-button @click=${this._addRegistry} dialogInitialFocus>
<ha-button
@click=${this._addRegistry}
dialogInitialFocus
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${this.supervisor.localize(
"dialog.registries.add_new_registry"
)}
</mwc-button>
</ha-button>
</div> `}
</ha-dialog>
`;

35
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDeleteOff } from "@mdi/js";
import { mdiDelete, mdiDeleteOff, mdiPlus } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -7,8 +6,9 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-button";
import "../../../../src/components/ha-tooltip";
import "../../../../src/components/ha-spinner";
import "../../../../src/components/ha-svg-icon";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-icon-button";
import type {
@ -159,18 +159,22 @@ class HassioRepositoriesDialog extends LitElement {
@keydown=${this._handleKeyAdd}
dialogInitialFocus
></ha-textfield>
<mwc-button @click=${this._addRepository}>
${this._processing
? html`<ha-spinner size="small"></ha-spinner>`
: this._dialogParams!.supervisor.localize(
"dialog.repositories.add"
)}
</mwc-button>
<ha-button
.loading=${this._processing}
@click=${this._addRepository}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${this._dialogParams!.supervisor.localize(
"dialog.repositories.add"
)}
</ha-button>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this._dialogParams?.supervisor.localize("common.close")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}
@ -191,16 +195,11 @@ class HassioRepositoriesDialog extends LitElement {
border-radius: 4px;
margin-top: 4px;
}
mwc-button {
ha-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-spinner {
display: block;
margin: 32px;
text-align: center;
}
div.delete ha-icon-button {
color: var(--error-color);
}

15
hassio/src/system/hassio-core-info.ts
View File

@ -1,11 +1,10 @@
import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { atLeastVersion } from "../../../src/common/config/version";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-button-menu";
import "../../../src/components/ha-button";
import "../../../src/components/ha-card";
import "../../../src/components/ha-settings-row";
import type { HassioStats } from "../../../src/data/hassio/common";
@ -70,12 +69,12 @@ class HassioCoreInfo extends LitElement {
${!atLeastVersion(this.hass.config.version, 2021, 12) &&
this.supervisor.core.update_available
? html`
<a href="/hassio/update-available/core">
<mwc-button
.label=${this.supervisor.localize("common.show")}
>
</mwc-button>
</a>
<ha-button
appearance="plain"
href="/hassio/update-available/core"
>
${this.supervisor.localize("common.show")}
</ha-button>
`
: ""}
</ha-settings-row>

36
hassio/src/system/hassio-host-info.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import { mdiDotsVertical } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
@ -8,10 +6,11 @@ import memoizeOne from "memoize-one";
import { atLeastVersion } from "../../../src/common/config/version";
import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-button";
import "../../../src/components/ha-button-menu";
import "../../../src/components/ha-card";
import "../../../src/components/ha-list-item";
import "../../../src/components/ha-icon-button";
import "../../../src/components/ha-list-item";
import "../../../src/components/ha-settings-row";
import {
extractApiErrorMessage,
@ -77,24 +76,28 @@ class HassioHostInfo extends LitElement {
<span slot="description">
${this.supervisor.host.hostname}
</span>
<mwc-button
.label=${this.supervisor.localize("system.host.change")}
<ha-button
@click=${this._changeHostnameClicked}
appearance="plain"
size="small"
>
</mwc-button>
${this.supervisor.localize("system.host.change")}
</ha-button>
</ha-settings-row>`
: ""}
${this.supervisor.host.features.includes("network")
? html` <ha-settings-row>
? html`<ha-settings-row>
<span slot="heading">
${this.supervisor.localize("system.host.ip_address")}
</span>
<span slot="description"> ${primaryIpAddress} </span>
<mwc-button
.label=${this.supervisor.localize("system.host.change")}
<ha-button
@click=${this._changeNetworkClicked}
appearance="plain"
size="small"
>
</mwc-button>
${this.supervisor.localize("system.host.change")}
</ha-button>
</ha-settings-row>`
: ""}
@ -108,12 +111,13 @@ class HassioHostInfo extends LitElement {
${!atLeastVersion(this.hass.config.version, 2021, 12) &&
this.supervisor.os.update_available
? html`
<a href="/hassio/update-available/os">
<mwc-button
.label=${this.supervisor.localize("common.show")}
>
</mwc-button>
</a>
<ha-button
appearance="plain"
size="small"
href="/hassio/update-available/os"
>
${this.supervisor.localize("common.show")}
</ha-button>
`
: ""}
</ha-settings-row>

33
hassio/src/system/hassio-supervisor-info.ts
View File

@ -5,6 +5,7 @@ import { atLeastVersion } from "../../../src/common/config/version";
import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-alert";
import "../../../src/components/ha-button";
import "../../../src/components/ha-card";
import "../../../src/components/ha-settings-row";
import "../../../src/components/ha-switch";
@ -80,12 +81,13 @@ class HassioSupervisorInfo extends LitElement {
${!atLeastVersion(this.hass.config.version, 2021, 12) &&
this.supervisor.supervisor.update_available
? html`
<a href="/hassio/update-available/supervisor">
<mwc-button
.label=${this.supervisor.localize("common.show")}
>
</mwc-button>
</a>
<ha-button
appearance="plain"
size="small"
href="/hassio/update-available/supervisor"
>
${this.supervisor.localize("common.show")}
</ha-button>
`
: ""}
</ha-settings-row>
@ -156,24 +158,28 @@ class HassioSupervisorInfo extends LitElement {
${this.supervisor.localize(
"system.supervisor.unsupported_title"
)}
<mwc-button
<ha-button
slot="action"
.label=${this.supervisor.localize("common.learn_more")}
@click=${this._unsupportedDialog}
variant="warning"
size="small"
>
</mwc-button>
${this.supervisor.localize("common.learn_more")}
</ha-button>
</ha-alert>`}
${!this.supervisor.supervisor.healthy
? html`<ha-alert alert-type="error">
${this.supervisor.localize(
"system.supervisor.unhealthy_title"
)}
<mwc-button
<ha-button
variant="danger"
size="small"
slot="action"
.label=${this.supervisor.localize("common.learn_more")}
@click=${this._unhealthyDialog}
>
</mwc-button>
${this.supervisor.localize("common.learn_more")}
</ha-button>
</ha-alert>`
: ""}
</div>
@ -448,9 +454,6 @@ class HassioSupervisorInfo extends LitElement {
white-space: normal;
color: var(--secondary-text-color);
}
ha-alert mwc-button {
--mdc-theme-primary: var(--primary-text-color);
}
a {
text-decoration: none;
}

11
src/auth/ha-auth-flow.ts
View File

@ -1,5 +1,4 @@
/* eslint-disable lit/prefer-static-styles */
import "@material/mwc-button";
import { genClientId } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
@ -7,6 +6,7 @@ import { keyed } from "lit/directives/keyed";
import { customElement, property, state } from "lit/decorators";
import type { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-alert";
import "../components/ha-button";
import "../components/ha-checkbox";
import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
import "../components/ha-formfield";
@ -173,15 +173,14 @@ export class HaAuthFlow extends LitElement {
return html`
${this._renderStep(this.step)}
<div class="action">
<mwc-button
raised
<ha-button
@click=${this._handleSubmit}
.disabled=${this._submitting}
>
${this.step.type === "form"
? this.localize("ui.panel.page-authorize.form.next")
: this.localize("ui.panel.page-authorize.form.start_over")}
</mwc-button>
</ha-button>
</div>
`;
case "error":
@ -192,9 +191,9 @@ export class HaAuthFlow extends LitElement {
})}
</ha-alert>
<div class="action">
<mwc-button raised @click=${this._startOver}>
<ha-button @click=${this._startOver}>
${this.localize("ui.panel.page-authorize.form.start_over")}
</mwc-button>
</ha-button>
</div>
`;
case "loading":

1
src/components/buttons/ha-call-service-button.ts
View File

@ -30,6 +30,7 @@ class HaCallServiceButton extends LitElement {
<ha-progress-button
.progress=${this.progress}
.disabled=${this.disabled}
appearance="plain"
@click=${this._buttonTapped}
tabindex="0"
>

110
src/components/buttons/ha-progress-button.ts
View File

@ -5,6 +5,13 @@ import { customElement, property, state } from "lit/decorators";
import "../ha-button";
import "../ha-spinner";
import "../ha-svg-icon";
import type { Appearance } from "../ha-button";
const HIGHLIGHT_APPEARANCE = {
accent: "accent" as Appearance,
filled: "accent" as Appearance,
plain: "filled" as Appearance,
};
@customElement("ha-progress-button")
export class HaProgressButton extends LitElement {
@ -12,30 +19,53 @@ export class HaProgressButton extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public progress = false;
@property({ type: Boolean, reflect: true }) public progress = false;
@property({ type: Boolean }) public raised = false;
@property() appearance: Appearance = "accent";
@property({ type: Boolean }) public unelevated = false;
@property() variant:
| "primary"
| "danger"
| "neutral"
| "warning"
| "success" = "primary";
@state() private _result?: "success" | "error";
@state() private _hasInitialIcon = false;
public render(): TemplateResult {
const overlay = this._result || this.progress;
const appearance =
this.progress || this._result
? HIGHLIGHT_APPEARANCE[this.appearance]
: this.appearance;
return html`
<ha-button
.appearance=${this.unelevated
? "accent"
: this.raised
? "filled"
: "plain"}
.disabled=${this.disabled || this.progress}
class=${this._result || ""}
.appearance=${appearance}
.disabled=${this.disabled}
.loading=${this.progress}
.variant=${this._result === "success"
? "success"
: this._result === "error"
? "danger"
: this.variant}
.hideContent=${this._result !== undefined}
>
<slot name="icon" slot="icon"></slot>
<slot>${this.label}</slot>
${this._hasInitialIcon
? html`<slot name="icon" slot="prefix"></slot>`
: nothing}
<slot
>${this._result
? html`<ha-svg-icon
.path=${this._result === "success"
? mdiCheckBold
: mdiAlertOctagram}
></ha-svg-icon>`
: this.label}</slot
>
</ha-button>
${!overlay
${!this._result
? nothing
: html`
<div class="progress">
@ -43,14 +73,20 @@ export class HaProgressButton extends LitElement {
? html`<ha-svg-icon .path=${mdiCheckBold}></ha-svg-icon>`
: this._result === "error"
? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
: this.progress
? html`<ha-spinner size="small"></ha-spinner>`
: nothing}
: nothing}
</div>
`}
`;
}
firstUpdated() {
const iconSlot = this.shadowRoot!.querySelector(
'slot[name="icon"]'
) as HTMLSlotElement;
this._hasInitialIcon =
iconSlot && iconSlot.assignedNodes({ flatten: true }).length > 0;
}
public actionSuccess(): void {
this._setResult("success");
}
@ -71,47 +107,23 @@ export class HaProgressButton extends LitElement {
outline: none;
display: inline-block;
position: relative;
}
:host([progress]) {
pointer-events: none;
}
ha-button {
transition: all 1s;
pointer-events: initial;
}
ha-button.success {
--mdc-theme-primary: white;
background-color: var(--success-color);
transition: none;
border-radius: 4px;
pointer-events: none;
}
ha-button[unelevated].success,
ha-button[raised].success {
--mdc-theme-primary: var(--success-color);
--mdc-theme-on-primary: white;
}
ha-button.error {
--mdc-theme-primary: white;
background-color: var(--error-color);
transition: none;
border-radius: 4px;
pointer-events: none;
}
ha-button[unelevated].error,
ha-button[raised].error {
--mdc-theme-primary: var(--error-color);
--mdc-theme-on-primary: white;
}
.progress {
bottom: 4px;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
text-align: center;
top: 4px;
top: 0;
width: 100%;
}

29
src/components/ha-button.ts
View File

@ -3,6 +3,8 @@ import styles from "@shoelace-style/shoelace/dist/components/button/button.style
import { css } from "lit";
import { customElement, property } from "lit/decorators";
export type Appearance = "accent" | "filled" | "plain";
/**
* Home Assistant button component
*
@ -35,12 +37,15 @@ import { customElement, property } from "lit/decorators";
* @cssprop --ha-button-font-size - Font weight for the button text.
*
* @attr {("small"|"medium")} size - Sets the button size.
* @attr {("primary"|"danger"|"neutral"|"warning")} variant - Sets the button color variant. "primary" is default.
* @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
* @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
*/
@customElement("ha-button")
export class HaButton extends Button {
@property({ reflect: true }) appearance?: "accent" | "filled" | "plain";
@property({ reflect: true }) appearance?: Appearance;
@property({ type: Boolean, attribute: "hide-content", reflect: true })
hideContent = false;
static override styles = [
styles,
@ -97,6 +102,12 @@ export class HaButton extends Button {
--ha-button-theme-lighter-color: #fef3cd;
}
:host([variant="success"]) {
--ha-button-theme-color: var(--success-color);
--ha-button-theme-darker-color: #275e2a;
--ha-button-theme-lighter-color: #5ce463;
}
.button {
height: var(--ha-button-height, var(--button-height, 40px));
align-items: center;
@ -113,11 +124,13 @@ export class HaButton extends Button {
.button--standard.button--neutral,
.button--standard.button--danger,
.button--standard.button--warning,
.button--standard.button--success,
.button--standard.button--default:active:not(.button--disabled),
.button--standard.button--primary:active:not(.button--disabled),
.button--standard.button--neutral:active:not(.button--disabled),
.button--standard.button--danger:active:not(.button--disabled),
.button--standard.button--warning:active:not(.button--disabled),
.button--standard.button--success:active:not(.button--disabled),
.button:active:not(.button--disabled) {
background-color: var(--ha-button-theme-color);
color: var(--ha-button-text-color, var(--white-color));
@ -127,6 +140,7 @@ export class HaButton extends Button {
.button--standard.button--primary:hover:not(.button--disabled),
.button--standard.button--neutral:hover:not(.button--disabled),
.button--standard.button--warning:hover:not(.button--disabled),
.button--standard.button--success:hover:not(.button--disabled),
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: var(--ha-button-theme-darker-color);
color: var(--ha-button-text-color, var(--white-color));
@ -167,6 +181,17 @@ export class HaButton extends Button {
.button--caret.button--small .button__label {
padding-inline-end: 4px;
}
/*
* hide content for overlays
*/
:host([hide-content]) .button .button__prefix,
:host([hide-content]) .button .button__label,
:host([hide-content]) .button .button__suffix,
:host([hide-content]) .button .button__caret {
visibility: hidden;
}
`,
];
}

30
src/components/ha-dialog-date-picker.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import "app-datepicker";
import { format } from "date-fns";
import { css, html, LitElement, nothing } from "lit";
@ -9,6 +8,7 @@ import { haStyleDialog } from "../resources/styles";
import type { HomeAssistant } from "../types";
import type { DatePickerDialogParams } from "./ha-date-input";
import "./ha-dialog";
import "./ha-button";
@customElement("ha-dialog-date-picker")
export class HaDialogDatePicker extends LitElement {
@ -51,23 +51,33 @@ export class HaDialogDatePicker extends LitElement {
.firstDayOfWeek=${this._params.firstWeekday}
></app-datepicker>
${this._params.canClear
? html`<mwc-button
? html`<ha-button
slot="secondaryAction"
@click=${this._clear}
class="warning"
variant="danger"
appearance="plain"
>
${this.hass.localize("ui.dialogs.date-picker.clear")}
</mwc-button>`
</ha-button>`
: nothing}
<mwc-button slot="secondaryAction" @click=${this._setToday}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._setToday}
>
${this.hass.localize("ui.dialogs.date-picker.today")}
</mwc-button>
<mwc-button slot="primaryAction" dialogaction="cancel" class="cancel-btn">
</ha-button>
<ha-button
appearance="plain"
slot="primaryAction"
dialogaction="cancel"
class="cancel-btn"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button slot="primaryAction" @click=${this._setValue}>
</ha-button>
<ha-button slot="primaryAction" @click=${this._setValue}>
${this.hass.localize("ui.common.ok")}
</mwc-button>
</ha-button>
</ha-dialog>`;
}

21
src/components/ha-lawn_mower-action-button.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-button";
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import { supportsFeature } from "../common/entity/supports-feature";
import "./ha-button";
import type { LawnMowerEntity, LawnMowerEntityState } from "../data/lawn_mower";
import { LawnMowerEntityFeature } from "../data/lawn_mower";
import type { HomeAssistant } from "../types";
@ -49,16 +49,21 @@ class HaLawnMowerActionButton extends LitElement {
if (action && supportsFeature(this.stateObj, action.feature)) {
return html`
<mwc-button @click=${this.callService} .service=${action.service}>
<ha-button
appearance="plain"
@click=${this.callService}
.service=${action.service}
size="small"
>
${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
</mwc-button>
</ha-button>
`;
}
return html`
<mwc-button disabled>
<ha-button appearance="plain" disabled>
${this.hass.formatEntityState(this.stateObj)}
</mwc-button>
</ha-button>
`;
}
@ -72,17 +77,13 @@ class HaLawnMowerActionButton extends LitElement {
}
static styles = css`
mwc-button {
ha-button {
top: 3px;
height: 37px;
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;
}
mwc-button[disabled] {
background-color: transparent;
color: var(--secondary-text-color);
}
`;
}

2
src/dialogs/notifications/notification-item-template.ts
View File

@ -39,6 +39,8 @@ export class HuiNotificationItemTemplate extends LitElement {
.actions {
border-top: 1px solid var(--divider-color, #e8e8e8);
padding: 5px 16px;
display: flex;
justify-content: flex-end;
}
::slotted(.primary) {

5
src/dialogs/notifications/persistent-notification-item.ts
View File

@ -41,7 +41,10 @@ export class HuiPersistentNotificationItem extends LitElement {
</span>
</div>
<ha-button slot="actions" @click=${this._handleDismiss}
<ha-button
appearance="plain"
slot="actions"
@click=${this._handleDismiss}
>${this.hass.localize(
"ui.card.persistent_notification.dismiss"
)}</ha-button

29
src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts
View File

@ -36,8 +36,13 @@ class HaBackupConfigEncryptionKey extends LitElement {
"ui.panel.config.backup.encryption_key.download_emergency_kit_description"
)}
</span>
<ha-button slot="end" @click=${this._download}>
<ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
<ha-button
appearance="plain"
slot="end"
@click=${this._download}
size="small"
>
<ha-svg-icon .path=${mdiDownload} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)}
@ -54,7 +59,12 @@ class HaBackupConfigEncryptionKey extends LitElement {
"ui.panel.config.backup.encryption_key.show_encryption_key_description"
)}
</span>
<ha-button slot="end" @click=${this._show}>
<ha-button
appearance="plain"
slot="end"
@click=${this._show}
size="small"
>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.show_encryption_key_action"
)}
@ -71,7 +81,13 @@ class HaBackupConfigEncryptionKey extends LitElement {
"ui.panel.config.backup.encryption_key.change_encryption_key_description"
)}
</span>
<ha-button class="danger" slot="end" @click=${this._change}>
<ha-button
appearance="plain"
variant="danger"
size="small"
slot="end"
@click=${this._change}
>
${this.hass.localize(
"ui.panel.config.backup.encryption_key.change_encryption_key_action"
)}
@ -141,8 +157,9 @@ class HaBackupConfigEncryptionKey extends LitElement {
ha-md-list-item {
--md-item-overflow: visible;
}
.danger {
--mdc-theme-primary: var(--error-color);
ha-button[size="small"] ha-svg-icon {
--mdc-icon-size: 16px;
}
`;
}

3
src/panels/config/backup/components/ha-backup-details-restore.ts
View File

@ -67,7 +67,8 @@ class HaBackupDetailsRestore extends LitElement {
<ha-button
@click=${this._restore}
.disabled=${this._isRestoreDisabled}
destructive
variant="danger"
appearance="plain"
>
${this.localize(
`ui.panel.${this.translationKeyPanel}.details.restore.action`

2
src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
View File

@ -100,7 +100,7 @@ class HaBackupOverviewBackups extends LitElement {
</div>
<div class="card-actions">
<a href="/config/backup/backups?type=all">
<ha-button>
<ha-button appearance="filled">
${this.hass.localize(
"ui.panel.config.backup.overview.backups.show_all"
)}

2
src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
View File

@ -285,7 +285,7 @@ class HaBackupBackupsSummary extends LitElement {
</ha-md-list>
</div>
<div class="card-actions">
<ha-button @click=${this._configure}>
<ha-button @click=${this._configure} appearance="filled">
${this.hass.localize(
"ui.panel.config.backup.overview.settings.configure"
)}

2
src/panels/config/backup/dialogs/dialog-generate-backup.ts
View File

@ -204,7 +204,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
<div slot="actions">
${isFirstStep
? html`
<ha-button @click=${this.closeDialog}>
<ha-button @click=${this.closeDialog} appearance="plain">
${this.hass.localize("ui.common.cancel")}
</ha-button>
`

60
src/panels/config/backup/ha-config-backup-settings.ts
View File

@ -274,44 +274,42 @@ class HaConfigBackupSettings extends LitElement {
)}
</div>
<div class="card-actions">
<a href="/config/cloud/login">
<ha-button>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.sign_in"
)}
</ha-button>
</a>
<a href="/config/cloud/register">
<ha-button unelevated>
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
)}
</ha-button>
</a>
<ha-button appearance="plain" href="/config/cloud/login">
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.sign_in"
)}
</ha-button>
<ha-button href="/config/cloud/register">
${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
)}
</ha-button>
</div>
</ha-card>`
: nothing}
<div class="card-actions">
<a
<ha-button
size="small"
href=${documentationUrl(this.hass, "/integrations/#backup")}
target="_blank"
rel="noreferrer"
appearance="plain"
>
<ha-button>
<ha-svg-icon slot="icon" .path=${mdiOpenInNew}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.settings.locations.more_locations"
)}
</ha-button>
</a>
<ha-svg-icon slot="prefix" .path=${mdiOpenInNew}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.backup.settings.locations.more_locations"
)}
</ha-button>
${supervisor
? html`<a href="/config/storage">
<ha-button>
${this.hass.localize(
"ui.panel.config.backup.settings.locations.manage_network_storage"
)}
</ha-button>
</a>`
? html`<ha-button
size="small"
appearance="plain"
href="/config/storage"
>
${this.hass.localize(
"ui.panel.config.backup.settings.locations.manage_network_storage"
)}
</ha-button>`
: nothing}
</div>
</ha-card>
@ -549,6 +547,10 @@ class HaConfigBackupSettings extends LitElement {
display: flex;
justify-content: space-between;
}
ha-button[size="small"] ha-svg-icon {
--mdc-icon-size: 16px;
}
`;
}

29
src/panels/config/cloud/account/dialog-cloud-tts-try.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -13,6 +11,7 @@ import { supportsFeature } from "../../../../common/entity/supports-feature";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-list-item";
import "../../../../components/ha-select";
import "../../../../components/ha-button";
import "../../../../components/ha-textarea";
import type { HaTextArea } from "../../../../components/ha-textarea";
import { showAutomationEditor } from "../../../../data/automation";
@ -118,26 +117,28 @@ export class DialogTryTts extends LitElement {
)}
</ha-select>
</div>
<mwc-button
<ha-button
slot="primaryAction"
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.play"
)}
@click=${this._playExample}
.disabled=${this._loadingExample}
>
<ha-svg-icon slot="icon" .path=${mdiPlayCircleOutline}></ha-svg-icon>
</mwc-button>
<mwc-button
<ha-svg-icon
slot="prefix"
.path=${mdiPlayCircleOutline}
></ha-svg-icon>
${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")}
</ha-button>
<ha-button
appearance="plain"
slot="secondaryAction"
.disabled=${target === "browser"}
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.create_automation"
)}
@click=${this._createAutomation}
>
<ha-svg-icon slot="icon" .path=${mdiRobot}></ha-svg-icon>
</mwc-button>
<ha-svg-icon slot="prefix" .path=${mdiRobot}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.create_automation"
)}
</ha-button>
</ha-dialog>
`;
}

6
src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { createCloseHeading } from "../../../../components/ha-dialog";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import "../../../../components/ha-button";
import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
@customElement("dialog-cloud-certificate")
@ -74,11 +74,11 @@ class DialogCloudCertificate extends LitElement {
</ul>
</div>
<mwc-button @click=${this.closeDialog} slot="primaryAction">
<ha-button @click=${this.closeDialog} slot="primaryAction">
${this.hass!.localize(
"ui.panel.config.cloud.dialog_certificate.close"
)}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

19
src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -11,6 +10,7 @@ import type { HomeAssistant } from "../../../../types";
import { documentationUrl } from "../../../../util/documentation-url";
import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
import "../../../../components/ha-button";
import "../../../../components/ha-copy-textfield";
export class DialogManageCloudhook extends LitElement {
@ -86,21 +86,20 @@ export class DialogManageCloudhook extends LitElement {
></ha-copy-textfield>
</div>
<a
<ha-button
href=${docsUrl}
target="_blank"
rel="noreferrer"
slot="secondaryAction"
appearance="plain"
>
<mwc-button>
${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.view_documentation"
)}
</mwc-button>
</a>
<mwc-button @click=${this.closeDialog} slot="primaryAction">
${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.view_documentation"
)}
</ha-button>
<ha-button @click=${this.closeDialog} slot="primaryAction">
${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

19
src/panels/config/core/ha-config-analytics.ts
View File

@ -1,12 +1,14 @@
import "@material/mwc-button/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import "../../../components/ha-analytics";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-checkbox";
import "../../../components/ha-settings-row";
import "../../../components/ha-svg-icon";
import type { Analytics } from "../../../data/analytics";
import {
getAnalyticsDetails,
@ -44,21 +46,24 @@ class ConfigAnalytics extends LitElement {
></ha-analytics>
</div>
<div class="card-actions">
<mwc-button @click=${this._save}>
<ha-button appearance="plain" @click=${this._save}>
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.save_button"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
<div class="footer">
<a
<ha-button
size="small"
appearance="plain"
href=${documentationUrl(this.hass, "/integrations/analytics/")}
target="_blank"
rel="noreferrer"
>
<ha-svg-icon slot="suffix" .path=${mdiOpenInNew}></ha-svg-icon>
${this.hass.localize("ui.panel.config.analytics.learn_more")}
</a>
</ha-button>
</div>
`;
}
@ -122,6 +127,10 @@ class ConfigAnalytics extends LitElement {
padding: 32px 0 16px;
text-align: center;
}
ha-button[size="small"] ha-svg-icon {
--mdc-icon-size: 16px;
}
`, // row-reverse so we tab first to "save"
];
}

14
src/panels/config/core/updates/dialog-join-beta.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import "../../../../components/ha-button";
import { createCloseHeading } from "../../../../components/ha-dialog";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
@ -67,12 +67,16 @@ export class DialogJoinBeta
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
<mwc-button slot="primaryAction" @click=${this._cancel}>
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._cancel}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button slot="primaryAction" @click=${this._join}>
</ha-button>
<ha-button slot="primaryAction" @click=${this._join}>
${this.hass.localize("ui.dialogs.join_beta_channel.join")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

15
src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { computeDeviceNameDisplay } from "../../../../common/entity/compute_devi
import "../../../../components/ha-alert";
import "../../../../components/ha-area-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button";
import "../../../../components/ha-labels-picker";
import type { HaSwitch } from "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
@ -131,20 +131,21 @@ class DialogDeviceRegistryDetail extends LitElement {
</div>
</div>
</div>
<mwc-button
slot="secondaryAction"
<ha-button
slot="primaryAction"
@click=${this.closeDialog}
.disabled=${this._submitting}
appearance="plain"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._updateEntry}
.disabled=${this._submitting}
>
${this.hass.localize("ui.dialogs.device-registry-detail.update")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}
@ -190,7 +191,7 @@ class DialogDeviceRegistryDetail extends LitElement {
haStyle,
haStyleDialog,
css`
mwc-button.warning {
ha-button.warning {
margin-right: auto;
margin-inline-end: auto;
margin-inline-start: initial;

9
src/panels/config/devices/ha-config-device-page.ts
View File

@ -27,6 +27,7 @@ import { groupBy } from "../../../common/util/group-by";
import "../../../components/entity/ha-battery-icon";
import "../../../components/ha-alert";
import "../../../components/ha-button-menu";
import "../../../components/ha-button";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
@ -405,9 +406,9 @@ export class HaConfigDevicePage extends LitElement {
${device.disabled_by === "user"
? html`
<div class="card-actions" slot="actions">
<mwc-button unelevated @click=${this._enableDevice}>
<ha-button @click=${this._enableDevice}>
${this.hass.localize("ui.common.enable")}
</mwc-button>
</ha-button>
</div>
`
: ""}
@ -750,7 +751,7 @@ export class HaConfigDevicePage extends LitElement {
)}
target=${ifDefined(firstDeviceAction!.target)}
>
<mwc-button
<ha-button
class=${ifDefined(firstDeviceAction!.classes)}
.action=${firstDeviceAction!.action}
@click=${this._deviceActionClicked}
@ -774,7 +775,7 @@ export class HaConfigDevicePage extends LitElement {
></ha-svg-icon>
`
: ""}
</mwc-button>
</ha-button>
</a>
</div>

33
src/panels/config/energy/components/ha-energy-grid-settings.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button/mwc-button";
import {
mdiDelete,
mdiHomeExportOutline,
mdiHomeImportOutline,
mdiPencil,
mdiPlus,
mdiTransmissionTower,
} from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
@ -11,7 +11,9 @@ import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
import "../../../../components/ha-button";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-svg-icon";
import type { ConfigEntry } from "../../../../data/config_entries";
import {
deleteConfigEntry,
@ -160,10 +162,15 @@ export class EnergyGridSettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiHomeImportOutline}></ha-svg-icon>
<mwc-button @click=${this._addFromSource}
>${this.hass.localize(
<ha-button
appearance="filled"
size="small"
@click=${this._addFromSource}
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.energy.grid.add_consumption"
)}</mwc-button
)}</ha-button
>
</div>
@ -207,10 +214,15 @@ export class EnergyGridSettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiHomeExportOutline}></ha-svg-icon>
<mwc-button @click=${this._addToSource}
<ha-button
@click=${this._addToSource}
appearance="filled"
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon
>${this.hass.localize(
"ui.panel.config.energy.grid.add_return"
)}</mwc-button
)}</ha-button
>
</div>
@ -257,11 +269,16 @@ export class EnergyGridSettings extends LitElement {
darkOptimized: this.hass.themes?.darkMode,
})}
/>
<mwc-button @click=${this._addCO2Sensor}>
<ha-button
@click=${this._addCO2Sensor}
appearance="filled"
size="small"
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.energy.grid.add_co2_signal"
)}
</mwc-button>
</ha-button>
</div>
`}
</div>

14
src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiBatteryHigh } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button";
import type { BatterySourceTypeEnergyPreference } from "../../../../data/energy";
import {
emptyBatteryEnergyPreference,
@ -123,17 +123,21 @@ export class DialogEnergyBatterySettings
@value-changed=${this._statisticFromChanged}
></ha-statistic-picker>
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this.closeDialog}
slot="primaryAction"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._save}
.disabled=${!this._source.stat_energy_from ||
!this._source.stat_energy_to}
slot="primaryAction"
>
${this.hass.localize("ui.common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

14
src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiDevices } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -9,6 +8,7 @@ import "../../../../components/entity/ha-entity-picker";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-radio";
import "../../../../components/ha-button";
import "../../../../components/ha-select";
import "../../../../components/ha-list-item";
import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
@ -183,16 +183,20 @@ export class DialogEnergyDeviceSettings
)}
</ha-select>
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this.closeDialog}
slot="primaryAction"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._save}
.disabled=${!this._device}
slot="primaryAction"
>
${this.hass.localize("ui.common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

28
src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import { mdiSolarPower } from "@mdi/js";
import { mdiPlus, mdiSolarPower } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -9,7 +8,9 @@ import "../../../../components/ha-checkbox";
import type { HaCheckbox } from "../../../../components/ha-checkbox";
import "../../../../components/ha-dialog";
import "../../../../components/ha-formfield";
import "../../../../components/ha-button";
import "../../../../components/ha-radio";
import "../../../../components/ha-svg-icon";
import type { HaRadio } from "../../../../components/ha-radio";
import type { ConfigEntry } from "../../../../data/config_entries";
import { getConfigEntries } from "../../../../data/config_entries";
@ -179,24 +180,33 @@ export class DialogEnergySolarSettings
</ha-checkbox>
</ha-formfield>`
)}
<mwc-button @click=${this._addForecast}>
<ha-button
appearance="filled"
size="small"
@click=${this._addForecast}
>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.energy.solar.dialog.add_forecast"
)}
</mwc-button>
</ha-button>
</div>`
: ""}
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this.closeDialog}
slot="secondaryAction"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._save}
.disabled=${!this._source.stat_energy_from}
slot="primaryAction"
>
${this.hass.localize("ui.common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}
@ -294,7 +304,7 @@ export class DialogEnergySolarSettings
padding-inline-start: 32px;
padding-inline-end: initial;
}
.forecast-options mwc-button {
.forecast-options ha-button {
padding-left: 8px;
padding-inline-start: 8px;
padding-inline-end: initial;

14
src/panels/config/energy/dialogs/dialog-energy-water-settings.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiWater } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
@ -236,16 +236,20 @@ export class DialogEnergyWaterSettings
</ha-textfield>`
: ""}
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this.closeDialog}
slot="primaryAction"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._save}
.disabled=${!this._source.stat_energy_from}
slot="primaryAction"
>
${this.hass.localize("ui.common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

18
src/panels/config/hardware/ha-config-hardware.ts
View File

@ -12,6 +12,7 @@ import "../../../components/buttons/ha-progress-button";
import "../../../components/chart/ha-chart-base";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-md-list-item";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
@ -311,23 +312,27 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
? html`<div class="card-actions">
${boardConfigEntries.length
? html`
<mwc-button
<ha-button
.entry=${boardConfigEntries[0]}
@click=${this._openOptionsFlow}
appearance="plain"
>
${this.hass.localize(
"ui.panel.config.hardware.configure"
)}
</mwc-button>
</ha-button>
`
: nothing}
${isComponentLoaded(this.hass, "hassio")
? html`
<mwc-button @click=${this._openHardware}>
<ha-button
@click=${this._openHardware}
appearance="plain"
>
${this.hass.localize(
"ui.panel.config.hardware.available_hardware.title"
)}
</mwc-button>
</ha-button>
`
: nothing}
</div>`
@ -345,14 +350,15 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
)[0];
return html`<div class="row">
${dongle.name}${configEntry
? html`<mwc-button
? html`<ha-button
.entry=${configEntry}
@click=${this._openOptionsFlow}
appearance="filled"
>
${this.hass.localize(
"ui.panel.config.hardware.configure"
)}
</mwc-button>`
</ha-button>`
: ""}
</div>`;
})}

29
src/panels/config/integrations/dialog-yaml-integration.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
@ -6,6 +5,7 @@ import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import type { YamlIntegrationDialogParams } from "./show-add-integration-dialog";
import "../../../components/ha-dialog";
import "../../../components/ha-button";
@customElement("dialog-yaml-integration")
export class DialogYamlIntegration extends LitElement {
@ -43,25 +43,30 @@ export class DialogYamlIntegration extends LitElement {
"ui.panel.config.integrations.config_flow.yaml_only"
)}
</p>
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
<ha-button
appearance="plain"
@click=${this.closeDialog}
slot="primaryAction"
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${docLink
? html`<a
? html`<ha-button
appearance="plain"
href=${docLink}
target="_blank"
rel="noreferrer noopener"
slot="primaryAction"
@click=${this.closeDialog}
dialogInitialFocus
>
<mwc-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.open_documentation"
)}
</mwc-button>
</a>`
: html`<mwc-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.open_documentation"
)}
</ha-button>`
: html`<ha-button @click=${this.closeDialog} dialogInitialFocus>
${this.hass.localize("ui.common.ok")}
</mwc-button>`}
</ha-button>`}
</ha-dialog>
`;
}

37
src/panels/config/integrations/ha-config-integrations-dashboard.ts
View File

@ -21,6 +21,7 @@ import "../../../components/ha-button-menu";
import "../../../components/ha-check-list-item";
import "../../../components/ha-checkbox";
import "../../../components/ha-fab";
import "../../../components/ha-button";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../components/search-input";
@ -489,12 +490,15 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
"ui.panel.config.integrations.disable.disabled_integrations",
{ number: disabledConfigEntries.length }
)}
<mwc-button
<ha-button
appearance="plain"
size="small"
@click=${this._toggleShowDisabled}
.label=${this.hass.localize(
>
${this.hass.localize(
"ui.panel.config.integrations.disable.show"
)}
></mwc-button>
</ha-button>
</div>`
: ""}
${filterMenu}
@ -605,13 +609,16 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
"ui.panel.config.integrations.none_found_detail"
)}
</p>
<mwc-button
<ha-button
@click=${this._createFlow}
unelevated
.label=${this.hass.localize(
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.integrations.add_integration"
)}
></mwc-button>
</ha-button>
</div>
`
: // If we have a filter, never show a card
@ -634,13 +641,19 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
"ui.panel.config.integrations.no_integrations"
)}
</p>
<mwc-button
<ha-button
@click=${this._createFlow}
unelevated
.label=${this.hass.localize(
appearance="filled"
size="small"
>
<ha-svg-icon
slot="prefix"
.path=${mdiPlus}
></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.integrations.add_integration"
)}
></mwc-button>
</ha-button>
</div>
`
: ""}
@ -1042,7 +1055,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
direction: var(--direction);
height: 32px;
}
.active-filters mwc-button {
.active-filters ha-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;

18
src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiCloseCircle } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-spinner";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-button";
import "../../../../../components/ha-qr-code";
import { domainToName } from "../../../../../data/integration";
import type { MatterCommissioningParameters } from "../../../../../data/matter";
@ -90,11 +90,11 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this._copyCode}>
<ha-button slot="primaryAction" @click=${this._copyCode}>
${this.hass.localize(
"ui.panel.config.matter.open_commissioning_window.copy_code"
)}
</mwc-button>
</ha-button>
`
: this._status === "started"
? html`
@ -110,9 +110,9 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: this._status === "failed"
? html`
@ -129,9 +129,9 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: html`
<p>
@ -151,11 +151,11 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
"ui.panel.config.matter.open_commissioning_window.prevent_misuse_description"
)}
</p>
<mwc-button slot="primaryAction" @click=${this._start}>
<ha-button slot="primaryAction" @click=${this._start}>
${this.hass.localize(
"ui.panel.config.matter.open_commissioning_window.start_commissioning"
)}
</mwc-button>
</ha-button>
`}
</ha-dialog>
`;

18
src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-list";
import "../../../../../components/ha-button";
import "../../../../../components/ha-list-item";
import "../../../../../components/ha-spinner";
import { pingMatterNode } from "../../../../../data/matter";
@ -71,9 +71,9 @@ class DialogMatterPingNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: this._pingResultEntries
? html`
@ -98,9 +98,9 @@ class DialogMatterPingNode extends LitElement {
</ha-list-item>`
)}
</ha-list>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: this._status === "started"
? html`
@ -116,9 +116,9 @@ class DialogMatterPingNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: html`
<p>
@ -133,11 +133,11 @@ class DialogMatterPingNode extends LitElement {
)}
</em>
</p>
<mwc-button slot="primaryAction" @click=${this._startPing}>
<ha-button slot="primaryAction" @click=${this._startPing}>
${this.hass.localize(
"ui.panel.config.matter.ping_node.start_ping"
)}
</mwc-button>
</ha-button>
`}
</ha-dialog>
`;

18
src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-button";
import "../../../../../components/ha-spinner";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import { interviewMatterNode } from "../../../../../data/matter";
@ -53,11 +53,11 @@ class DialogMatterReinterviewNode extends LitElement {
)}
</em>
</p>
<mwc-button slot="primaryAction" @click=${this._startReinterview}>
<ha-button slot="primaryAction" @click=${this._startReinterview}>
${this.hass.localize(
"ui.panel.config.matter.reinterview_node.start_reinterview"
)}
</mwc-button>
</ha-button>
`
: this._status === "started"
? html`
@ -78,9 +78,9 @@ class DialogMatterReinterviewNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: this._status === "failed"
? html`
@ -97,9 +97,9 @@ class DialogMatterReinterviewNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: this._status === "finished"
? html`
@ -116,9 +116,9 @@ class DialogMatterReinterviewNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: nothing}
</ha-dialog>

35
src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
import "../../../../../components/ha-alert";
import "../../../../../components/ha-card";
import "../../../../../components/ha-button";
import {
acceptSharedMatterDevice,
canCommissionMatterExternal,
@ -40,9 +40,14 @@ export class MatterConfigDashboard extends LitElement {
<hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Matter">
${isComponentLoaded(this.hass, "otbr")
? html`
<a href="/config/thread" slot="toolbar-icon">
<mwc-button>Visit Thread Panel</mwc-button>
</a>
<ha-button
appearance="plain"
size="small"
href="/config/thread"
slot="toolbar-icon"
>
Visit Thread Panel</ha-button
>
`
: ""}
<div class="content">
@ -62,21 +67,23 @@ export class MatterConfigDashboard extends LitElement {
</div>
<div class="card-actions">
${canCommissionMatterExternal(this.hass)
? html`<mwc-button @click=${this._startMobileCommissioning}
>Commission device with mobile app</mwc-button
? html`<ha-button
appearance="plain"
@click=${this._startMobileCommissioning}
>Commission device with mobile app</ha-button
>`
: ""}
<mwc-button @click=${this._commission}
>Commission device</mwc-button
<ha-button appearance="plain" @click=${this._commission}
>Commission device</ha-button
>
<mwc-button @click=${this._acceptSharedDevice}
>Add shared device</mwc-button
<ha-button appearance="plain" @click=${this._acceptSharedDevice}
>Add shared device</ha-button
>
<mwc-button @click=${this._setWifi}
>Set WiFi Credentials</mwc-button
<ha-button appearance="plain" @click=${this._setWifi}
>Set WiFi Credentials</ha-button
>
<mwc-button @click=${this._setThread}
>Set Thread Credentials</mwc-button
<ha-button appearance="plain" @click=${this._setThread}
>Set Thread Credentials</ha-button
>
</div>
</ha-card>

10
src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -8,6 +7,7 @@ import "../../../../../components/ha-code-editor";
import "../../../../../components/ha-formfield";
import "../../../../../components/ha-list-item";
import "../../../../../components/ha-switch";
import "../../../../../components/ha-button";
import { getConfigEntries } from "../../../../../data/config_entries";
import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
import "../../../../../layouts/hass-subpage";
@ -71,10 +71,10 @@ export class MQTTConfigPanel extends LitElement {
.header=${this.hass.localize("ui.panel.config.mqtt.settings_title")}
>
<div class="card-actions">
<mwc-button @click=${this._openOptionFlow}
<ha-button appearance="plain" @click=${this._openOptionFlow}
>${this.hass.localize(
"ui.panel.config.mqtt.option_flow"
)}</mwc-button
)}</ha-button
>
</div>
</ha-card>
@ -138,10 +138,10 @@ export class MQTTConfigPanel extends LitElement {
></ha-code-editor>
</div>
<div class="card-actions">
<mwc-button @click=${this._publish}
<ha-button appearance="plain" @click=${this._publish}
>${this.hass.localize(
"ui.panel.config.mqtt.publish"
)}</mwc-button
)}</ha-button
>
</div>
</ha-card>

37
src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts
View File

@ -1,11 +1,10 @@
import "@material/mwc-button";
import type { ActionDetail } from "@material/mwc-list";
import {
mdiCellphoneKey,
mdiDeleteOutline,
mdiDevices,
mdiDotsVertical,
mdiInformationOutline,
mdiCellphoneKey,
} from "@mdi/js";
import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -14,9 +13,10 @@ import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
import { stringCompare } from "../../../../../common/string/compare";
import { extractSearchParam } from "../../../../../common/url/search-params";
import "../../../../../components/ha-button";
import "../../../../../components/ha-button-menu";
import "../../../../../components/ha-list-item";
import "../../../../../components/ha-card";
import "../../../../../components/ha-list-item";
import { getSignedPath } from "../../../../../data/auth";
import { getConfigEntryDiagnosticsDownloadUrl } from "../../../../../data/diagnostics";
import type { OTBRInfo, OTBRInfoDict } from "../../../../../data/otbr";
@ -47,8 +47,8 @@ import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";
import { brandsUrl } from "../../../../../util/brands-url";
import { fileDownload } from "../../../../../util/file_download";
import { documentationUrl } from "../../../../../util/documentation-url";
import { fileDownload } from "../../../../../util/file_download";
import { showThreadDatasetDialog } from "./show-dialog-thread-dataset";
export interface ThreadNetwork {
@ -117,16 +117,16 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
)}
</h3>
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
<a
<ha-button
appearance="plain"
size="small"
href=${documentationUrl(this.hass, `/integrations/thread`)}
target="_blank"
>
<mwc-button
>${this.hass.localize(
"ui.panel.config.thread.more_info"
)}</mwc-button
>
</a>
${this.hass.localize(
"ui.panel.config.thread.more_info"
)}</ha-button
>
</div>
</ha-card>`}
${networks.networks.length
@ -294,21 +294,23 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
? html`${this.hass.localize(
"ui.panel.config.thread.no_routers_otbr_network"
)}
<mwc-button
<ha-button
appearance="plain"
size="small"
.otbr=${otbrForNetwork}
@click=${this._resetBorderRouterEvent}
>${this.hass.localize(
"ui.panel.config.thread.reset_border_router"
)}</mwc-button
)}</ha-button
>`
: this.hass.localize("ui.panel.config.thread.no_border_routers")}
</div> `}
${network.dataset && !network.dataset.preferred
? html`<div class="card-actions">
<mwc-button
<ha-button
.datasetId=${network.dataset.dataset_id}
@click=${this._setPreferred}
>Make preferred network</mwc-button
>Make preferred network</ha-button
>
</div>`
: ""}
@ -316,10 +318,11 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
network.dataset?.preferred &&
network.routers?.length
? html`<div class="card-actions">
<mwc-button
<ha-button
size="small"
.networkDataset=${network.dataset}
@click=${this._sendCredentials}
>Send credentials to phone</mwc-button
>Send credentials to phone</ha-button
>
</div>`
: ""}

36
src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
@ -9,6 +8,7 @@ import "../../../../../components/ha-spinner";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-tooltip";
import "../../../../../components/ha-button";
import type {
AttributeConfigurationStatus,
Cluster,
@ -95,14 +95,14 @@ class DialogZHAReconfigureDevice extends LitElement {
)}
</em>
</p>
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._startReconfiguration}
>
${this.hass.localize(
"ui.dialogs.zha_reconfigure_device.start_reconfiguration"
)}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "started"
@ -124,10 +124,11 @@ class DialogZHAReconfigureDevice extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
<mwc-button slot="secondaryAction" @click=${this._toggleDetails}>
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._toggleDetails}
>
${this._showDetails
? this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_hide`
@ -135,7 +136,10 @@ class DialogZHAReconfigureDevice extends LitElement {
: this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_show`
)}
</mwc-button>
</ha-button>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</ha-button>
`
: ``}
${this._status === "failed"
@ -153,10 +157,10 @@ class DialogZHAReconfigureDevice extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
<mwc-button slot="secondaryAction" @click=${this._toggleDetails}>
</ha-button>
<ha-button slot="secondaryAction" @click=${this._toggleDetails}>
${this._showDetails
? this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_hide`
@ -164,7 +168,7 @@ class DialogZHAReconfigureDevice extends LitElement {
: this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_show`
)}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "finished"
@ -182,10 +186,10 @@ class DialogZHAReconfigureDevice extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
<mwc-button slot="secondaryAction" @click=${this._toggleDetails}>
</ha-button>
<ha-button slot="secondaryAction" @click=${this._toggleDetails}>
${this._showDetails
? this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_hide`
@ -193,7 +197,7 @@ class DialogZHAReconfigureDevice extends LitElement {
: this.hass.localize(
`ui.dialogs.zha_reconfigure_device.button_show`
)}
</mwc-button>
</ha-button>
`
: ``}
${this._stages

20
src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
View File

@ -1,8 +1,9 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../../components/ha-button";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-textarea";
import type { ZHADevice } from "../../../../../data/zha";
import { DEVICE_MESSAGE_TYPES, LOG_OUTPUT } from "../../../../../data/zha";
import "../../../../../layouts/hass-tabs-subpage";
@ -11,7 +12,6 @@ import type { HomeAssistant, Route } from "../../../../../types";
import { documentationUrl } from "../../../../../util/documentation-url";
import { zhaTabs } from "./zha-config-dashboard";
import "./zha-device-pairing-status-card";
import "../../../../../components/ha-textarea";
@customElement("zha-add-devices-page")
class ZHAAddDevicesPage extends LitElement {
@ -80,8 +80,12 @@ class ZHAAddDevicesPage extends LitElement {
.route=${this.route!}
.tabs=${zhaTabs}
>
<mwc-button slot="toolbar-icon" @click=${this._toggleLogs}
>${this._showLogs ? "Hide logs" : "Show logs"}</mwc-button
<ha-button
appearance="plain"
size="small"
slot="toolbar-icon"
@click=${this._toggleLogs}
>${this._showLogs ? "Hide logs" : "Show logs"}</ha-button
>
<div class="searching">
${this._active
@ -95,11 +99,15 @@ class ZHAAddDevicesPage extends LitElement {
`
: html`
<div>
<mwc-button @click=${this._subscribe} class="search-button">
<ha-button
appearance="plain"
@click=${this._subscribe}
class="search-button"
>
${this.hass!.localize(
"ui.panel.config.zha.add_device_page.search_again"
)}
</mwc-button>
</ha-button>
</div>
`}
</div>

39
src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiAlertCircle,
mdiCheckCircle,
@ -14,6 +13,7 @@ import { customElement, property, state } from "lit/decorators";
import "../../../../../components/buttons/ha-progress-button";
import "../../../../../components/ha-alert";
import "../../../../../components/ha-card";
import "../../../../../components/ha-button";
import "../../../../../components/ha-fab";
import "../../../../../components/ha-form/ha-form";
import "../../../../../components/ha-icon-button";
@ -149,24 +149,24 @@ class ZHAConfigDashboard extends LitElement {
</div>
${this.configEntryId
? html`<div class="card-actions">
<a
<ha-button
href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
appearance="plain"
size="small"
>
<mwc-button
>${this.hass.localize(
"ui.panel.config.devices.caption"
)}</mwc-button
>
</a>
<a
${this.hass.localize(
"ui.panel.config.devices.caption"
)}</ha-button
>
<ha-button
appearance="plain"
size="small"
href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
>
<mwc-button
>${this.hass.localize(
"ui.panel.config.entities.caption"
)}</mwc-button
>
</a>
${this.hass.localize(
"ui.panel.config.entities.caption"
)}</ha-button
>
</div>`
: ""}
</ha-card>
@ -246,6 +246,7 @@ class ZHAConfigDashboard extends LitElement {
: ""}
<div class="card-actions">
<ha-progress-button
appearance="plain"
@click=${this._createAndDownloadBackup}
.progress=${this._generatingBackup}
.disabled=${!this._networkSettings || this._generatingBackup}
@ -254,11 +255,11 @@ class ZHAConfigDashboard extends LitElement {
"ui.panel.config.zha.configuration_page.download_backup"
)}
</ha-progress-button>
<mwc-button class="warning" @click=${this._openOptionFlow}>
<ha-button variant="danger" @click=${this._openOptionFlow}>
${this.hass.localize(
"ui.panel.config.zha.configuration_page.migrate_radio"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
${this._configuration
@ -287,11 +288,11 @@ class ZHAConfigDashboard extends LitElement {
: ""}
<ha-card>
<div class="card-actions">
<mwc-button @click=${this._updateConfiguration}>
<ha-button @click=${this._updateConfiguration}>
${this.hass.localize(
"ui.panel.config.zha.configuration_page.update_button"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>

31
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiDelete } from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -6,11 +5,11 @@ import { customElement, property, query, state } from "lit/decorators";
import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
import { navigate } from "../../../../../common/navigate";
import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
import "../../../../../components/ha-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-list";
import "../../../../../components/ha-list-item";
import "../../../../../components/ha-spinner";
import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
import {
addMembersToGroup,
@ -164,22 +163,19 @@ export class ZHAGroupPage extends LitElement {
</zha-device-endpoint-data-table>
<div class="buttons">
<mwc-button
<ha-button
appearance="plain"
size="small"
variant="danger"
.disabled=${!this._selectedDevicesToRemove.length ||
this._processingRemove}
@click=${this._removeMembersFromGroup}
class="button"
.loading=${this._processingRemove}
>
${this._processingRemove
? html`<ha-spinner
.ariaLabel=${this.hass.localize(
"ui.panel.config.zha.groups.removing_members"
)}
></ha-spinner>`
: nothing}
${this.hass!.localize(
"ui.panel.config.zha.groups.remove_members"
)}</mwc-button
)}</ha-button
>
</div>
`
@ -200,21 +196,18 @@ export class ZHAGroupPage extends LitElement {
</zha-device-endpoint-data-table>
<div class="buttons">
<mwc-button
<ha-button
appearance="plain"
size="small"
.disabled=${!this._selectedDevicesToAdd.length ||
this._processingAdd}
@click=${this._addMembersToGroup}
class="button"
.loading=${this._processingAdd}
>
${this._processingAdd
? html`<ha-spinner
size="small"
aria-label="Saving"
></ha-spinner>`
: ""}
${this.hass!.localize(
"ui.panel.config.zha.groups.add_members"
)}</mwc-button
)}</ha-button
>
</div>
</ha-config-section>

15
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts
View File

@ -1,11 +1,11 @@
import { mdiCheckCircle, mdiDeleteForever, mdiRestore } from "@mdi/js";
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-button";
import { hardResetController } from "../../../../../data/zwave_js";
import { haStyleDialog } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";
@ -77,15 +77,16 @@ class DialogZWaveJSHardResetController extends LitElement {
</p>
</div>
${this._resetStatus === ResetStatus.NotStarted
? html`<mwc-button
? html`<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._hardResetController}
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.continue")}
</mwc-button>
<mwc-button slot="secondaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</mwc-button>`
</ha-button>
<ha-button slot="primaryAction" @click=${this._hardResetController}>
${this.hass.localize("ui.common.continue")}
</ha-button>`
: nothing}
</ha-dialog>`;
}

30
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiCheckCircle, mdiCloseCircle, mdiStethoscope } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
@ -6,10 +5,11 @@ import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-button";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import type {
ZWaveJSRebuildRoutesStatusMessage,
ZWaveJSNetwork,
ZWaveJSRebuildRoutesStatusMessage,
} from "../../../../../data/zwave_js";
import {
fetchZwaveNetworkStatus,
@ -91,14 +91,14 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
)}
</em>
</p>
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._startRebuildingRoutes}
>
${this.hass.localize(
"ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes"
)}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "started"
@ -122,17 +122,19 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
<mwc-linear-progress indeterminate> </mwc-linear-progress>
`
: ""}
<mwc-button
<ha-button
slot="secondaryAction"
appearance="plain"
@click=${this._stopRebuildingRoutes}
variant="danger"
>
${this.hass.localize(
"ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes"
)}
</mwc-button>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
</ha-button>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "failed"
@ -150,9 +152,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "finished"
@ -170,9 +172,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "cancelled"
@ -190,9 +192,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._progress_total && this._status !== "finished"

22
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle, mdiStethoscope } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-button";
import "../../../../../components/ha-spinner";
import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
import type { ZWaveJSNetwork } from "../../../../../data/zwave_js";
@ -83,14 +83,14 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
)}
</em>
</p>
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._startRebuildingRoutes}
>
${this.hass.localize(
"ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes"
)}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "started"
@ -110,9 +110,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "failed"
@ -147,9 +147,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "finished"
@ -172,9 +172,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "rebuilding-routes"
@ -192,9 +192,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
</ha-dialog>

18
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
@ -6,6 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-button";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import { reinterviewZwaveNode } from "../../../../../data/zwave_js";
import { haStyleDialog } from "../../../../../resources/styles";
@ -59,11 +59,11 @@ class DialogZWaveJSReinterviewNode extends LitElement {
)}
</em>
</p>
<mwc-button slot="primaryAction" @click=${this._startReinterview}>
<ha-button slot="primaryAction" @click=${this._startReinterview}>
${this.hass.localize(
"ui.panel.config.zwave_js.reinterview_node.start_reinterview"
)}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "started"
@ -85,9 +85,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "failed"
@ -105,9 +105,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "finished"
@ -125,9 +125,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._stages

18
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCloseCircle, mdiRobotDead } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
@ -6,6 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-button";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import type { ZWaveJSRemovedNode } from "../../../../../data/zwave_js";
import { removeFailedZwaveNode } from "../../../../../data/zwave_js";
@ -80,11 +80,15 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
)}
</div>
</div>
<mwc-button slot="primaryAction" @click=${this._startExclusion}>
<ha-button
variant="danger"
slot="primaryAction"
@click=${this._startExclusion}
>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_failed_node.remove_device"
)}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "started"
@ -121,9 +125,9 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
: ``}
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
${this._status === "finished"
@ -142,12 +146,12 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
</p>
</div>
</div>
<mwc-button
<ha-button
slot="primaryAction"
@click=${this.closeDialogFinished}
>
${this.hass.localize("ui.common.close")}
</mwc-button>
</ha-button>
`
: ``}
</ha-dialog>

10
src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiCheckCircle, mdiCloseCircle, mdiFileUpload } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
@ -9,6 +8,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import "../../../../../components/ha-file-upload";
import "../../../../../components/ha-button";
import "../../../../../components/ha-form/ha-form";
import type { HaFormSchema } from "../../../../../components/ha-form/types";
import "../../../../../components/ha-svg-icon";
@ -130,7 +130,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
.schema=${firmwareTargetSchema}
@value-changed=${this._firmwareTargetChanged}
></ha-form>`}
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._beginFirmwareUpdate}
.disabled=${this._firmwareFile === undefined}
@ -138,7 +138,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
${this.hass.localize(
"ui.panel.config.zwave_js.update_firmware.begin_update"
)}
</mwc-button>`;
</ha-button>`;
const status = this._updateFinishedMessage
? this._updateFinishedMessage.success
@ -153,11 +153,11 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
const abortFirmwareUpdateButton = this._nodeStatus.is_controller_node
? nothing
: html`
<mwc-button slot="primaryAction" @click=${this._abortFirmwareUpdate}>
<ha-button slot="primaryAction" @click=${this._abortFirmwareUpdate}>
${this.hass.localize(
"ui.panel.config.zwave_js.update_firmware.abort"
)}
</mwc-button>
</ha-button>
`;
return html`

21
src/panels/config/logs/ha-config-logs.ts
View File

@ -117,16 +117,14 @@ export class HaConfigLogs extends LitElement {
${isComponentLoaded(this.hass, "hassio")
? html`
<ha-button-menu slot="toolbar-icon">
<ha-button
slot="trigger"
.label=${this._logProviders.find(
(p) => p.key === this._selectedLogProvider
)!.name}
>
<ha-button slot="trigger" appearance="filled">
<ha-svg-icon
slot="trailingIcon"
slot="suffix"
.path=${mdiChevronDown}
></ha-svg-icon>
${this._logProviders.find(
(p) => p.key === this._selectedLogProvider
)!.name}
</ha-button>
${this._logProviders.map(
(provider) => html`
@ -255,15 +253,6 @@ export class HaConfigLogs extends LitElement {
.content {
direction: ltr;
}
mwc-button[slot="trigger"] {
--mdc-theme-primary: var(--primary-text-color);
--mdc-icon-size: 36px;
}
ha-button-menu > ha-button > ha-svg-icon {
margin-inline-end: 0px;
margin-inline-start: 8px;
}
`,
];
}

10
src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -9,6 +8,7 @@ import type { HaMdDialog } from "../../../../components/ha-md-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/ha-form/ha-form";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-button";
import type { SchemaUnion } from "../../../../components/ha-form/types";
import type { LovelaceResourcesMutableParams } from "../../../../data/lovelace/resource";
import type { HomeAssistant } from "../../../../types";
@ -127,10 +127,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
></ha-form>
</div>
<div slot="actions">
<mwc-button @click=${this.closeDialog}>
<ha-button appearance="plain" @click=${this.closeDialog}>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
@click=${this._updateResource}
.disabled=${urlInvalid || !this._data?.res_type || this._submitting}
>
@ -141,7 +141,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
: this.hass!.localize(
"ui.panel.config.lovelace.resources.detail.create"
)}
</mwc-button>
</ha-button>
</div>
</ha-md-dialog>
`;

6
src/panels/config/network/ha-config-network.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-checkbox";
import "../../../components/ha-network";
import "../../../components/ha-settings-row";
@ -55,11 +55,11 @@ class ConfigNetwork extends LitElement {
></ha-network>
</div>
<div class="card-actions">
<mwc-button @click=${this._save}>
<ha-button @click=${this._save}>
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.save_button"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
`;

38
src/panels/config/network/ha-config-url-form.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -171,8 +170,13 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
`
: nothing}
</div>
<ha-button .url=${externalUrl} @click=${this._copyURL}>
<ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
<ha-button
size="small"
appearance="plain"
.url=${externalUrl}
@click=${this._copyURL}
>
<ha-svg-icon slot="prefix" .path=${mdiContentCopy}></ha-svg-icon>
${this.hass.localize("ui.panel.config.common.copy_link")}
</ha-button>
</div>
@ -206,13 +210,16 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
${this.hass.localize(
"ui.panel.config.url.ha_cloud_remote_not_enabled"
)}
<a href="/config/cloud" slot="action"
><mwc-button
.label=${this.hass.localize(
"ui.panel.config.url.enable_remote"
)}
></mwc-button
></a>
<ha-button
size="small"
appearance="plain"
href="/config/cloud"
slot="action"
>
${this.hass.localize(
"ui.panel.config.url.enable_remote"
)}
</ha-button>
</ha-alert>
`}
`
@ -271,7 +278,12 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
`
: nothing}
</div>
<ha-button .url=${internalUrl} @click=${this._copyURL}>
<ha-button
size="small"
appearance="plain"
.url=${internalUrl}
@click=${this._copyURL}
>
<ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
${this.hass.localize("ui.panel.config.common.copy_link")}
</ha-button>
@ -302,11 +314,11 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
}
</div>
<div class="card-actions">
<mwc-button @click=${this._save} .disabled=${disabled}>
<ha-button @click=${this._save} .disabled=${disabled}>
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.save_button"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
`;

16
src/panels/config/network/supervisor-hostname.ts
View File

@ -1,11 +1,9 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-spinner";
import "../../../components/ha-button";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-button";
import "../../../components/ha-radio";
@ -66,11 +64,13 @@ export class HassioHostname extends LitElement {
</ha-textfield>
</div>
<div class="card-actions">
<mwc-button @click=${this._save} .disabled=${this._processing}>
${this._processing
? html`<ha-spinner size="small"></ha-spinner>`
: this.hass.localize("ui.common.save")}
</mwc-button>
<ha-button
.loading=${this._processing}
@click=${this._save}
.disabled=${this._processing}
>
${this.hass.localize("ui.common.save")}
</ha-button>
</div>
</ha-card>
`;

29
src/panels/config/network/supervisor-network.ts
View File

@ -17,6 +17,7 @@ import type { HaRadio } from "../../../components/ha-radio";
import "../../../components/ha-spinner";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
import "../../../components/sl-tab-group";
import { extractApiErrorMessage } from "../../../data/hassio/common";
import {
type AccessPoint,
@ -33,7 +34,6 @@ import {
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../types";
import "../../../components/sl-tab-group";
const IP_VERSIONS = ["ipv4", "ipv6"];
@ -141,6 +141,7 @@ export class HassioNetwork extends LitElement {
</p>`
: nothing}
<ha-button
appearance="plain"
class="scan"
@click=${this._scanForAP}
.disabled=${this._scanning}
@ -260,12 +261,14 @@ export class HassioNetwork extends LitElement {
: nothing}
</div>
<div class="card-actions">
<ha-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
${this._processing
? html`<ha-spinner size="small"></ha-spinner>`
: this.hass.localize("ui.common.save")}
<ha-button
.loading=${this._processing}
@click=${this._updateNetwork}
.disabled=${!this._dirty}
>
${this.hass.localize("ui.common.save")}
</ha-button>
<ha-button @click=${this._clear}>
<ha-button appearance="plain" @click=${this._clear}>
${this.hass.localize("ui.panel.config.network.supervisor.reset")}
</ha-button>
</div>`;
@ -446,11 +449,13 @@ export class HassioNetwork extends LitElement {
@click=${this._addAddress}
.version=${version}
class="add-address"
appearance="filled"
size="small"
>
${this.hass.localize(
"ui.panel.config.network.supervisor.add_address"
)}
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
</ha-button>
`
: nothing}
@ -500,13 +505,15 @@ export class HassioNetwork extends LitElement {
@closed=${this._handleDNSMenuClosed}
.version=${version}
class="add-nameserver"
appearance="filled"
size="small"
>
<ha-button slot="trigger">
<ha-button appearance="filled" size="small" slot="trigger">
${this.hass.localize(
"ui.panel.config.network.supervisor.add_dns_server"
)}
<ha-svg-icon
slot="icon"
slot="prefix"
.path=${this._dnsMenuOpen ? mdiMenuDown : mdiPlus}
></ha-svg-icon>
</ha-button>
@ -780,10 +787,6 @@ export class HassioNetwork extends LitElement {
padding: 20px 24px;
}
ha-button.warning {
--mdc-theme-primary: var(--error-color);
}
ha-button.scan {
margin-left: 8px;
margin-inline-start: 8px;

57
src/panels/config/repairs/dialog-system-information.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -9,10 +8,11 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { copyToClipboard } from "../../../common/util/copy-clipboard";
import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-spinner";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-metric";
import "../../../components/ha-spinner";
import type { HassioStats } from "../../../data/hassio/common";
import { fetchHassioStats } from "../../../data/hassio/common";
import type { HassioResolution } from "../../../data/hassio/resolution";
@ -146,27 +146,29 @@ class DialogSystemInformation extends LitElement {
? html`${this._resolutionInfo.unhealthy.length
? html`<ha-alert alert-type="error">
${this.hass.localize("ui.dialogs.unhealthy.title")}
<mwc-button
<ha-button
appearance="plain"
size="small"
variant="danger"
slot="action"
.label=${this.hass.localize(
"ui.panel.config.common.learn_more"
)}
@click=${this._unhealthyDialog}
>
</mwc-button
></ha-alert>`
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button></ha-alert
>`
: ""}
${this._resolutionInfo.unsupported.length
? html`<ha-alert alert-type="warning">
${this.hass.localize("ui.dialogs.unsupported.title")}
<mwc-button
<ha-button
appearance="plain"
size="small"
variant="warning"
slot="action"
.label=${this.hass.localize(
"ui.panel.config.common.learn_more"
)}
@click=${this._unsupportedDialog}
>
</mwc-button>
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button>
</ha-alert>`
: ""} `
: ""}
@ -222,11 +224,9 @@ class DialogSystemInformation extends LitElement {
</div>
`}
</div>
<mwc-button
slot="primaryAction"
.label=${this.hass.localize("ui.panel.config.repairs.copy")}
@click=${this._copyInfo}
></mwc-button>
<ha-button slot="primaryAction" @click=${this._copyInfo}>
${this.hass.localize("ui.panel.config.repairs.copy")}
</ha-button>
</ha-dialog>
`;
}
@ -361,13 +361,16 @@ class DialogSystemInformation extends LitElement {
${!domainInfo.manage_url
? ""
: html`
<a class="manage" href=${domainInfo.manage_url}>
<mwc-button>
${this.hass.localize(
"ui.panel.config.info.system_health.manage"
)}
</mwc-button>
</a>
<ha-button
appearance="plain"
size="small"
class="manage"
href=${domainInfo.manage_url}
>
${this.hass.localize(
"ui.panel.config.info.system_health.manage"
)}
</ha-button>
`}
</div>
`);
@ -481,10 +484,6 @@ class DialogSystemInformation extends LitElement {
.error {
color: var(--error-color);
}
a.manage {
text-decoration: none;
}
`,
];
}

28
src/panels/config/script/ha-script-editor.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit/context";
import "@material/mwc-button";
import {
mdiCog,
mdiContentDuplicate,
@ -27,6 +26,7 @@ import { slugify } from "../../../common/string/slugify";
import { computeRTL } from "../../../common/util/compute_rtl";
import { promiseTimeout } from "../../../common/util/promise-timeout";
import { afterNextRender } from "../../../common/util/render-status";
import "../../../components/ha-button";
import "../../../components/ha-button-menu";
import "../../../components/ha-fab";
@ -45,12 +45,12 @@ import {
} from "../../../data/entity_registry";
import type { BlueprintScriptConfig, ScriptConfig } from "../../../data/script";
import {
normalizeScriptConfig,
deleteScript,
fetchScriptFileConfig,
getScriptEditorInitData,
getScriptStateConfig,
hasScriptFields,
normalizeScriptConfig,
showScriptEditor,
triggerScript,
} from "../../../data/script";
@ -172,11 +172,15 @@ export class HaScriptEditor extends SubscribeMixin(
>
${this.scriptId && !this.narrow
? html`
<mwc-button @click=${this._showTrace} slot="toolbar-icon">
<ha-button
appearance="plain"
@click=${this._showTrace}
slot="toolbar-icon"
>
${this.hass.localize(
"ui.panel.config.script.editor.show_trace"
)}
</mwc-button>
</ha-button>
`
: ""}
<ha-button-menu slot="toolbar-icon">
@ -383,11 +387,11 @@ export class HaScriptEditor extends SubscribeMixin(
"ui.panel.config.script.editor.confirm_take_control"
)}
<div slot="action" style="display: flex;">
<mwc-button @click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</mwc-button
<ha-button appearance="plain" @click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</ha-button
>
<mwc-button @click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</mwc-button
<ha-button appearance="plain" @click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</ha-button
>
</div>
</ha-alert>`
@ -396,11 +400,15 @@ export class HaScriptEditor extends SubscribeMixin(
>${this.hass.localize(
"ui.panel.config.script.editor.read_only"
)}
<mwc-button slot="action" @click=${this._duplicate}>
<ha-button
appearance="plain"
slot="action"
@click=${this._duplicate}
>
${this.hass.localize(
"ui.panel.config.script.editor.migrate"
)}
</mwc-button>
</ha-button>
</ha-alert>`
: nothing}
${this._mode === "gui"

14
src/panels/config/script/ha-script-trace.ts
View File

@ -16,6 +16,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-button-menu";
import "../../../components/ha-button";
import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/trace/ha-trace-blueprint-config";
@ -101,17 +102,16 @@ export class HaScriptTrace extends LitElement {
<hass-subpage .hass=${this.hass} .narrow=${this.narrow} .header=${title}>
${!this.narrow && this.scriptId
? html`
<a
<ha-button
class="trace-link"
href="/config/script/edit/${this.scriptId}"
slot="toolbar-icon"
appearance="plain"
>
<mwc-button>
${this.hass.localize(
"ui.panel.config.script.trace.edit_script"
)}
</mwc-button>
</a>
${this.hass.localize(
"ui.panel.config.script.trace.edit_script"
)}
</ha-button>
`
: ""}

11
src/panels/config/storage/dialog-mount-view.ts
View File

@ -271,19 +271,24 @@ class ViewMountDialog extends LitElement {
${this._existing
? html`<ha-button
@click=${this._deleteMount}
destructive
variant="danger"
slot="secondaryAction"
appearance="plain"
>
${this.hass.localize("ui.common.delete")}
</ha-button>`
: nothing}
<div slot="primaryAction">
<ha-button @click=${this.closeDialog} dialogInitialFocus>
<ha-button
appearance="plain"
@click=${this.closeDialog}
dialogInitialFocus
>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-progress-button
.progress=${this._waiting}
.progress=${!!this._waiting}
@click=${this._connectMount}
>
${this._existing

12
src/panels/config/storage/dialog-move-datadisk.ts
View File

@ -5,6 +5,7 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import "../../../components/ha-dialog";
import "../../../components/ha-button";
import "../../../components/ha-list-item";
import "../../../components/ha-select";
import "../../../components/ha-spinner";
@ -152,21 +153,22 @@ class MoveDatadiskDialog extends LitElement {
)}
</ha-select>
<mwc-button
slot="secondaryAction"
<ha-button
slot="primaryAction"
appearance="plain"
@click=${this.closeDialog}
dialogInitialFocus
>
${this.hass.localize("ui.panel.config.storage.datadisk.cancel")}
</mwc-button>
</ha-button>
<mwc-button
<ha-button
.disabled=${!this._selectedDevice}
slot="primaryAction"
@click=${this._moveDatadisk}
>
${this.hass.localize("ui.panel.config.storage.datadisk.move")}
</mwc-button>
</ha-button>
`}
</ha-dialog>
`;

21
src/panels/config/storage/ha-config-section-storage.ts
View File

@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { navigate } from "../../../common/navigate";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-button-menu";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
@ -123,11 +124,14 @@ class HaConfigSectionStorage extends LitElement {
</div>
${this._hostInfo
? html`<div class="card-actions">
<mwc-button @click=${this._moveDatadisk}>
<ha-button
appearance="plain"
@click=${this._moveDatadisk}
>
${this.hass.localize(
"ui.panel.config.storage.datadisk.title"
)}
</mwc-button>
</ha-button>
</div>`
: nothing}
</ha-card>
@ -153,14 +157,15 @@ class HaConfigSectionStorage extends LitElement {
"ui.panel.config.storage.network_mounts.not_supported.os",
{ version: "10.2" }
)}
<mwc-button
<ha-button
appearance="plain"
slot="action"
@click=${this._navigateToUpdates}
>
${this.hass.localize(
"ui.panel.config.storage.network_mounts.not_supported.navigate_to_updates"
)}
</mwc-button>`
</ha-button>`
: this.hass.localize(
"ui.panel.config.storage.network_mounts.not_supported.supervised"
)}
@ -218,11 +223,11 @@ class HaConfigSectionStorage extends LitElement {
</div>`}
${this._mountsInfo !== null
? html`<div class="card-actions">
<mwc-button @click=${this._addMount}>
<ha-button appearance="plain" @click=${this._addMount}>
${this.hass.localize(
"ui.panel.config.storage.network_mounts.add_title"
)}
</mwc-button>
</ha-button>
</div>`
: nothing}
</ha-card>
@ -304,6 +309,10 @@ class HaConfigSectionStorage extends LitElement {
max-width: 1040px;
margin: 0 auto;
}
.card-actions {
display: flex;
justify-content: flex-end;
}
ha-card {
max-width: 600px;
margin: 0 auto 12px;

18
src/panels/config/users/dialog-admin-change-password.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -8,6 +7,7 @@ import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-form/ha-form";
import type { SchemaUnion } from "../../../components/ha-form/types";
import "../../../components/ha-textfield";
import "../../../components/ha-button";
import { adminChangePassword } from "../../../data/auth";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@ -121,9 +121,9 @@ class DialogAdminChangePassword extends LitElement {
"ui.panel.config.users.change_password.password_changed"
)}
</p>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.ok")}
</mwc-button>
</ha-button>
`
: html`
<ha-form
@ -136,10 +136,14 @@ class DialogAdminChangePassword extends LitElement {
@value-changed=${this._valueChanged}
.disabled=${this._submitting}
></ha-form>
<mwc-button slot="secondaryAction" @click=${this.closeDialog}>
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._changePassword}
.disabled=${this._submitting || !canSubmit}
@ -147,7 +151,7 @@ class DialogAdminChangePassword extends LitElement {
${this.hass.localize(
"ui.panel.config.users.change_password.change"
)}
</mwc-button>
</ha-button>
`}
</ha-dialog>
`;

33
src/panels/config/voice-assistants/cloud-alexa-pref.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-settings-row";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
@ -180,24 +180,23 @@ export class CloudAlexaPref extends LitElement {
</div>
${alexa_enabled
? html`<div class="card-actions">
<a
<ha-button
appearance="plain"
href="/config/voice-assistants/expose?assistants=cloud.alexa&historyBack"
>
<mwc-button>
${manualConfig
? this.hass!.localize(
"ui.panel.config.cloud.account.alexa.show_entities"
)
: this.hass.localize(
"ui.panel.config.cloud.account.alexa.exposed_entities",
{
number: this.exposedEntities
? this._exposedEntitiesCount(this.exposedEntities)
: 0,
}
)}
</mwc-button>
</a>
${manualConfig
? this.hass!.localize(
"ui.panel.config.cloud.account.alexa.show_entities"
)
: this.hass.localize(
"ui.panel.config.cloud.account.alexa.exposed_entities",
{
number: this.exposedEntities
? this._exposedEntitiesCount(this.exposedEntities)
: 0,
}
)}
</ha-button>
</div>`
: nothing}
</ha-card>

34
src/panels/config/voice-assistants/cloud-google-pref.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
import "../../../components/ha-alert";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-settings-row";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
@ -237,24 +237,24 @@ export class CloudGooglePref extends LitElement {
</div>
${google_enabled
? html`<div class="card-actions">
<a
<ha-button
appearance="plain"
size="small"
href="/config/voice-assistants/expose?assistants=cloud.google_assistant&historyBack"
>
<mwc-button>
${manualConfig
? this.hass!.localize(
"ui.panel.config.cloud.account.google.show_entities"
)
: this.hass.localize(
"ui.panel.config.cloud.account.google.exposed_entities",
{
number: this.exposedEntities
? this._exposedEntitiesCount(this.exposedEntities)
: 0,
}
)}
</mwc-button>
</a>
${manualConfig
? this.hass!.localize(
"ui.panel.config.cloud.account.google.show_entities"
)
: this.hass.localize(
"ui.panel.config.cloud.account.google.exposed_entities",
{
number: this.exposedEntities
? this._exposedEntitiesCount(this.exposedEntities)
: 0,
}
)}
</ha-button>
</div>`
: nothing}
</ha-card>

17
src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
View File

@ -27,6 +27,7 @@ import type {
SortingChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-fab";
import "../../../components/ha-button";
import "../../../components/ha-tooltip";
import type { AlexaEntity } from "../../../data/alexa";
import { fetchCloudAlexaEntities } from "../../../data/alexa";
@ -588,15 +589,21 @@ export class VoiceAssistantsExpose extends LitElement {
<div class="header-btns" slot="selection-bar">
${!this.narrow
? html`
<mwc-button @click=${this._exposeSelected}
<ha-button
appearance="plain"
size="small"
@click=${this._exposeSelected}
>${this.hass.localize(
"ui.panel.config.voice_assistants.expose.expose"
)}</mwc-button
)}</ha-button
>
<mwc-button @click=${this._unexposeSelected}
<ha-button
appearance="plain"
size="small"
@click=${this._unexposeSelected}
>${this.hass.localize(
"ui.panel.config.voice_assistants.expose.unexpose"
)}</mwc-button
)}</ha-button
>
`
: html`
@ -831,7 +838,7 @@ export class VoiceAssistantsExpose extends LitElement {
.header-btns {
display: flex;
}
.header-btns > mwc-button,
.header-btns > ha-button,
.header-btns > ha-icon-button {
margin: 8px;
}

8
src/panels/developer-tools/statistics/developer-tools-statistics.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiArrowDown,
mdiArrowUp,
@ -22,6 +21,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
import type { LocalizeFunc } from "../../../common/translations/localize";
import "../../../components/chips/ha-assist-chip";
import "../../../components/ha-md-divider";
import "../../../components/ha-button";
import "../../../components/data-table/ha-data-table";
import type {
DataTableColumnContainer,
@ -203,9 +203,11 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
),
template: (statistic) =>
html`${statistic.issues
? html`<mwc-button
? html`<ha-button
@click=${this._fixIssue}
.data=${statistic.issues}
appearance="plain"
size="small"
>
${localize(
statistic.issues.some((issue) =>
@ -214,7 +216,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
? "ui.panel.developer-tools.tabs.statistics.fix_issue.fix"
: "ui.panel.developer-tools.tabs.statistics.fix_issue.info"
)}
</mwc-button>`
</ha-button>`
: "—"}`,
minWidth: "113px",
maxWidth: "113px",

44
src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { formatISO9075 } from "date-fns";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -8,6 +7,7 @@ import { formatDateTime } from "../../../common/datetime/format_date_time";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-spinner";
import "../../../components/ha-dialog";
import "../../../components/ha-button";
import "../../../components/ha-form/ha-form";
import "../../../components/ha-icon-next";
import "../../../components/ha-list-item";
@ -193,18 +193,18 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
@value-changed=${this._dateTimeSelectorChanged}
></ha-selector-datetime>
<div class="stat-list">${stats}</div>
<mwc-button
<ha-button
appearance="plain"
slot="secondaryAction"
.label=${this.hass.localize(
@click=${this._fetchOutliers}
>
${this.hass.localize(
"ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.outliers"
)}
@click=${this._fetchOutliers}
></mwc-button>
<mwc-button
slot="primaryAction"
dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")}
></mwc-button>
</ha-button>
<ha-button slot="primaryAction" dialogAction="cancel">
${this.hass.localize("ui.common.close")}
</ha-button>
`;
}
@ -283,20 +283,22 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
@value-changed=${this._amountChanged}
></ha-selector-number>
<mwc-button
slot="primaryAction"
.label=${this.hass.localize(
"ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust"
)}
.disabled=${this._busy}
@click=${this._fixIssue}
></mwc-button>
<mwc-button
<ha-button
slot="secondaryAction"
.label=${this.hass.localize("ui.common.back")}
.disabled=${this._busy}
@click=${this._clearChosenStatistic}
></mwc-button>
>
${this.hass.localize("ui.common.back")}</ha-button
>
<ha-button
slot="primaryAction"
.disabled=${this._busy}
@click=${this._fixIssue}
>
${this.hass.localize(
"ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust"
)}</ha-button
>
`;
}

14
src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import {
mdiArrowDown,
mdiArrowLeft,
@ -18,6 +17,7 @@ import { css, html, LitElement, svg, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import "../../../../components/ha-card";
import "../../../../components/ha-button";
import "../../../../components/ha-svg-icon";
import type { EnergyData } from "../../../../data/energy";
import {
@ -756,13 +756,11 @@ class HuiEnergyDistrubutionCard
${this._config.link_dashboard
? html`
<div class="card-actions">
<a href="/energy"
><mwc-button>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard"
)}
</mwc-button></a
>
<ha-button appearance="plain" size="small" href="/energy">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard"
)}
</ha-button>
</div>
`
: ""}

32
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -10,6 +10,7 @@ import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/chips/ha-assist-chip";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-state-icon";
import "../../../components/ha-textfield";
import type { HaTextField } from "../../../components/ha-textfield";
@ -258,13 +259,15 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
: (["disarm"] as const)
).map(
(stateAction) => html`
<mwc-button
<ha-button
.action=${stateAction}
@click=${this._handleActionClick}
outlined
appearance="filled"
size="small"
variant=${stateAction === "disarm" ? "danger" : "primary"}
>
${this._actionDisplay(stateAction)}
</mwc-button>
</ha-button>
`
)}
</div>
@ -286,12 +289,12 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
<div id="keypad">
${BUTTONS.map((value) =>
value === ""
? html` <mwc-button disabled></mwc-button> `
? html`<ha-button disabled></ha-button> `
: html`
<mwc-button
<ha-button
.value=${value}
@click=${this._handlePadClick}
outlined
appearance="filled"
class=${classMap({
numberkey: value !== "clear",
})}
@ -301,7 +304,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
`ui.card.alarm_control_panel.clear_code`
)
: value}
</mwc-button>
</ha-button>
`
)}
</div>
@ -418,7 +421,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
direction: ltr;
}
#keypad mwc-button {
#keypad ha-button {
padding: 8px;
width: 30%;
box-sizing: border-box;
@ -431,19 +434,12 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
justify-content: center;
}
.actions mwc-button {
.actions ha-button {
margin: 0 4px 4px;
}
mwc-button#disarm {
color: var(--error-color);
}
mwc-button.numberkey {
--mdc-typography-button-font-size: var(
--keypad-font-size,
var(--ha-font-size-s)
);
ha-button.numberkey {
--ha-button-font-size: var(--keypad-font-size, var(--ha-font-size-s));
}
`;
}

16
src/panels/lovelace/cards/hui-empty-state-card.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-button/mwc-button";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-card";
import "../../../components/ha-button";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCard } from "../types";
import type { EmptyStateCardConfig } from "./types";
@ -34,13 +34,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
)}
</div>
<div class="card-actions">
<a href="/config/integrations/dashboard">
<mwc-button>
${this.hass.localize(
"ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
)}
</mwc-button>
</a>
<ha-button appearance="plain" href="/config/integrations/dashboard">
${this.hass.localize(
"ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
)}
</ha-button>
</div>
</ha-card>
`;
@ -56,7 +54,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
text-decoration: none;
}
mwc-button {
ha-button {
margin-left: -8px;
margin-inline-start: -8px;
margin-inline-end: initial;

6
src/panels/lovelace/components/hui-card-options.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import {
mdiContentCopy,
@ -17,6 +16,7 @@ import { storage } from "../../../common/decorators/storage";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@ -95,10 +95,10 @@ export class HuiCardOptions extends LitElement {
<div class="card"><slot></slot></div>
<ha-card>
<div class="card-actions">
<mwc-button @click=${this._editCard}
<ha-button appearance="plain" @click=${this._editCard}
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.edit"
)}</mwc-button
)}</ha-button
>
<div class="right">
<slot name="buttons"></slot>

9
src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts
View File

@ -6,6 +6,7 @@ import { cache } from "lit/directives/cache";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-dialog";
import "../../../../components/ha-button";
import "../../../../components/ha-dialog-header";
import "../../../../components/sl-tab-group";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@ -139,14 +140,14 @@ export class HuiCreateDialogBadge
)}
<div slot="primaryAction">
<mwc-button @click=${this._cancel}>
<ha-button appearance="plain" @click=${this._cancel}>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${this._selectedEntities.length
? html`
<mwc-button @click=${this._suggestBadges}>
<ha-button @click=${this._suggestBadges}>
${this.hass!.localize("ui.common.continue")}
</mwc-button>
</ha-button>
`
: ""}
</div>

52
src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts
View File

@ -6,10 +6,11 @@ import { customElement, property, query, state } from "lit/decorators";
import type { HASSDomEvent } from "../../../../common/dom/fire_event";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-spinner";
import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-spinner";
import "../../../../components/ha-button";
import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
import { ensureBadgeConfig } from "../../../../data/lovelace/config/badge";
import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@ -255,7 +256,8 @@ export class HuiDialogEditBadge
</div>
${this._badgeConfig !== undefined
? html`
<mwc-button
<ha-button
appearance="plain"
slot="secondaryAction"
@click=${this._toggleMode}
.disabled=${!this._guiModeAvailable}
@ -266,31 +268,29 @@ export class HuiDialogEditBadge
? "ui.panel.lovelace.editor.edit_badge.show_code_editor"
: "ui.panel.lovelace.editor.edit_badge.show_visual_editor"
)}
</mwc-button>
</ha-button>
`
: ""}
<div slot="primaryAction" @click=${this._save}>
<mwc-button @click=${this._cancel} dialogInitialFocus>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
${this._badgeConfig !== undefined && this._dirty
? html`
<mwc-button
?disabled=${!this._canSave || this._saving}
@click=${this._save}
>
${this._saving
? html`
<ha-spinner
aria-label="Saving"
size="small"
></ha-spinner>
`
: this.hass!.localize("ui.common.save")}
</mwc-button>
`
: ``}
</div>
: nothing}
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._cancel}
dialogInitialFocus
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
${this._badgeConfig !== undefined && this._dirty
? html`
<ha-button
slot="primaryAction"
?disabled=${!this._canSave || this._saving}
@click=${this._save}
.loading=${this._saving}
>
${this.hass!.localize("ui.common.save")}
</ha-button>
`
: nothing}
</ha-dialog>
`;
}

25
src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts
View File

@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-yaml-editor";
import "../../../../components/ha-spinner";
import "../../../../components/ha-button";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
@ -92,30 +92,27 @@ export class HuiDialogSuggestBadge extends LitElement {
`
: nothing}
</div>
<mwc-button
slot="secondaryAction"
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
dialogInitialFocus
>
${this._params.yaml
? this.hass!.localize("ui.common.close")
: this.hass!.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${!this._params.yaml
? html`
<mwc-button
<ha-button
slot="primaryAction"
.disabled=${this._saving}
@click=${this._save}
.loading=${this._saving}
>
${this._saving
? html`
<ha-spinner aria-label="Saving" size="small"></ha-spinner>
`
: this.hass!.localize(
"ui.panel.lovelace.editor.suggest_badge.add"
)}
</mwc-button>
${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_badge.add"
)}
</ha-button>
`
: nothing}
</ha-dialog>

31
src/panels/lovelace/editor/hui-dialog-save-config.ts
View File

@ -1,10 +1,9 @@
import "@material/mwc-button";
import { mdiClose, mdiHelpCircle } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-spinner";
import "../../../components/ha-button";
import "../../../components/ha-dialog";
import "../../../components/ha-dialog-header";
import "../../../components/ha-formfield";
@ -133,30 +132,28 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
</div>
${this._params.mode === "storage"
? html`
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
<ha-button
appearance="plain"
slot="primaryAction"
?disabled=${this._saving}
@click=${this._saveConfig}
@click=${this.closeDialog}
>
${this.hass!.localize("ui.common.cancel")}
</ha-button>
<ha-button
slot="primaryAction"
@click=${this._saveConfig}
.loading=${this._saving}
>
${this._saving
? html`<ha-spinner
size="small"
aria-label="Saving"
></ha-spinner>`
: ""}
${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.save"
)}
</mwc-button>
</ha-button>
`
: html`
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
<ha-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.close"
)}</mwc-button
)}</ha-button
>
`}
</ha-dialog>

14
src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
View File

@ -1,11 +1,10 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/ha-alert";
import "../../../../components/ha-button";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-icon";
import "../../../../components/ha-list";
@ -140,20 +139,21 @@ export class HuiDialogSelectView extends LitElement {
</ha-list>
`
: ""}
<mwc-button
slot="secondaryAction"
<ha-button
slot="primaryAction"
@click=${this.closeDialog}
dialogInitialFocus
appearance="plain"
>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
slot="primaryAction"
.disabled=${!this._config || (this._config.views || []).length < 1}
@click=${this._selectView}
>
${this._params.actionLabel || this.hass!.localize("ui.common.move")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

10
src/panels/lovelace/entity-rows/hui-button-entity-row.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -6,6 +5,7 @@ import { UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import "../components/hui-generic-entity-row";
import "../../../components/ha-button";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import type { ActionRowConfig, LovelaceRow } from "./types";
import { confirmAction } from "../common/confirm-action";
@ -44,18 +44,20 @@ class HuiButtonEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button
<ha-button
appearance="plain"
size="small"
@click=${this._pressButton}
.disabled=${stateObj.state === UNAVAILABLE}
>
${this.hass.localize("ui.card.button.press")}
</mwc-button>
</ha-button>
</hui-generic-entity-row>
`;
}
static styles = css`
mwc-button:last-child {
ha-button:last-child {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;

12
src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts
View File

@ -1,14 +1,14 @@
import "@material/mwc-button/mwc-button";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import { confirmAction } from "../common/confirm-action";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import "../../../components/ha-button";
import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import type { ActionRowConfig, LovelaceRow } from "./types";
import { confirmAction } from "../common/confirm-action";
@customElement("hui-input-button-entity-row")
class HuiInputButtonEntityRow extends LitElement implements LovelaceRow {
@ -44,18 +44,20 @@ class HuiInputButtonEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button
<ha-button
appearance="plain"
size="small"
@click=${this._pressButton}
.disabled=${stateObj.state === UNAVAILABLE}
>
${this.hass.localize("ui.card.button.press")}
</mwc-button>
</ha-button>
</hui-generic-entity-row>
`;
}
static styles = css`
mwc-button:last-child {
ha-button:last-child {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;

6
src/panels/lovelace/ha-panel-lovelace.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import deepFreeze from "deep-freeze";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
@ -35,6 +34,7 @@ import { checkLovelaceConfig } from "./common/check-lovelace-config";
import { loadLovelaceResources } from "./common/load-resources";
import { showSaveDialog } from "./editor/show-save-config-dialog";
import "./hui-root";
import "../../components/ha-button";
import { generateLovelaceDashboardStrategy } from "./strategies/get-strategy";
import type { Lovelace } from "./types";
@ -147,9 +147,9 @@ export class LovelacePanel extends LitElement {
title=${domainToName(this.hass!.localize, "lovelace")}
.error=${this._errorMsg}
>
<mwc-button raised @click=${this._forceFetchConfig}>
<ha-button @click=${this._forceFetchConfig}>
${this.hass!.localize("ui.panel.lovelace.reload_lovelace")}
</mwc-button>
</ha-button>
</hass-error-screen>
`;
}

12
src/panels/lovelace/hui-editor.ts
View File

@ -1,5 +1,4 @@
import { undoDepth } from "@codemirror/commands";
import "@material/mwc-button";
import { mdiClose } from "@mdi/js";
import { dump, load } from "js-yaml";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@ -11,6 +10,7 @@ import { deepEqual } from "../../common/util/deep-equal";
import "../../components/ha-code-editor";
import type { HaCodeEditor } from "../../components/ha-code-editor";
import "../../components/ha-icon-button";
import "../../components/ha-button";
import {
showAlertDialog,
showConfirmationDialog,
@ -71,14 +71,13 @@ class LovelaceFullConfigEditor extends LitElement {
)
: this.hass!.localize("ui.panel.lovelace.editor.raw_editor.saved")}
</div>
<mwc-button
raised
<ha-button
slot="actionItems"
@click=${this._handleSave}
.disabled=${!this._changed}
>${this.hass!.localize(
"ui.panel.lovelace.editor.raw_editor.save"
)}</mwc-button
)}</ha-button
>
<div class="content">
<ha-code-editor
@ -142,11 +141,6 @@ class LovelaceFullConfigEditor extends LitElement {
--app-header-text-color: var(--app-header-edit-text-color, #fff);
}
mwc-button[disabled] {
background-color: var(--mdc-theme-on-primary);
border-radius: 4px;
}
.content {
height: calc(100vh - var(--header-height));
}

31
src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-button";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../components/ha-spinner";
import "../../components/ha-button";
import "../../components/ha-dialog";
import "../../components/ha-form/ha-form";
import "../../components/ha-markdown";
import "../../components/ha-spinner";
import { autocompleteLoginFields } from "../../data/auth";
import type {
DataEntryFlowStep,
@ -127,23 +127,30 @@ class HaMfaModuleSetupFlow extends LitElement {
></ha-form>`
: ""}`}
</div>
${["abort", "create_entry"].includes(this._step?.type || "")
? html`<mwc-button slot="primaryAction" @click=${this.closeDialog}
>${this.hass.localize(
"ui.panel.profile.mfa_setup.close"
)}</mwc-button
>`
: ""}
<ha-button
slot="primaryAction"
@click=${this.closeDialog}
appearance=${["abort", "create_entry"].includes(
this._step?.type || ""
)
? "accent"
: "plain"}
>${this.hass.localize(
["abort", "create_entry"].includes(this._step?.type || "")
? "ui.panel.profile.mfa_setup.close"
: "ui.common.cancel"
)}</ha-button
>
${this._step?.type === "form"
? html`<mwc-button
? html`<ha-button
slot="primaryAction"
.disabled=${this._loading}
@click=${this._submitStep}
>${this.hass.localize(
"ui.panel.profile.mfa_setup.submit"
)}</mwc-button
)}</ha-button
>`
: ""}
: nothing}
</ha-dialog>
`;
}

25
src/panels/profile/ha-change-password-card.ts
View File

@ -1,8 +1,8 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../components/ha-card";
import "../../components/ha-button";
import "../../components/ha-spinner";
import "../../components/ha-textfield";
import "../../components/ha-password-field";
@ -89,17 +89,14 @@ class HaChangePasswordCard extends LitElement {
</div>
<div class="card-actions">
${this._loading
? html`<div>
<ha-spinner></ha-spinner>
</div>`
: html`<mwc-button
@click=${this._changePassword}
.disabled=${!this._passwordConfirm}
>${this.hass.localize(
"ui.panel.profile.change_password.submit"
)}</mwc-button
>`}
<ha-button
.loading=${this._loading}
@click=${this._changePassword}
.disabled=${!this._passwordConfirm}
>${this.hass.localize(
"ui.panel.profile.change_password.submit"
)}</ha-button
>
</div>
</ha-card>
`;
@ -205,6 +202,10 @@ class HaChangePasswordCard extends LitElement {
#currentPassword {
margin-top: 0;
}
.card-actions {
display: flex;
justify-content: flex-end;
}
`,
];
}

15
src/panels/profile/ha-long-lived-access-tokens-card.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
@ -6,9 +5,10 @@ import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import { relativeTime } from "../../common/datetime/relative_time";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button";
import "../../components/ha-card";
import "../../components/ha-settings-row";
import "../../components/ha-icon-button";
import "../../components/ha-settings-row";
import type { RefreshToken } from "../../data/refresh_token";
import {
showAlertDialog,
@ -88,11 +88,11 @@ class HaLongLivedTokens extends LitElement {
</div>
<div class="card-actions">
<mwc-button @click=${this._createToken}>
<ha-button @click=${this._createToken}>
${this.hass.localize(
"ui.panel.profile.long_lived_access_tokens.create"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
`;
@ -175,12 +175,13 @@ class HaLongLivedTokens extends LitElement {
a {
color: var(--primary-color);
}
mwc-button {
--mdc-theme-primary: var(--primary-color);
}
ha-icon-button {
color: var(--primary-text-color);
}
.card-actions {
display: flex;
justify-content: flex-end;
}
`,
];
}

24
src/panels/profile/ha-mfa-modules-card.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-card";
import "../../components/ha-button";
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
import type { HomeAssistant, MFAModule } from "../../types";
import { showMfaModuleSetupFlowDialog } from "./show-ha-mfa-module-setup-flow-dialog";
@ -22,17 +22,15 @@ class HaMfaModulesCard extends LitElement {
html`<ha-settings-row two-line>
<span slot="heading">${module.name}</span>
<span slot="description">${module.id}</span>
${module.enabled
? html`<mwc-button .module=${module} @click=${this._disable}
>${this.hass.localize(
"ui.panel.profile.mfa.disable"
)}</mwc-button
>`
: html`<mwc-button .module=${module} @click=${this._enable}
>${this.hass.localize(
"ui.panel.profile.mfa.enable"
)}</mwc-button
>`}
<ha-button
size="small"
appearance="plain"
.module=${module}
@click=${module.enabled ? this._disable : this._enable}
>${this.hass.localize(
`ui.panel.profile.mfa.${module.enabled ? "disable" : "enable"}`
)}</ha-button
>
</ha-settings-row>`
)}
</ha-card>
@ -40,7 +38,7 @@ class HaMfaModulesCard extends LitElement {
}
static styles = css`
mwc-button {
ha-button {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;

Some files were not shown because too many files have changed in this diff Show More