Migrate config-zone dialog(s) to wa

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -1,9 +1,10 @@
 import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { 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 { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-button";
 import type { HomeZoneMutableParams } from "../../../data/zone";
@@ -29,6 +30,8 @@ class DialogHomeZoneDetail extends LitElement {
 
   @state() private _params?: HomeZoneDetailDialogParams;
 
+  @state() private _open = false;
+
   @state() private _submitting = false;
 
   public showDialog(params: HomeZoneDetailDialogParams): void {
@@ -40,9 +43,14 @@ class DialogHomeZoneDetail extends LitElement {
       longitude: this.hass.config.longitude,
       radius: this.hass.config.radius,
     };
+    this._open = true;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     this._data = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -58,41 +66,40 @@ class DialogHomeZoneDetail extends LitElement {
     const valid = !latInvalid && !lngInvalid;
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass!.localize("ui.common.edit_item", { name: this._data.name })
-        )}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass!.localize("ui.common.edit_item", {
+          name: this._data.name,
+        })}
+        @closed=${this._dialogClosed}
       >
-        <div>
-          <ha-form
-            .hass=${this.hass}
-            .schema=${SCHEMA}
-            .data=${this._formData(this._data)}
-            .error=${this._error}
-            .computeLabel=${this._computeLabel}
-            @value-changed=${this._valueChanged}
-          ></ha-form>
-        </div>
-        <ha-button
-          slot="primaryAction"
-          appearance="plain"
-          @click=${this.closeDialog}
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-          .disabled=${!valid || this._submitting}
-        >
-          ${this.hass!.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
+        <ha-form
+          autofocus
+          .hass=${this.hass}
+          .schema=${SCHEMA}
+          .data=${this._formData(this._data)}
+          .error=${this._error}
+          .computeLabel=${this._computeLabel}
+          @value-changed=${this._valueChanged}
+        ></ha-form>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass!.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+            .disabled=${!valid || this._submitting}
+          >
+            ${this.hass!.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -130,20 +137,7 @@ class DialogHomeZoneDetail extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-min-width: min(600px, 95vw);
-        }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 100vw;
-            --mdc-dialog-max-width: 100vw;
-          }
-        }
-      `,
-    ];
+    return [haStyleDialog];
   }
 }
 

src/panels/config/zone/dialog-zone-detail.ts

@@ -4,7 +4,8 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-button";
 import type { SchemaUnion } from "../../../components/ha-form/types";
@@ -24,6 +25,8 @@ class DialogZoneDetail extends LitElement {
 
   @state() private _params?: ZoneDetailDialogParams;
 
+  @state() private _open = false;
+
   @state() private _submitting = false;
 
   public showDialog(params: ZoneDetailDialogParams): void {
@@ -50,9 +53,14 @@ class DialogZoneDetail extends LitElement {
         radius: 100,
       };
     }
+    this._open = true;
   }
 
   public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     this._data = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -78,61 +86,58 @@ class DialogZoneDetail extends LitElement {
       !radiusInvalid;
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this._params.entry
-            ? this.hass!.localize("ui.common.edit_item", {
-                name: this._params.entry.name,
-              })
-            : this.hass!.localize("ui.panel.config.zone.detail.new_zone")
-        )}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.entry
+          ? this.hass!.localize("ui.common.edit_item", {
+              name: this._params.entry.name,
+            })
+          : this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
+        @closed=${this._dialogClosed}
       >
-        <div>
-          <ha-form
-            .hass=${this.hass}
-            .schema=${this._schema(this._data.icon)}
-            .data=${this._formData(this._data)}
-            .error=${this._error}
-            .computeLabel=${this._computeLabel}
-            class=${this._data.passive ? "passive" : ""}
-            @value-changed=${this._valueChanged}
-          ></ha-form>
-        </div>
-        ${this._params.entry
-          ? html`
-              <ha-button
-                slot="secondaryAction"
-                variant="danger"
-                appearance="plain"
-                @click=${this._deleteEntry}
-                .disabled=${this._submitting}
-              >
-                ${this.hass!.localize("ui.panel.config.zone.detail.delete")}
-              </ha-button>
-            `
-          : nothing}
-        <ha-button
-          slot="primaryAction"
-          appearance="plain"
-          @click=${this.closeDialog}
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-          .disabled=${!valid || this._submitting}
-        >
+        <ha-form
+          autofocus
+          .hass=${this.hass}
+          .schema=${this._schema(this._data.icon)}
+          .data=${this._formData(this._data)}
+          .error=${this._error}
+          .computeLabel=${this._computeLabel}
+          class=${this._data.passive ? "passive" : ""}
+          @value-changed=${this._valueChanged}
+        ></ha-form>
+        <ha-dialog-footer slot="footer">
           ${this._params.entry
-            ? this.hass!.localize("ui.common.save")
-            : this.hass!.localize("ui.panel.config.zone.detail.create")}
-        </ha-button>
-      </ha-dialog>
+            ? html`
+                <ha-button
+                  slot="secondaryAction"
+                  variant="danger"
+                  appearance="plain"
+                  @click=${this._deleteEntry}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass!.localize("ui.panel.config.zone.detail.delete")}
+                </ha-button>
+              `
+            : nothing}
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass!.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+            .disabled=${!valid || this._submitting}
+          >
+            ${this._params.entry
+              ? this.hass!.localize("ui.common.save")
+              : this.hass!.localize("ui.panel.config.zone.detail.create")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -209,7 +214,7 @@ class DialogZoneDetail extends LitElement {
     this._submitting = true;
     try {
       if (await this._params!.removeEntry!()) {
-        this._params = undefined;
+        this.closeDialog();
       }
     } finally {
       this._submitting = false;
@@ -220,15 +225,6 @@ class DialogZoneDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-min-width: min(600px, 95vw);
-        }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 100vw;
-            --mdc-dialog-max-width: 100vw;
-          }
-        }
         ha-form.passive {
           --zone-radius-color: var(--secondary-text-color);
         }