Use destructive attribute from ha-button (#23786)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Jan-Philipp Benecke 2025-01-20 08:54:22 +01:00 committed by GitHub
parent 9a3ca59d77
commit 2f5fd6f0c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 23 deletions

View File

@ -1,7 +1,6 @@
import { mdiAlertOutline } from "@mdi/js"; import { mdiAlertOutline } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-md-dialog"; import "../../components/ha-md-dialog";
@ -117,9 +116,7 @@ class DialogBox extends LitElement {
@click=${this._confirm} @click=${this._confirm}
?dialogInitialFocus=${!this._params.prompt && ?dialogInitialFocus=${!this._params.prompt &&
!this._params.destructive} !this._params.destructive}
class=${classMap({ ?destructive=${this._params.destructive}
destructive: this._params.destructive || false,
})}
> >
${this._params.confirmText ${this._params.confirmText
? this._params.confirmText ? this._params.confirmText
@ -187,9 +184,6 @@ class DialogBox extends LitElement {
.secondary { .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.destructive {
--mdc-theme-primary: var(--error-color);
}
ha-textfield { ha-textfield {
width: 100%; width: 100%;
} }

View File

@ -1,4 +1,3 @@
import "@material/mwc-button/mwc-button";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@ -8,6 +7,7 @@ import "../../components/ha-switch";
import { RecurrenceRange } from "../../data/calendar"; import { RecurrenceRange } from "../../data/calendar";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import type { ConfirmEventDialogBoxParams } from "./show-confirm-event-dialog-box"; import type { ConfirmEventDialogBoxParams } from "./show-confirm-event-dialog-box";
import "../../components/ha-button";
@customElement("confirm-event-dialog-box") @customElement("confirm-event-dialog-box")
class ConfirmEventDialogBox extends LitElement { class ConfirmEventDialogBox extends LitElement {
@ -40,26 +40,26 @@ class ConfirmEventDialogBox extends LitElement {
<div> <div>
<p>${this._params.text}</p> <p>${this._params.text}</p>
</div> </div>
<mwc-button @click=${this._dismiss} slot="secondaryAction"> <ha-button @click=${this._dismiss} slot="secondaryAction">
${this.hass.localize("ui.dialogs.generic.cancel")} ${this.hass.localize("ui.dialogs.generic.cancel")}
</mwc-button> </ha-button>
<mwc-button <ha-button
slot="primaryAction" slot="primaryAction"
@click=${this._confirm} @click=${this._confirm}
dialogInitialFocus dialogInitialFocus
class="destructive" destructive
> >
${this._params.confirmText} ${this._params.confirmText}
</mwc-button> </ha-button>
${this._params.confirmFutureText ${this._params.confirmFutureText
? html` ? html`
<mwc-button <ha-button
@click=${this._confirmFuture} @click=${this._confirmFuture}
class="destructive"
slot="primaryAction" slot="primaryAction"
destructive
> >
${this._params.confirmFutureText} ${this._params.confirmFutureText}
</mwc-button> </ha-button>
` `
: ""} : ""}
</ha-dialog> </ha-dialog>
@ -120,9 +120,6 @@ class ConfirmEventDialogBox extends LitElement {
.secondary { .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.destructive {
--mdc-theme-primary: var(--error-color);
}
ha-dialog { ha-dialog {
/* Place above other dialogs */ /* Place above other dialogs */
--dialog-z-index: 104; --dialog-z-index: 104;

View File

@ -222,7 +222,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
<ha-button @click=${this.closeDialog}> <ha-button @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")} ${this.hass.localize("ui.common.cancel")}
</ha-button> </ha-button>
<ha-button @click=${this._restoreBackup} class="destructive"> <ha-button @click=${this._restoreBackup} destructive>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.dialogs.restore.actions.restore" "ui.panel.config.backup.dialogs.restore.actions.restore"
)} )}
@ -350,9 +350,6 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
.content p { .content p {
margin: 0 0 16px; margin: 0 0 16px;
} }
.destructive {
--mdc-theme-primary: var(--error-color);
}
.centered { .centered {
display: flex; display: flex;
flex-direction: column; flex-direction: column;