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 16:10:24 +02:00
parent 71e859675c
commit 7edb5f7f2c
No known key found for this signature in database
105 changed files with 488 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gallery/src/pages/components/ha-form.ts
View File

@ -1,5 +1,4 @@
/* eslint-disable lit/no-template-arrow */
import "@material/mwc-button";
import type { TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators";

1
gallery/src/pages/components/ha-selector.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, state } from "lit/decorators";

1
hassio/src/addon-view/info/hassio-addon-system-managed.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";

2
hassio/src/system/hassio-supervisor-log.ts
View File

@ -1,5 +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";

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

@ -135,9 +135,6 @@ export class HaProgressButton extends LitElement {
ha-button.error slot {
visibility: hidden;
}
:host([destructive]) {
--mdc-theme-primary: var(--error-color);
}
`;
}

2
src/components/data-table/ha-data-table.ts
View File

@ -904,7 +904,7 @@ export class HaDataTable extends LitElement {
.find((el) =>
[
"ha-checkbox",
"mwc-button",
"ha-button",
"ha-button",
"ha-icon-button",
"ha-assist-chip",

1
src/components/ha-alert.ts
View File

@ -131,7 +131,6 @@ class HaAlert extends LitElement {
margin-top: 2px;
font-weight: var(--ha-font-weight-bold);
}
.action mwc-button,
.action ha-icon-button {
--mdc-theme-primary: var(--primary-text-color);
--mdc-icon-button-size: 36px;

3
src/components/ha-button-menu.ts
View File

@ -6,6 +6,7 @@ import { customElement, property, query } from "lit/decorators";
import { mainWindow } from "../common/dom/get_main_window";
import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
import type { HaIconButton } from "./ha-icon-button";
import type { HaButton } from "./ha-button";
import "./ha-menu";
@customElement("ha-button-menu")
@ -94,7 +95,7 @@ export class HaButtonMenu extends LitElement {
private get _triggerButton() {
return this.querySelector(
'ha-icon-button[slot="trigger"], ha-button[slot="trigger"], mwc-button[slot="trigger"]'
) as HaIconButton | Button | null;
) as HaIconButton | Button | HaButton | null;
}
private _setTriggerAria() {

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

@ -83,7 +83,6 @@ export class HaButton extends Button {
--sl-input-border-width: var(--ha-button-border-width, 0);
}
:host([destructive]), /* Deprecated */
:host([variant="danger"]) {
--ha-button-theme-color: #b30532;
--ha-button-theme-darker-color: #64031d;

2
src/components/ha-date-range-picker.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import { mdiCalendar } from "@mdi/js";

3
src/components/ha-md-button-menu.ts
View File

@ -4,6 +4,7 @@ import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
import type { HaButton } from "./ha-button";
import type { HaIconButton } from "./ha-icon-button";
import "./ha-md-menu";
import type { HaMdMenu } from "./ha-md-menu";
@ -72,7 +73,7 @@ export class HaMdButtonMenu extends LitElement {
private get _triggerButton() {
return this.querySelector(
'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]'
) as HaIconButton | Button | null;
) as HaIconButton | Button | HaButton | null;
}
private _setTriggerAria() {

3
src/components/ha-selector/ha-selector-media.ts
View File

@ -213,9 +213,6 @@ export class HaMediaSelector extends LitElement {
display: block;
margin-bottom: 16px;
}
mwc-button {
margin-top: 8px;
}
ha-alert {
display: block;
margin-bottom: 16px;

1
src/components/ha-target-picker.ts
View File

@ -1,6 +1,5 @@
// @ts-ignore
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import "@material/mwc-button/mwc-button";
import "@material/mwc-menu/mwc-menu-surface";
import {
mdiClose,

17
src/components/ha-vacuum-state.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import type { HassEntity } from "home-assistant-js-websocket";
import { haStyle } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-button";
const STATES_INTERCEPTABLE: Record<
string,
@ -56,9 +56,14 @@ export class HaVacuumState extends LitElement {
this.stateObj.attributes.supported_features
);
return html`
<mwc-button @click=${this._callService} .disabled=${!interceptable}>
<ha-button
appearance="plain"
size="small"
@click=${this._callService}
.disabled=${!interceptable}
>
${this._computeLabel(this.stateObj.state, interceptable)}
</mwc-button>
</ha-button>
`;
}
@ -92,17 +97,13 @@ export class HaVacuumState extends LitElement {
return [
haStyle,
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);
}
`,
];
}

20
src/components/media-player/ha-browse-media-tts.ts
View File

@ -1,10 +1,11 @@
import "@material/mwc-button/mwc-button";
import { mdiContentCopy } from "@mdi/js";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { mdiContentCopy } from "@mdi/js";
import { storage } from "../../common/decorators/storage";
import { fireEvent } from "../../common/dom/fire_event";
import { copyToClipboard } from "../../common/util/copy-clipboard";
import { fetchCloudStatus } from "../../data/cloud";
import type {
MediaPlayerBrowseAction,
MediaPlayerItem,
@ -13,13 +14,12 @@ import type { TTSEngine } from "../../data/tts";
import { getProviderFromTTSMediaSource, getTTSEngine } from "../../data/tts";
import { buttonLinkStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import "../ha-textarea";
import "../ha-language-picker";
import "../ha-tts-voice-picker";
import "../ha-card";
import { fetchCloudStatus } from "../../data/cloud";
import { copyToClipboard } from "../../common/util/copy-clipboard";
import { showToast } from "../../util/toast";
import "../ha-button";
import "../ha-card";
import "../ha-language-picker";
import "../ha-textarea";
import "../ha-tts-voice-picker";
export interface TtsMediaPickedEvent {
item: MediaPlayerItem;
@ -92,11 +92,11 @@ class BrowseMediaTTS extends LitElement {
: nothing}
</div>
<div class="card-actions">
<mwc-button @click=${this._ttsClicked}>
<ha-button appearance="plain" @click=${this._ttsClicked}>
${this.hass.localize(
`ui.components.media-browser.tts.action_${this.action}`
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
${this._voice

17
src/components/media-player/ha-media-manage-button.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiFolderEdit } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -10,6 +9,7 @@ import {
} from "../../data/media_source";
import type { HomeAssistant } from "../../types";
import "../ha-svg-icon";
import "../ha-button";
import { showMediaManageDialog } from "./show-media-manage-dialog";
declare global {
@ -38,14 +38,12 @@ class MediaManageButton extends LitElement {
return nothing;
}
return html`
<mwc-button
.label=${this.hass.localize(
<ha-button appearance="plain" size="small" @click=${this._manage}>
<ha-svg-icon .path=${mdiFolderEdit} slot="prefix"></ha-svg-icon>
${this.hass.localize(
"ui.components.media-browser.file_management.manage"
)}
@click=${this._manage}
>
<ha-svg-icon .path=${mdiFolderEdit} slot="icon"></ha-svg-icon>
</mwc-button>
</ha-button>
`;
}
@ -57,11 +55,6 @@ class MediaManageButton extends LitElement {
}
static styles = css`
mwc-button {
/* We use icon + text to show disabled state */
--mdc-button-disabled-ink-color: --mdc-theme-primary;
}
ha-svg-icon[slot="icon"] {
vertical-align: middle;
}

21
src/components/media-player/ha-media-player-browse.ts
View File

@ -1,6 +1,5 @@
import type { LitVirtualizer } from "@lit-labs/virtualizer";
import { grid } from "@lit-labs/virtualizer/layouts/grid";
import "@material/mwc-button/mwc-button";
import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@ -42,6 +41,7 @@ import {
import { documentationUrl } from "../../util/documentation-url";
import "../entity/ha-entity-picker";
import "../ha-alert";
import "../ha-button";
import "../ha-button-menu";
import "../ha-card";
import "../ha-spinner";
@ -402,8 +402,7 @@ export class HaMediaPlayerBrowse extends LitElement {
${currentItem.can_play &&
(!currentItem.thumbnail || !this.narrow)
? html`
<mwc-button
raised
<ha-button
.item=${currentItem}
@click=${this._actionClicked}
>
@ -414,11 +413,12 @@ export class HaMediaPlayerBrowse extends LitElement {
.path=${this.action === "play"
? mdiPlay
: mdiPlus}
slot="prefix"
></ha-svg-icon>
${this.hass.localize(
`ui.components.media-browser.${this.action}`
)}
</mwc-button>
</ha-button>
`
: ""}
</div>
@ -952,9 +952,8 @@ export class HaMediaPlayerBrowse extends LitElement {
min-width: 0;
flex: 1;
}
.header-info mwc-button {
.header-info ha-button {
display: block;
--mdc-theme-primary: var(--primary-color);
padding-bottom: 16px;
}
.breadcrumb {
@ -1246,7 +1245,7 @@ export class HaMediaPlayerBrowse extends LitElement {
bottom: -20px;
right: 20px;
}
:host([narrow]) .header-info mwc-button {
:host([narrow]) .header-info ha-button {
margin-top: 16px;
margin-bottom: 8px;
}
@ -1265,17 +1264,17 @@ export class HaMediaPlayerBrowse extends LitElement {
:host(:not([narrow])[scrolled]) .header:not(.no-img) ha-icon-button {
align-self: center;
}
:host([scrolled]) .header-info mwc-button,
.no-img .header-info mwc-button {
:host([scrolled]) .header-info ha-button,
.no-img .header-info ha-button {
padding-right: 4px;
}
:host([scrolled][narrow]) .no-img .header-info mwc-button {
:host([scrolled][narrow]) .no-img .header-info ha-button {
padding-right: 16px;
}
:host([scrolled]) .header-info {
flex-direction: row;
}
:host([scrolled]) .header-info mwc-button {
:host([scrolled]) .header-info ha-button {
align-self: center;
margin-top: 0;
margin-bottom: 0;

46
src/components/media-player/ha-media-upload-button.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button";
import { mdiUpload } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import type { MediaPlayerItem } from "../../data/media-player";
@ -10,7 +9,7 @@ import {
} from "../../data/media_source";
import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../types";
import "../ha-spinner";
import "../ha-button";
import "../ha-svg-icon";
declare global {
@ -36,8 +35,13 @@ class MediaUploadButton extends LitElement {
return nothing;
}
return html`
<mwc-button
.label=${this._uploading > 0
<ha-button
.disabled=${this._uploading > 0}
@click=${this._startUpload}
.loading=${this._uploading > 0}
>
<ha-svg-icon .path=${mdiUpload} slot="prefix"></ha-svg-icon>
${this._uploading > 0
? this.hass.localize(
"ui.components.media-browser.file_management.uploading",
{
@ -47,19 +51,7 @@ class MediaUploadButton extends LitElement {
: this.hass.localize(
"ui.components.media-browser.file_management.add_media"
)}
.disabled=${this._uploading > 0}
@click=${this._startUpload}
>
${this._uploading > 0
? html`
<ha-spinner
size="small"
area-label="Uploading"
slot="icon"
></ha-spinner>
`
: html` <ha-svg-icon .path=${mdiUpload} slot="icon"></ha-svg-icon> `}
</mwc-button>
</ha-button>
`;
}
@ -107,24 +99,6 @@ class MediaUploadButton extends LitElement {
document.body.append(input);
input.click();
}
static styles = css`
mwc-button {
/* We use icon + text to show disabled state */
--mdc-button-disabled-ink-color: --mdc-theme-primary;
}
ha-svg-icon[slot="icon"],
ha-spinner[slot="icon"] {
vertical-align: middle;
}
ha-svg-icon[slot="icon"] {
margin-inline-start: 0px;
margin-inline-end: 8px;
direction: var(--direction);
}
`;
}
declare global {

13
src/dialogs/config-entry-system-options/dialog-config-entry-system-options.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";
@ -6,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-formfield";
import "../../components/ha-switch";
import "../../components/ha-button";
import type { HaSwitch } from "../../components/ha-switch";
import type { ConfigEntryMutableParams } from "../../data/config_entries";
import { updateConfigEntry } from "../../data/config_entries";
@ -113,20 +113,21 @@ class DialogConfigEntrySystemOptions extends LitElement {
.disabled=${this._submitting}
></ha-switch>
</ha-formfield>
<mwc-button
slot="secondaryAction"
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
.disabled=${this._submitting}
>
${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.config_entry_system_options.update")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

17
src/dialogs/config-flow/previews/entity-preview-row.ts
View File

@ -7,6 +7,7 @@ import { ifDefined } from "lit/directives/if-defined";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/entity/ha-entity-toggle";
import "../../../components/entity/state-badge";
import "../../../components/ha-button";
import "../../../components/ha-climate-state";
import "../../../components/ha-cover-controls";
import "../../../components/ha-cover-tilt-controls";
@ -91,7 +92,7 @@ class EntityPreviewRow extends LitElement {
justify-content: flex-end;
width: 100%;
}
mwc-button {
ha-button {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;
@ -107,9 +108,13 @@ class EntityPreviewRow extends LitElement {
if (domain === "button") {
return html`
<mwc-button .disabled=${isUnavailableState(stateObj.state)}>
<ha-button
appearance="plain"
size="small"
.disabled=${isUnavailableState(stateObj.state)}
>
${this.hass.localize("ui.card.button.press")}
</mwc-button>
</ha-button>
`;
}
@ -232,14 +237,16 @@ class EntityPreviewRow extends LitElement {
if (domain === "lock") {
return html`
<mwc-button
<ha-button
.disabled=${isUnavailableState(stateObj.state)}
class="text-content"
appearance="plain"
size="small"
>
${stateObj.state === "locked"
? this.hass!.localize("ui.card.lock.unlock")
: this.hass!.localize("ui.card.lock.lock")}
</mwc-button>
</ha-button>
`;
}

14
src/dialogs/config-flow/step-flow-external.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 } from "lit/decorators";
@ -6,6 +5,7 @@ import type { DataEntryFlowStepExternal } from "../../data/data_entry_flow";
import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
import "../../components/ha-button";
@customElement("step-flow-external")
class StepFlowExternal extends LitElement {
@ -22,13 +22,11 @@ class StepFlowExternal extends LitElement {
<div class="content">
${this.flowConfig.renderExternalStepDescription(this.hass, this.step)}
<div class="open-button">
<a href=${this.step.url} target="_blank" rel="noreferrer">
<mwc-button raised>
${localize(
"ui.panel.config.integrations.config_flow.external_step.open_site"
)}
</mwc-button>
</a>
<ha-button href=${this.step.url} target="_blank" rel="noreferrer">
${localize(
"ui.panel.config.integrations.config_flow.external_step.open_site"
)}
</ha-button>
</div>
</div>
`;

1
src/dialogs/config-flow/step-flow-progress.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 } from "lit/decorators";

22
src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import Cropper from "cropperjs";
// @ts-ignore
import cropperCss from "cropperjs/dist/cropper.css";
@ -7,6 +6,7 @@ import { css, html, nothing, LitElement, unsafeCSS } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import "../../components/ha-dialog";
import "../../components/ha-button";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
@ -92,18 +92,26 @@ export class HaImagecropperDialog extends LitElement {
>
<img alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")} />
</div>
<mwc-button slot="secondaryAction" @click=${this.closeDialog}>
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
${this._isTargetAspectRatio
? html`<mwc-button slot="primaryAction" @click=${this._useOriginal}>
? html`<ha-button
appearance="plain"
slot="primaryAction"
@click=${this._useOriginal}
>
${this.hass.localize("ui.dialogs.image_cropper.use_original")}
</mwc-button>`
</ha-button>`
: nothing}
<mwc-button slot="primaryAction" @click=${this._cropImage}>
<ha-button slot="primaryAction" @click=${this._cropImage}>
${this.hass.localize("ui.dialogs.image_cropper.crop")}
</mwc-button>
</ha-button>
</ha-dialog>`;
}

1
src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiEyedropper } from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";

8
src/dialogs/more-info/controls/more-info-automation.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
@ -6,6 +5,7 @@ import "../../../components/ha-relative-time";
import { triggerAutomationActions } from "../../../data/automation";
import { isUnavailableState } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import "../../../components/ha-button";
@customElement("more-info-automation")
class MoreInfoAutomation extends LitElement {
@ -30,12 +30,14 @@ class MoreInfoAutomation extends LitElement {
</div>
<div class="actions">
<mwc-button
<ha-button
appearance="plain"
size="small"
@click=${this._runActions}
.disabled=${isUnavailableState(this.stateObj!.state)}
>
${this.hass.localize("ui.card.automation.trigger")}
</mwc-button>
</ha-button>
</div>
`;
}

21
src/dialogs/more-info/controls/more-info-configurator.ts
View File

@ -1,9 +1,8 @@
import "@material/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-alert";
import "../../../components/ha-spinner";
import "../../../components/ha-button";
import "../../../components/ha-markdown";
import "../../../components/ha-textfield";
import type { HomeAssistant } from "../../../types";
@ -46,19 +45,13 @@ export class MoreInfoConfigurator extends LitElement {
)}
${this.stateObj.attributes.submit_caption
? html`<p class="submit">
<mwc-button
raised
<ha-button
.disabled=${this._isConfiguring}
@click=${this._submitClicked}
.loading=${this._isConfiguring}
>
${this._isConfiguring
? html`<ha-spinner
size="tiny"
aria-label="Configuring"
></ha-spinner>`
: ""}
${this.stateObj.attributes.submit_caption}
</mwc-button>
</ha-button>
</p>`
: ""}
</div>
@ -113,12 +106,6 @@ export class MoreInfoConfigurator extends LitElement {
text-align: center;
height: 41px;
}
ha-spinner {
--ha-spinner-indicator-color: var(--primary-text-color);
margin-right: auto;
margin-left: auto;
}
`;
}

20
src/dialogs/more-info/controls/more-info-counter.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { isUnavailableState } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import "../../../components/ha-button";
@customElement("more-info-counter")
class MoreInfoCounter extends LitElement {
@ -20,29 +20,35 @@ class MoreInfoCounter extends LitElement {
return html`
<div class="actions">
<mwc-button
<ha-button
appearance="plain"
size="small"
.action=${"increment"}
@click=${this._handleActionClick}
.disabled=${disabled ||
Number(this.stateObj.state) === this.stateObj.attributes.maximum}
>
${this.hass!.localize("ui.card.counter.actions.increment")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
appearance="plain"
size="small"
.action=${"decrement"}
@click=${this._handleActionClick}
.disabled=${disabled ||
Number(this.stateObj.state) === this.stateObj.attributes.minimum}
>
${this.hass!.localize("ui.card.counter.actions.decrement")}
</mwc-button>
<mwc-button
</ha-button>
<ha-button
appearance="plain"
size="small"
.action=${"reset"}
@click=${this._handleActionClick}
.disabled=${disabled}
>
${this.hass!.localize("ui.card.counter.actions.reset")}
</mwc-button>
</ha-button>
</div>
`;
}

17
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiLoginVariant,
mdiMusicNote,
@ -18,6 +16,7 @@ import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import "../../../components/ha-select";
import "../../../components/ha-slider";
import "../../../components/ha-button";
import "../../../components/ha-svg-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
import { isUnavailableState } from "../../../data/entity";
@ -69,17 +68,17 @@ class MoreInfoMediaPlayer extends LitElement {
${!isUnavailableState(stateObj.state) &&
supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)
? html`
<mwc-button
.label=${this.hass.localize(
"ui.card.media_player.browse_media"
)}
<ha-button
@click=${this._showBrowseMedia}
appearance="plain"
size="small"
>
<ha-svg-icon
.path=${mdiPlayBoxMultiple}
slot="icon"
slot="prefix"
></ha-svg-icon>
</mwc-button>
${this.hass.localize("ui.card.media_player.browse_media")}
</ha-button>
`
: ""}
</div>
@ -262,7 +261,7 @@ class MoreInfoMediaPlayer extends LitElement {
font-style: italic;
}
mwc-button > ha-svg-icon {
ha-button > ha-svg-icon {
vertical-align: text-bottom;
}
`;

10
src/dialogs/more-info/controls/more-info-person.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-attributes";
import "../../../components/ha-button";
import "../../../components/map/ha-map";
import { showZoneEditor } from "../../../data/zone";
import type { HomeAssistant } from "../../../types";
@ -38,11 +38,15 @@ class MoreInfoPerson extends LitElement {
this.stateObj.attributes.longitude
? html`
<div class="actions">
<mwc-button @click=${this._handleAction}>
<ha-button
appearance="plain"
size="small"
@click=${this._handleAction}
>
${this.hass.localize(
"ui.dialogs.more_info_control.person.create_zone"
)}
</mwc-button>
</ha-button>
</div>
`
: ""}

1
src/dialogs/more-info/controls/more-info-script.ts
View File

@ -1,5 +1,4 @@
import { mdiPlay, mdiStop } from "@mdi/js";
import "@material/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";

38
src/dialogs/more-info/controls/more-info-timer.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-button";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import "../../../components/ha-button";
import type { TimerEntity } from "../../../data/timer";
import type { HomeAssistant } from "../../../types";
@ -20,26 +20,46 @@ class MoreInfoTimer extends LitElement {
<div class="actions">
${this.stateObj.state === "idle" || this.stateObj.state === "paused"
? html`
<mwc-button .action=${"start"} @click=${this._handleActionClick}>
<ha-button
appearance="plain"
size="small"
.action=${"start"}
@click=${this._handleActionClick}
>
${this.hass!.localize("ui.card.timer.actions.start")}
</mwc-button>
</ha-button>
`
: ""}
${this.stateObj.state === "active"
? html`
<mwc-button .action=${"pause"} @click=${this._handleActionClick}>
<ha-button
appearance="plain"
size="small"
.action=${"pause"}
@click=${this._handleActionClick}
>
${this.hass!.localize("ui.card.timer.actions.pause")}
</mwc-button>
</ha-button>
`
: ""}
${this.stateObj.state === "active" || this.stateObj.state === "paused"
? html`
<mwc-button .action=${"cancel"} @click=${this._handleActionClick}>
<ha-button
appearance="plain"
size="small"
.action=${"cancel"}
@click=${this._handleActionClick}
>
${this.hass!.localize("ui.card.timer.actions.cancel")}
</mwc-button>
<mwc-button .action=${"finish"} @click=${this._handleActionClick}>
</ha-button>
<ha-button
appearance="plain"
size="small"
.action=${"finish"}
@click=${this._handleActionClick}
>
${this.hass!.localize("ui.card.timer.actions.finish")}
</mwc-button>
</ha-button>
`
: ""}
</div>

10
src/dialogs/notifications/configurator-notification-item.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button";
import { html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { domainToName } from "../../data/integration";
import type { PersitentNotificationEntity } from "../../data/persistent_notification";
import type { HomeAssistant } from "../../types";
import "../../components/ha-button";
import "./notification-item-template";
@customElement("configurator-notification-item")
@ -31,9 +31,13 @@ export class HuiConfiguratorNotificationItem extends LitElement {
})}
</div>
<mwc-button slot="actions" @click=${this._handleClick}>
<ha-button
appearance="plain"
slot="actions"
@click=${this._handleClick}
>
${this.hass.formatEntityState(this.notification)}
</mwc-button>
</ha-button>
</notification-item-template>
`;
}

6
src/dialogs/notifications/notification-drawer.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { LitElement, html, css, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -10,6 +9,7 @@ import { subscribeNotifications } from "../../data/persistent_notification";
import type { HomeAssistant } from "../../types";
import "./notification-item";
import "../../components/ha-header-bar";
import "../../components/ha-button";
import "../../components/ha-drawer";
import type { HaDrawer } from "../../components/ha-drawer";
import { computeRTLDirection } from "../../common/util/compute_rtl";
@ -122,11 +122,11 @@ export class HuiNotificationDrawer extends LitElement {
)}
${this._notifications.length > 1
? html`<div class="notification-actions">
<mwc-button raised @click=${this._dismissAll}>
<ha-button appearance="filled" @click=${this._dismissAll}>
${this.hass.localize(
"ui.notification_drawer.dismiss_all"
)}
</mwc-button>
</ha-button>
</div>`
: ""}`
: html` <div class="empty">

10
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -37,6 +37,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
import { debounce } from "../../common/util/debounce";
import "../../components/ha-icon-button";
import "../../components/ha-label";
import "../../components/ha-button";
import "../../components/ha-list";
import "../../components/ha-md-list-item";
import "../../components/ha-spinner";
@ -246,10 +247,13 @@ export class QuickBar extends LitElement {
></ha-icon-button>`}
${this._narrow
? html`
<mwc-button
.label=${this.hass!.localize("ui.common.close")}
<ha-button
appearance="plain"
size="small"
@click=${this.closeDialog}
></mwc-button>
>
${this.hass!.localize("ui.common.close")}
</ha-button>
`
: ""}
</div>

1
src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiChevronLeft, mdiClose, mdiMenuDown } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";

1
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiChevronDown,
mdiClose,

6
src/layouts/ha-init-page.ts
View File

@ -1,8 +1,8 @@
import type { PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { property, state } from "lit/decorators";
import "@material/mwc-button";
import "../components/ha-spinner";
import "../components/ha-button";
class HaInitPage extends LitElement {
@property({ type: Boolean }) public error = false;
@ -22,7 +22,7 @@ class HaInitPage extends LitElement {
<p class="retry-text">
Retrying in ${this._retryInSeconds} seconds...
</p>
<mwc-button @click=${this._retry}>Retry now</mwc-button>
<ha-button @click=${this._retry}>Retry now</ha-button>
${location.host.includes("ui.nabu.casa")
? html`
<p>
@ -66,7 +66,7 @@ class HaInitPage extends LitElement {
protected willUpdate(changedProperties: PropertyValues<this>) {
if (changedProperties.has("error") && this.error) {
import("@material/mwc-button");
import("../components/ha-button");
}
}

6
src/layouts/hass-error-screen.ts
View File

@ -1,8 +1,8 @@
import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../components/ha-icon-button-arrow-prev";
import "../components/ha-button";
import "../components/ha-menu-button";
import type { HomeAssistant } from "../types";
import "../components/ha-alert";
@ -41,9 +41,9 @@ class HassErrorScreen extends LitElement {
<div class="content">
<ha-alert alert-type="error">${this.error}</ha-alert>
<slot>
<mwc-button @click=${this._handleBack}>
<ha-button appearance="plain" size="small" @click=${this._handleBack}>
${this.hass?.localize("ui.common.back")}
</mwc-button>
</ha-button>
</slot>
</div>
`;

7
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -1,5 +1,4 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@material/mwc-button/mwc-button";
import {
mdiArrowDown,
mdiArrowUp,
@ -768,12 +767,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
.active-filters ha-svg-icon {
color: var(--primary-color);
}
.active-filters mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
direction: var(--direction);
}
.active-filters::before {
background-color: var(--primary-color);
opacity: 0.12;

1
src/layouts/supervisor-error-screen.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";

4
src/panels/calendar/confirm-event-dialog-box.ts
View File

@ -47,7 +47,7 @@ class ConfirmEventDialogBox extends LitElement {
slot="primaryAction"
@click=${this._confirm}
dialogInitialFocus
destructive
variant="danger"
>
${this._params.confirmText}
</ha-button>
@ -56,7 +56,7 @@ class ConfirmEventDialogBox extends LitElement {
<ha-button
@click=${this._confirmFuture}
slot="primaryAction"
destructive
variant="danger"
>
${this._params.confirmFutureText}
</ha-button>

13
src/panels/calendar/dialog-calendar-event-detail.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiCalendarClock } from "@mdi/js";
import { toDate } from "date-fns-tz";
import { addDays, isSameDay } from "date-fns";
@ -12,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { isDate } from "../../common/string/is_date";
import "../../components/entity/state-info";
import "../../components/ha-alert";
import "../../components/ha-button";
import "../../components/ha-date-input";
import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-time-input";
@ -99,24 +99,25 @@ class DialogCalendarEventDetail extends LitElement {
</div>
${this._params.canDelete
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
appearance="plain"
@click=${this._deleteEvent}
.disabled=${this._submitting}
>
${this.hass.localize("ui.components.calendar.event.delete")}
</mwc-button>
</ha-button>
`
: ""}
${this._params.canEdit
? html`<mwc-button
? html`<ha-button
slot="primaryAction"
@click=${this._editEvent}
.disabled=${this._submitting}
>
${this.hass.localize("ui.components.calendar.event.edit")}
</mwc-button>`
</ha-button>`
: ""}
</ha-dialog>
`;

16
src/panels/calendar/dialog-calendar-event-editor.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { formatInTimeZone, toDate } from "date-fns-tz";
import {
addDays,
@ -23,6 +22,7 @@ import "../../components/ha-date-input";
import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-formfield";
import "../../components/ha-switch";
import "../../components/ha-button";
import "../../components/ha-textarea";
import "../../components/ha-textfield";
import "../../components/ha-time-input";
@ -262,34 +262,34 @@ class DialogCalendarEventEditor extends LitElement {
</div>
${isCreate
? html`
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._createEvent}
.disabled=${this._submitting}
>
${this.hass.localize("ui.components.calendar.event.add")}
</mwc-button>
</ha-button>
`
: html`
<mwc-button
<ha-button
slot="primaryAction"
@click=${this._saveEvent}
.disabled=${this._submitting}
>
${this.hass.localize("ui.components.calendar.event.save")}
</mwc-button>
</ha-button>
${this._params.canDelete
? html`
<mwc-button
<ha-button
slot="secondaryAction"
class="warning"
variant="danger"
@click=${this._deleteEvent}
.disabled=${this._submitting}
>
${this.hass.localize(
"ui.components.calendar.event.delete"
)}
</mwc-button>
</ha-button>
`
: ""}
`}

16
src/panels/calendar/ha-full-calendar.ts
View File

@ -5,7 +5,6 @@ import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@material/mwc-button";
import {
mdiPlus,
mdiViewAgenda,
@ -26,6 +25,7 @@ import "../../components/ha-button-toggle-group";
import "../../components/ha-fab";
import "../../components/ha-icon-button-next";
import "../../components/ha-icon-button-prev";
import "../../components/ha-button";
import type {
Calendar as CalendarData,
CalendarEvent,
@ -137,13 +137,14 @@ export class HAFullCalendar extends LitElement {
${!this.narrow
? html`
<div class="navigation">
<mwc-button
outlined
<ha-button
appearance="filled"
size="small"
class="today"
@click=${this._handleToday}
>${this.hass.localize(
"ui.components.calendar.today"
)}</mwc-button
)}</ha-button
>
<ha-icon-button-prev
.label=${this.hass.localize("ui.common.previous")}
@ -184,13 +185,14 @@ export class HAFullCalendar extends LitElement {
</div>
</div>
<div class="controls buttons">
<mwc-button
outlined
<ha-button
appearance="plain"
size="small"
class="today"
@click=${this._handleToday}
>${this.hass.localize(
"ui.components.calendar.today"
)}</mwc-button
)}</ha-button
>
<ha-button-toggle-group
.buttons=${viewToggleButtons}

11
src/panels/config/application_credentials/ha-config-application-credentials.ts
View File

@ -11,6 +11,7 @@ import type {
SortingChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-fab";
import "../../../components/ha-button";
import "../../../components/ha-help-tooltip";
import "../../../components/ha-svg-icon";
import "../../../components/ha-icon-overflow-menu";
@ -176,10 +177,14 @@ export class HaConfigApplicationCredentials extends LitElement {
<div class="header-btns" slot="selection-bar">
${!this.narrow
? html`
<mwc-button @click=${this._deleteSelected} class="warning"
<ha-button
appearance="plain"
size="small"
@click=${this._deleteSelected}
variant="danger"
>${this.hass.localize(
"ui.panel.config.application_credentials.picker.remove_selected.button"
)}</mwc-button
)}</ha-button
>
`
: html`
@ -349,7 +354,7 @@ export class HaConfigApplicationCredentials extends LitElement {
.header-btns {
display: flex;
}
.header-btns > mwc-button,
.header-btns > ha-button,
.header-btns > ha-icon-button {
margin: 8px;
}

22
src/panels/config/areas/ha-config-area-page.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit/context";
import "@material/mwc-button";
import { mdiDelete, mdiDotsVertical, mdiImagePlus, mdiPencil } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket/dist/types";
import type { CSSResultGroup } from "lit";
@ -16,6 +15,7 @@ import { groupBy } from "../../../common/util/group-by";
import { afterNextRender } from "../../../common/util/render-status";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-button";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
import "../../../components/ha-list-item";
@ -266,15 +266,18 @@ class HaConfigAreaPage extends LitElement {
class="img-edit-btn"
></ha-icon-button>
</div>`
: html`<mwc-button
: html`<ha-button
appearance="filled"
size="small"
.entry=${area}
@click=${this._showSettings}
.label=${this.hass.localize(
"ui.panel.config.areas.add_picture"
)}
>
<ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
</mwc-button>`}
<ha-svg-icon
.path=${mdiImagePlus}
slot="prefix"
></ha-svg-icon>
${this.hass.localize("ui.panel.config.areas.add_picture")}
</ha-button>`}
<ha-card
outlined
.header=${this.hass.localize("ui.panel.config.devices.caption")}
@ -739,11 +742,6 @@ class HaConfigAreaPage extends LitElement {
padding: 16px;
color: var(--secondary-text-color);
}
mwc-button > ha-svg-icon {
margin-inline-start: 0;
margin-inline-end: 8px;
}
`,
];
}

15
src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import { mdiClose, mdiHelpCircle } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -10,6 +8,7 @@ import "../../../../components/ha-icon-button";
import "../../../../components/ha-md-list-item";
import "../../../../components/ha-md-list";
import "../../../../components/ha-radio";
import "../../../../components/ha-button";
import "../../../../components/ha-textfield";
import "../../../../components/ha-dialog";
@ -158,12 +157,16 @@ class DialogAutomationMode extends LitElement implements HassDialog {
`
: nothing}
<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 @click=${this._save} slot="primaryAction">
</ha-button>
<ha-button @click=${this._save} slot="primaryAction">
${this.hass.localize("ui.panel.config.automation.editor.change_mode")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

11
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -1,8 +1,8 @@
import "@material/mwc-button/mwc-button";
import type { HassEntity } from "home-assistant-js-websocket";
import { html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-alert";
import "../../../components/ha-button";
import "../../../components/ha-markdown";
import type { BlueprintAutomationConfig } from "../../../data/automation";
import { fetchBlueprints } from "../../../data/blueprint";
@ -26,11 +26,16 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
${this.hass.localize(
"ui.panel.config.automation.editor.disabled"
)}
<mwc-button slot="action" @click=${this._enable}>
<ha-button
appearance="plain"
size="small"
slot="action"
@click=${this._enable}
>
${this.hass.localize(
"ui.panel.config.automation.editor.enable"
)}
</mwc-button>
</ha-button>
</ha-alert>
`
: ""}

37
src/panels/config/automation/ha-automation-editor.ts
View File

@ -1,5 +1,4 @@
import { consume } from "@lit/context";
import "@material/mwc-button";
import {
mdiCog,
mdiContentDuplicate,
@ -31,6 +30,7 @@ import { promiseTimeout } from "../../../common/util/promise-timeout";
import { afterNextRender } from "../../../common/util/render-status";
import "../../../components/ha-button-menu";
import "../../../components/ha-fab";
import "../../../components/ha-button";
import "../../../components/ha-fade-in";
import "../../../components/ha-icon";
import "../../../components/ha-icon-button";
@ -214,11 +214,15 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
>
${this._config?.id && !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.automation.editor.show_trace"
)}
</mwc-button>
</ha-button>
`
: ""}
<ha-button-menu slot="toolbar-icon">
@ -427,11 +431,11 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
"ui.panel.config.automation.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>`
@ -440,11 +444,17 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
>${this.hass.localize(
"ui.panel.config.automation.editor.read_only"
)}
<mwc-button slot="action" @click=${this._duplicate}>
<ha-button
appearance="filled"
size="small"
variant="warning"
slot="action"
@click=${this._duplicate}
>
${this.hass.localize(
"ui.panel.config.automation.editor.migrate"
)}
</mwc-button>
</ha-button>
</ha-alert>`
: nothing}
${this._mode === "gui"
@ -487,11 +497,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
${this.hass.localize(
"ui.panel.config.automation.editor.disabled"
)}
<mwc-button slot="action" @click=${this._toggle}>
<ha-button
appearance="filled"
size="small"
slot="action"
@click=${this._toggle}
>
${this.hass.localize(
"ui.panel.config.automation.editor.enable"
)}
</mwc-button>
</ha-button>
</ha-alert>
`
: ""}

5
src/panels/config/automation/ha-automation-trace.ts
View File

@ -18,6 +18,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/ha-button-menu";
import "../../../components/ha-icon-button";
import "../../../components/ha-button";
import "../../../components/ha-list-item";
import "../../../components/trace/ha-trace-blueprint-config";
import "../../../components/trace/ha-trace-config";
@ -106,11 +107,11 @@ export class HaAutomationTrace extends LitElement {
)}"
slot="toolbar-icon"
>
<mwc-button>
<ha-button appearance="plain">
${this.hass.localize(
"ui.panel.config.automation.trace.edit_automation"
)}
</mwc-button>
</ha-button>
</a>
`
: ""}

5
src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts
View File

@ -155,11 +155,6 @@ export class HaConversationTrigger
.option {
margin-top: 4px;
}
mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-textfield {
display: block;
margin-bottom: 8px;

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

@ -230,7 +230,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
<ha-button @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._restoreBackup} destructive>
<ha-button @click=${this._restoreBackup} variant="danger">
${this.hass.localize(
"ui.panel.config.backup.dialogs.restore.actions.restore"
)}

2
src/panels/config/backup/ha-config-backup-location.ts
View File

@ -189,7 +189,7 @@ class HaConfigBackupDetails extends LitElement {
<ha-button
slot="end"
@click=${this._turnOffEncryption}
destructive
variant="danger"
>
${this.hass.localize(
"ui.panel.config.backup.location.encryption.encryption_turn_off"

1
src/panels/config/blueprint/blueprint-generic-editor.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";

16
src/panels/config/category/dialog-assign-category.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-icon-picker";
import "../../../components/ha-settings-row";
import "../../../components/ha-textfield";
import "../../../components/ha-button";
import { updateEntityRegistryEntry } from "../../../data/entity_registry";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@ -70,16 +70,20 @@ class DialogAssignCategory extends LitElement {
></ha-category-picker>
</div>
</div>
<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._updateEntry}
.disabled=${this._submitting}
.disabled=${!!this._submitting}
>
${this.hass.localize("ui.common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

16
src/panels/config/category/dialog-category-registry-detail.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";
@ -7,6 +6,7 @@ import "../../../components/ha-alert";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-icon-picker";
import "../../../components/ha-settings-row";
import "../../../components/ha-button";
import "../../../components/ha-textfield";
import type {
CategoryRegistryEntry,
@ -96,18 +96,22 @@ class DialogCategoryDetail extends LitElement {
></ha-icon-picker>
</div>
</div>
<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._updateEntry}
.disabled=${nameInvalid || this._submitting}
.disabled=${nameInvalid || !!this._submitting}
>
${entry
? this.hass.localize("ui.common.save")
: this.hass.localize("ui.common.add")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

21
src/panels/config/cloud/account/cloud-account.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -10,6 +9,7 @@ import "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
import "../../../../components/ha-list-item";
import "../../../../components/ha-tip";
import "../../../../components/ha-button";
import type {
CloudStatusLoggedIn,
SubscriptionInfo,
@ -148,22 +148,21 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
</div>
<div class="card-actions">
<a
<ha-button
appearance="plain"
href="https://account.nabucasa.com"
target="_blank"
rel="noreferrer"
>
<mwc-button>
${this.hass.localize(
"ui.panel.config.cloud.account.manage_account"
)}
</mwc-button>
</a>
<mwc-button @click=${this._signOut} class="warning">
${this.hass.localize(
"ui.panel.config.cloud.account.manage_account"
)}
</ha-button>
<ha-button @click=${this._signOut} variant="danger">
${this.hass.localize(
"ui.panel.config.cloud.account.sign_out"
)}
</mwc-button>
</ha-button>
</div>
</ha-card>
</ha-config-section>
@ -359,7 +358,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
flex-direction: row-reverse;
justify-content: space-between;
}
mwc-button {
ha-button {
align-self: center;
}
.wrap {

7
src/panels/config/cloud/account/cloud-tts-pref.ts
View File

@ -1,10 +1,9 @@
import "@material/mwc-button";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
import "../../../../components/ha-button";
import "../../../../components/ha-language-picker";
import "../../../../components/ha-list-item";
import "../../../../components/ha-select";
@ -103,9 +102,9 @@ export class CloudTTSPref extends LitElement {
</div>
</div>
<div class="card-actions">
<mwc-button @click=${this._openTryDialog}>
<ha-button @click=${this._openTryDialog}>
${this.hass.localize("ui.panel.config.cloud.account.tts.try")}
</mwc-button>
</ha-button>
</div>
</ha-card>
`;

9
src/panels/config/cloud/account/cloud-webhooks.ts
View File

@ -3,6 +3,7 @@ import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
import "../../../../components/ha-card";
import "../../../../components/ha-button";
import "../../../../components/ha-spinner";
import "../../../../components/ha-settings-row";
import "../../../../components/ha-switch";
@ -93,11 +94,15 @@ export class CloudWebhooks extends LitElement {
`
: this._cloudHooks![entry.webhook_id]
? html`
<mwc-button @click=${this._handleManageButton}>
<ha-button
appearance="plain"
size="small"
@click=${this._handleManageButton}
>
${this.hass!.localize(
"ui.panel.config.cloud.account.webhooks.manage"
)}
</mwc-button>
</ha-button>
`
: html`<ha-switch @click=${this._enableWebhook}>
</ha-switch>`}

2
src/panels/config/cloud/account/dialog-cloud-support-package.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import { mdiClose } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";

6
src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators";
@ -7,6 +6,7 @@ import { computeStateName } from "../../../../../../common/entity/compute_state_
import "../../../../../../components/ha-dialog";
import "../../../../../../components/ha-formfield";
import "../../../../../../components/ha-switch";
import "../../../../../../components/ha-button";
import type { HaSwitch } from "../../../../../../components/ha-switch";
import type { MQTTDeviceDebugInfo } from "../../../../../../data/mqtt";
import { fetchMQTTDebugInfo } from "../../../../../../data/mqtt";
@ -107,9 +107,9 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
)}
`}
</ul>
<mwc-button slot="primaryAction" @click=${this._close}>
<ha-button slot="primaryAction" @click=${this._close}>
${this.hass!.localize("ui.common.close")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

16
src/panels/config/energy/components/ha-energy-battery-settings.ts
View File

@ -1,10 +1,11 @@
import "@material/mwc-button/mwc-button";
import { mdiBatteryHigh, mdiDelete, mdiPencil } from "@mdi/js";
import { mdiBatteryHigh, mdiDelete, mdiPencil, mdiPlus } from "@mdi/js";
import type { CSSResultGroup, 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 "../../../../components/ha-svg-icon";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-settings-row";
import type {
@ -132,10 +133,15 @@ export class EnergyBatterySettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
<mwc-button @click=${this._addSource}
>${this.hass.localize(
<ha-button
@click=${this._addSource}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.energy.battery.add_battery_system"
)}</mwc-button
)}</ha-button
>
</div>
</div>

13
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDevices, mdiDrag, mdiPencil } from "@mdi/js";
import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { repeat } from "lit/directives/repeat";
import { customElement, property } 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-sortable";
import "../../../../components/ha-svg-icon";
@ -117,10 +117,15 @@ export class EnergyDeviceSettings extends LitElement {
</ha-sortable>
<div class="row">
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
<mwc-button @click=${this._addDevice}
<ha-button
@click=${this._addDevice}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon
>${this.hass.localize(
"ui.panel.config.energy.device_consumption.add_device"
)}</mwc-button
)}</ha-button
>
</div>
</div>

13
src/panels/config/energy/components/ha-energy-gas-settings.ts
View File

@ -1,9 +1,9 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiFire, mdiPencil } from "@mdi/js";
import { mdiDelete, mdiFire, mdiPencil, mdiPlus } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-card";
import "../../../../components/ha-icon-button";
import type {
@ -120,10 +120,15 @@ export class EnergyGasSettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiFire}></ha-svg-icon>
<mwc-button @click=${this._addSource}
<ha-button
@click=${this._addSource}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon
>${this.hass.localize(
"ui.panel.config.energy.gas.add_gas_source"
)}</mwc-button
)}</ha-button
>
</div>
</div>

13
src/panels/config/energy/components/ha-energy-solar-settings.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiPencil, mdiSolarPower } from "@mdi/js";
import { mdiDelete, mdiPencil, mdiPlus, mdiSolarPower } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { 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 "../../../../components/ha-icon-button";
import type {
EnergyInfo,
@ -132,11 +132,16 @@ export class EnergySolarSettings extends LitElement {
? html`
<div class="row border-bottom">
<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
<mwc-button @click=${this._addSource}>
<ha-button
@click=${this._addSource}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.energy.solar.add_solar_production"
)}
</mwc-button>
</ha-button>
</div>
`
: ""}

13
src/panels/config/energy/components/ha-energy-water-settings.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiWater, mdiPencil } from "@mdi/js";
import { mdiDelete, mdiWater, mdiPencil, mdiPlus } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import { 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 "../../../../components/ha-icon-button";
import type {
EnergyPreferences,
@ -121,10 +121,15 @@ export class EnergyWaterSettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiWater}></ha-svg-icon>
<mwc-button @click=${this._addSource}
<ha-button
@click=${this._addSource}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon
>${this.hass.localize(
"ui.panel.config.energy.water.add_water_source"
)}</mwc-button
)}</ha-button
>
</div>
</div>

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

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiFire } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
@ -9,6 +8,7 @@ import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-dialog";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import "../../../../components/ha-button";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-textfield";
import type { GasSourceTypeEnergyPreference } from "../../../../data/energy";
@ -247,16 +247,20 @@ export class DialogEnergyGasSettings
</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>
`;
}

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

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiTransmissionTower } 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";
@ -280,10 +280,14 @@ export class DialogEnergyGridFlowSettings
</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[
this._params!.direction === "from"
@ -293,7 +297,7 @@ export class DialogEnergyGridFlowSettings
slot="primaryAction"
>
${this.hass.localize("ui.common.save")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

4
src/panels/config/entities/entity-registry-settings-editor.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiContentCopy } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues } from "lit";
@ -1539,9 +1538,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
li[divider] {
border-bottom-color: var(--divider-color);
}
ha-alert mwc-button {
width: max-content;
}
.menu-item {
border-radius: 4px;
margin-top: 3px;

1
src/panels/config/entities/ha-config-entities.ts
View File

@ -1563,7 +1563,6 @@ ${rejected
.header-btns {
display: flex;
}
.header-btns > mwc-button,
.header-btns > ha-icon-button {
margin: 8px;
}

5
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@ -235,11 +235,6 @@ class HaInputSelectForm extends LitElement {
cursor: default;
background-color: var(--card-background-color);
}
mwc-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
ha-textfield {
display: block;
margin-bottom: 8px;

2
src/panels/config/integrations/dialog-add-integration.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button";
import type { IFuseOptions } from "fuse.js";
import Fuse from "fuse.js";
import type { HassConfig } from "home-assistant-js-websocket";

1
src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiDelete } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";

8
src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-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, state } from "lit/decorators";
import { formatTime } from "../../../../../common/datetime/format_time";
import "../../../../../components/ha-card";
import "../../../../../components/ha-button";
import "../../../../../components/ha-select";
import "../../../../../components/ha-textfield";
import type { MQTTMessage } from "../../../../../data/mqtt";
@ -100,7 +100,9 @@ class MqttSubscribeCard extends LitElement {
(qos) => html`<ha-list-item .value=${qos}>${qos}</ha-list-item>`
)}
</ha-select>
<mwc-button
<ha-button
appearance="plain"
size="small"
.disabled=${this._topic === ""}
@click=${this._handleSubmit}
type="submit"
@ -108,7 +110,7 @@ class MqttSubscribeCard extends LitElement {
${this._subscribed
? this.hass.localize("ui.panel.config.mqtt.stop_listening")
: this.hass.localize("ui.panel.config.mqtt.start_listening")}
</mwc-button>
</ha-button>
</div>
</form>
<div class="events">

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

@ -1,11 +1,10 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state, query } 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-spinner";
import "../../../../../components/ha-button";
import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
import { addGroup, fetchGroupableDevices } from "../../../../../data/zha";
import "../../../../../layouts/hass-subpage";
@ -97,24 +96,17 @@ export class ZHAAddGroupPage extends LitElement {
</zha-device-endpoint-data-table>
<div class="buttons">
<mwc-button
<ha-button
.disabled=${!this._groupName ||
this._groupName === "" ||
this._processingAdd}
@click=${this._createGroup}
class="button"
.loading=${this._processingAdd}
>
${this._processingAdd
? html`<ha-spinner
size="small"
.ariaLabel=${this.hass!.localize(
"ui.panel.config.zha.groups.creating_group"
)}
></ha-spinner>`
: ""}
${this.hass!.localize(
"ui.panel.config.zha.groups.create"
)}</mwc-button
)}</ha-button
>
</div>
</ha-config-section>

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

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiPlus } from "@mdi/js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";

1
src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";

2
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import {
mdiCheckCircle,
mdiCircle,

2
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts
View File

@ -1,5 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";

11
src/panels/config/person/ha-config-person.ts
View File

@ -1,8 +1,8 @@
import { mdiPlus } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { stringCompare } from "../../../common/string/compare";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-fab";
import "../../../components/ha-list";
@ -117,10 +117,15 @@ export class HaConfigPerson extends LitElement {
${hass.localize(
"ui.panel.config.person.no_persons_created_yet"
)}
<mwc-button @click=${this._createPerson}>
<ha-button
@click=${this._createPerson}
appearance="filled"
size="small"
>
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
${hass.localize(
"ui.panel.config.person.create_person"
)}</mwc-button
)}</ha-button
>
</div>
`

1
src/panels/config/repairs/dialog-integration-startup.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";

1
src/panels/config/script/blueprint-script-editor.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-markdown";

10
src/panels/config/script/ha-script-fields.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import { mdiPlus } from "@mdi/js";
import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
@ -47,14 +46,13 @@ export default class HaScriptFields extends LitElement {
</div> `
: nothing}
<ha-button
outlined
appearance="filled"
size="small"
@click=${this._addField}
.disabled=${this.disabled}
.label=${this.hass.localize(
"ui.panel.config.script.editor.field.add_field"
)}
>
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
${this.hass.localize("ui.panel.config.script.editor.field.add_field")}
</ha-button>
`;
}

1
src/panels/config/script/manual-script-editor.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";

1
src/panels/config/voice-assistants/dialog-voice-settings.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { mdiClose, mdiTuneVertical } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";

5
src/panels/config/zone/ha-config-zone.ts
View File

@ -10,6 +10,7 @@ import { navigate } from "../../../common/navigate";
import { stringCompare } from "../../../common/string/compare";
import "../../../components/ha-card";
import "../../../components/ha-fab";
import "../../../components/ha-button";
import "../../../components/ha-icon-button";
import "../../../components/ha-list";
import "../../../components/ha-list-item";
@ -136,8 +137,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
<div class="empty">
${hass.localize("ui.panel.config.zone.no_zones_created_yet")}
<br />
<mwc-button @click=${this._createZone}>
${hass.localize("ui.panel.config.zone.create_zone")}</mwc-button
<ha-button size="small" @click=${this._createZone}>
${hass.localize("ui.panel.config.zone.create_zone")}</ha-button
>
</div>
`

2
src/panels/developer-tools/assist/developer-tools-assist.ts
View File

@ -164,7 +164,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
${this._results.length
? html`
<div class="result-toolbar">
<ha-button outlined @click=${this._clear} destructive>
<ha-button outlined @click=${this._clear} variant="danger">
<ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon>
${this.hass.localize("ui.common.clear")}
</ha-button>

8
src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
View File

@ -1,7 +1,7 @@
import { differenceInDays, endOfDay } from "date-fns";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { formatDate } from "../../../../common/datetime/format_date";
import type { EnergyData } from "../../../../data/energy";
@ -126,12 +126,6 @@ export class HuiEnergyCompareCard
energyCollection.setCompare(false);
energyCollection.refresh();
}
static styles = css`
mwc-button {
width: max-content;
}
`;
}
declare global {

1
src/panels/lovelace/cards/hui-recovery-mode-card.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";

1
src/panels/lovelace/cards/hui-starting-card.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { css, html, LitElement, nothing } from "lit";

19
src/panels/lovelace/components/hui-energy-period-selector.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import {
@ -34,6 +33,7 @@ import {
} from "../../../common/datetime/format_date";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-button-menu";
import "../../../components/ha-button";
import "../../../components/ha-check-list-item";
import "../../../components/ha-date-range-picker";
import type { DateRangePickerRanges } from "../../../components/ha-date-range-picker";
@ -205,11 +205,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
</div>
${!this.narrow
? html`<mwc-button dense outlined @click=${this._pickNow}>
? html`<ha-button
appearance="filled"
size="small"
click=${this._pickNow}
>
${this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.now"
)}
</mwc-button>`
</ha-button>`
: nothing}
<ha-button-menu>
@ -485,17 +489,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
margin-inline-start: unset;
margin-inline-end: initial;
}
mwc-button {
ha-button {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
flex-shrink: 0;
--mdc-button-outline-color: currentColor;
--primary-color: currentColor;
--mdc-theme-primary: currentColor;
--mdc-theme-on-primary: currentColor;
--mdc-button-disabled-outline-color: var(--disabled-text-color);
--mdc-button-disabled-ink-color: var(--disabled-text-color);
--ha-button-theme-color: currentColor;
}
`;
}

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

@ -7,6 +7,7 @@ import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import "../../cards/hui-card";
import "../../../../components/ha-button";
import type { DeleteCardDialogParams } from "./show-delete-card-dialog";
@customElement("hui-dialog-delete-card")
@ -55,16 +56,17 @@ export class HuiDialogDeleteCard extends LitElement {
`
: ""}
</div>
<mwc-button
slot="secondaryAction"
<ha-button
appearance="plain"
slot="primaryAction"
@click=${this.closeDialog}
dialogInitialFocus
>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
<mwc-button slot="primaryAction" class="warning" @click=${this._delete}>
</ha-button>
<ha-button slot="primaryAction" class="warning" @click=${this._delete}>
${this.hass!.localize("ui.common.delete")}
</mwc-button>
</ha-button>
</ha-dialog>
`;
}

7
src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
View File

@ -115,10 +115,13 @@ export class HuiConditionalCardEditor
.path=${mdiContentCopy}
@click=${this._handleCopyCard}
></ha-icon-button>
<mwc-button @click=${this._handleReplaceCard}
<ha-button
appearance="plain"
size="small"
@click=${this._handleReplaceCard}
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.change_type"
)}</mwc-button
)}</ha-button
>
</div>
<hui-card-element-editor

6
src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
View File

@ -1,8 +1,8 @@
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 "../../../../components/ha-button";
import { createCloseHeading } from "../../../../components/ha-dialog";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
@ -80,9 +80,9 @@ export class HuiCreateDialogHeaderFooter
)}
</div>
<div slot="primaryAction">
<mwc-button @click=${this._cancel}>
<ha-button @click=${this._cancel}>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
</ha-button>
</div>
</ha-dialog>
`;

10
src/panels/lovelace/entity-rows/hui-lock-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";
@ -7,6 +6,7 @@ import type { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import "../../../components/ha-button";
import type { ConfirmableRowConfig, LovelaceRow } from "./types";
import { callProtectedLockService } from "../../../data/lock";
import { confirmAction } from "../common/confirm-action";
@ -45,7 +45,9 @@ class HuiLockEntityRow 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._callService}
.disabled=${isUnavailableState(stateObj.state)}
class="text-content"
@ -53,13 +55,13 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
${stateObj.state === "locked"
? this.hass!.localize("ui.card.lock.unlock")
: this.hass!.localize("ui.card.lock.lock")}
</mwc-button>
</ha-button>
</hui-generic-entity-row>
`;
}
static styles = css`
mwc-button {
ha-button {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;

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

@ -1,8 +1,8 @@
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 "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-button";
import { UNAVAILABLE } from "../../../data/entity";
import { activateScene } from "../../../data/scene";
import type { HomeAssistant } from "../../../types";
@ -46,20 +46,22 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<mwc-button
<ha-button
appearance="filled"
size="small"
@click=${this._callService}
.disabled=${stateObj.state === UNAVAILABLE}
class="text-content"
>
${this._config.action_name ||
this.hass!.localize("ui.card.scene.activate")}
</mwc-button>
</ha-button>
</hui-generic-entity-row>
`;
}
static styles = css`
mwc-button {
ha-button {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;

18
src/panels/lovelace/entity-rows/hui-script-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";
@ -9,6 +8,7 @@ import type { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import "../../../components/ha-button";
import type { ActionRowConfig, LovelaceRow } from "./types";
import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
import { confirmAction } from "../common/confirm-action";
@ -48,7 +48,11 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
${stateObj.state === "on"
? html`<mwc-button @click=${this._cancelScript}>
? html`<ha-button
appearance="filled"
size="small"
@click=${this._cancelScript}
>
${stateObj.attributes.mode !== "single" &&
stateObj.attributes.current &&
stateObj.attributes.current > 0
@ -56,24 +60,26 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
number: stateObj.attributes.current,
})
: this.hass.localize("ui.card.script.cancel")}
</mwc-button>`
</ha-button>`
: ""}
${stateObj.state === "off" || stateObj.attributes.max
? html`<mwc-button
? html`<ha-button
appearance="filled"
size="small"
@click=${this._runScript}
.disabled=${isUnavailableState(stateObj.state) ||
!canRun(stateObj)}
>
${this._config.action_name ||
this.hass!.localize("ui.card.script.run")}
</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;

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

@ -1,10 +1,10 @@
import "@material/mwc-button";
import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators";
import { DOMAINS_TOGGLE } from "../../../common/const";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-state-icon";
import "../../../components/ha-button";
import type { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive";
import { handleAction } from "../common/handle-action";
@ -61,7 +61,9 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
</ha-state-icon>
<div class="flex">
<div .title=${name}>${name}</div>
<mwc-button
<ha-button
appearance="filled"
size="small"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
@ -69,7 +71,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
})}
>${this._config.action_name
? this._config.action_name
: this.hass!.localize("ui.card.service.run")}</mwc-button
: this.hass!.localize("ui.card.service.run")}</ha-button
>
</div>
`;
@ -99,7 +101,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
overflow: hidden;
text-overflow: ellipsis;
}
mwc-button {
ha-button {
margin-right: -0.57em;
margin-inline-end: -0.57em;
margin-inline-start: initial;

9
src/panels/lovelace/special-rows/hui-cast-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";
@ -8,6 +7,7 @@ import {
castSendShowLovelaceView,
ensureConnectedCastSession,
} from "../../../cast/receiver_messages";
import "../../../components/ha-button";
import "../../../components/ha-icon";
import type { HomeAssistant } from "../../../types";
import type { CastConfig, LovelaceRow } from "../entity-rows/types";
@ -61,14 +61,15 @@ class HuiCastRow extends LitElement implements LovelaceRow {
: html`
<div class="controls">
<google-cast-launcher></google-cast-launcher>
<mwc-button
<ha-button
@click=${this._sendLovelace}
class=${classMap({ inactive: !active })}
.unelevated=${active}
appearance="plain"
size="small"
.disabled=${!this._castManager.status}
>
SHOW
</mwc-button>
</ha-button>
</div>
`}
</div>

1
src/panels/media-browser/ha-panel-media-browser.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-button";
import type { ActionDetail } from "@material/mwc-list";
import {
mdiAlphaABoxOutline,

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