Migrate config-thread dialog(s) to wa

src/panels/config/integrations/integration-panels/thread/dialog-thread-dataset.ts

@@ -4,7 +4,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../../../../../types";
 import type { DialogThreadDatasetParams } from "./show-dialog-thread-dataset";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-wa-dialog";
 
 @customElement("ha-dialog-thread-dataset")
 class DialogThreadDataset extends LitElement implements HassDialog {
@@ -12,16 +12,22 @@ class DialogThreadDataset extends LitElement implements HassDialog {
 
   @state() private _params?: DialogThreadDatasetParams;
 
+  @state() private _open = false;
+
   public async showDialog(
     params: DialogThreadDatasetParams
   ): Promise<Promise<void>> {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
   }
 
   protected render() {
@@ -37,10 +43,11 @@ class DialogThreadDataset extends LitElement implements HassDialog {
       dataset.extended_pan_id &&
       otbrInfo.active_dataset_tlvs?.includes(dataset.extended_pan_id);
 
-    return html`<ha-dialog
-      open
-      @closed=${this.closeDialog}
-      .heading=${createCloseHeading(this.hass, network.name)}
+    return html`<ha-wa-dialog
+      .hass=${this.hass}
+      .open=${this._open}
+      header-title=${network.name}
+      @closed=${this._dialogClosed}
     >
       <div>
         Network name: ${dataset.network_name}<br />
@@ -54,7 +61,7 @@ class DialogThreadDataset extends LitElement implements HassDialog {
               Active dataset TLVs: ${otbrInfo.active_dataset_tlvs}`
           : nothing}
       </div>
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 }
 

src/panels/todo/dialog-todo-item-editor.ts

@@ -10,11 +10,10 @@ import "../../components/ha-alert";
 import "../../components/ha-button";
 import "../../components/ha-checkbox";
 import "../../components/ha-date-input";
-import "../../components/ha-dialog-footer";
+import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import "../../components/ha-textfield";
 import "../../components/ha-time-input";
-import "../../components/ha-wa-dialog";
 import {
   TodoItemStatus,
   TodoListEntityFeature,
@@ -51,8 +50,6 @@ class DialogTodoItemEditor extends LitElement {
 
   @state() private _submitting = false;
 
-  @state() private _open = false;
-
   // Dates are manipulated and displayed in the browser timezone
   // which may be different from the Home Assistant timezone. When
   // events are persisted, they are relative to the Home Assistant
@@ -62,7 +59,6 @@ class DialogTodoItemEditor extends LitElement {
   public showDialog(params: TodoItemEditDialogParams): void {
     this._error = undefined;
     this._params = params;
-    this._open = true;
     this._timeZone = resolveTimeZone(
       this.hass.locale.time_zone,
       this.hass.config.time_zone
@@ -90,11 +86,6 @@ class DialogTodoItemEditor extends LitElement {
     if (!this._params) {
       return;
     }
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
-    this._open = false;
     this._error = undefined;
     this._params = undefined;
     this._due = undefined;
@@ -117,14 +108,16 @@ class DialogTodoItemEditor extends LitElement {
     );
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass.localize(
-          `ui.components.todo.item.${isCreate ? "add" : "edit"}`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(
+            `ui.components.todo.item.${isCreate ? "add" : "edit"}`
+          )
         )}
-        width="medium"
-        @closed=${this._dialogClosed}
       >
         <div class="content">
           ${this._error
@@ -143,11 +136,11 @@ class DialogTodoItemEditor extends LitElement {
               .label=${this.hass.localize("ui.components.todo.item.summary")}
               .value=${this._summary}
               required
-              autofocus
               @input=${this._handleSummaryChanged}
               .validationMessage=${this.hass.localize(
                 "ui.common.error_required"
               )}
+              dialogInitialFocus
               .disabled=${!canUpdate}
             ></ha-textfield>
           </div>
@@ -210,43 +203,41 @@ class DialogTodoItemEditor extends LitElement {
               </div>`
             : nothing}
         </div>
-        <ha-dialog-footer slot="footer">
-          ${isCreate
-            ? html`
-                <ha-button
-                  slot="primaryAction"
-                  @click=${this._createItem}
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass.localize("ui.components.todo.item.add")}
-                </ha-button>
-              `
-            : html`
-                <ha-button
-                  slot="primaryAction"
-                  @click=${this._saveItem}
-                  .disabled=${!canUpdate || this._submitting}
-                >
-                  ${this.hass.localize("ui.components.todo.item.save")}
-                </ha-button>
-                ${this._todoListSupportsFeature(
-                  TodoListEntityFeature.DELETE_TODO_ITEM
-                )
-                  ? html`
-                      <ha-button
-                        slot="secondaryAction"
-                        variant="danger"
-                        appearance="plain"
-                        @click=${this._deleteItem}
-                        .disabled=${this._submitting}
-                      >
-                        ${this.hass.localize("ui.components.todo.item.delete")}
-                      </ha-button>
-                    `
-                  : ""}
-              `}
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        ${isCreate
+          ? html`
+              <ha-button
+                slot="primaryAction"
+                @click=${this._createItem}
+                .disabled=${this._submitting}
+              >
+                ${this.hass.localize("ui.components.todo.item.add")}
+              </ha-button>
+            `
+          : html`
+              <ha-button
+                slot="primaryAction"
+                @click=${this._saveItem}
+                .disabled=${!canUpdate || this._submitting}
+              >
+                ${this.hass.localize("ui.components.todo.item.save")}
+              </ha-button>
+              ${this._todoListSupportsFeature(
+                TodoListEntityFeature.DELETE_TODO_ITEM
+              )
+                ? html`
+                    <ha-button
+                      slot="secondaryAction"
+                      variant="danger"
+                      appearance="plain"
+                      @click=${this._deleteItem}
+                      .disabled=${this._submitting}
+                    >
+                      ${this.hass.localize("ui.components.todo.item.delete")}
+                    </ha-button>
+                  `
+                : ""}
+            `}
+      </ha-dialog>
     `;
   }
 
@@ -424,6 +415,12 @@ class DialogTodoItemEditor extends LitElement {
     return [
       haStyleDialog,
       css`
+        @media all and (min-width: 450px) and (min-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: min(600px, 95vw);
+            --mdc-dialog-max-width: min(600px, 95vw);
+          }
+        }
         ha-alert {
           display: block;
           margin-bottom: 16px;