Use destructive attribute from ha-button (#23786)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

src/dialogs/generic/dialog-box.ts

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

src/panels/calendar/confirm-event-dialog-box.ts

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

src/panels/config/backup/dialogs/dialog-restore-backup.ts

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