Add TODO for later

src/components/ha-wa-dialog.ts

@@ -214,6 +214,8 @@ export class HaWaDialog extends LitElement {
         );
         max-width: var(--ha-dialog-max-width, 100vw);
         max-width: var(--ha-dialog-max-width, 100svw);
+        /* TODO: animate view transition between width changes. 
+        Needs https://github.com/home-assistant/frontend/pull/27281 for mixin */
       }
 
       :host([width="small"]) wa-dialog {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -34,7 +34,7 @@ import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-reques
 import { navigate } from "../../common/navigate";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-button-menu";
-import "../../components/ha-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
@@ -99,6 +99,8 @@ export class MoreInfoDialog extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
+  @state() private _open = false;
+
   @state() private _parentEntityIds: string[] = [];
 
   @state() private _entityId?: string | null;
@@ -131,6 +133,7 @@ export class MoreInfoDialog extends LitElement {
     this._initialView = params.view || DEFAULT_VIEW;
     this._childView = undefined;
     this.large = false;
+    this._open = true;
     this._loadEntityRegistryEntry();
   }
 
@@ -149,6 +152,10 @@ export class MoreInfoDialog extends LitElement {
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._entityId = undefined;
     this._parentEntityIds = [];
     this._entry = undefined;
@@ -364,21 +371,21 @@ export class MoreInfoDialog extends LitElement {
     const isRTL = computeRTL(this.hass);
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .width=${this.large ? "full" : "medium"}
+        @closed=${this._dialogClosed}
         @opened=${this._handleOpened}
-        .escapeKeyAction=${this._isEscapeEnabled ? undefined : ""}
-        .heading=${title}
-        hideActions
-        flexContent
+        ?prevent-scrim-close=${!this._isEscapeEnabled}
+        flexcontent
       >
-        <ha-dialog-header slot="heading">
+        <ha-dialog-header slot="header">
           ${showCloseIcon
             ? html`
                 <ha-icon-button
                   slot="navigationIcon"
-                  dialogAction="cancel"
+                  data-dialog="close"
                   .label=${this.hass.localize("ui.common.close")}
                   .path=${mdiClose}
                 ></ha-icon-button>
@@ -560,7 +567,7 @@ export class MoreInfoDialog extends LitElement {
             <div
               class="content"
               tabindex="-1"
-              dialogInitialFocus
+              autofocus
               @show-child-view=${this._showChildView}
               @entity-entry-updated=${this._entryUpdated}
               @toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
@@ -580,7 +587,6 @@ export class MoreInfoDialog extends LitElement {
                   : this._currView === "info"
                     ? html`
                         <ha-more-info-info
-                          dialogInitialFocus
                           .hass=${this.hass}
                           .entityId=${this._entityId}
                           .entry=${this._entry}
@@ -618,7 +624,7 @@ export class MoreInfoDialog extends LitElement {
             </div>
           `
         )}
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -674,13 +680,7 @@ export class MoreInfoDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
-          --vertical-align-dialog: flex-start;
-          --dialog-surface-margin-top: max(
-            var(--ha-space-10),
-            var(--safe-area-inset-top, var(--ha-space-0))
-          );
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
 
@@ -703,30 +703,6 @@ export class MoreInfoDialog extends LitElement {
           display: block;
         }
 
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          /* When in fullscreen dialog should be attached to top */
-          ha-dialog {
-            --dialog-surface-margin-top: var(--ha-space-0);
-          }
-        }
-
-        @media all and (min-width: 600px) and (min-height: 501px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 580px;
-            --mdc-dialog-max-width: 580px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-
-          .main-title {
-            cursor: default;
-          }
-
-          :host([large]) ha-dialog {
-            --mdc-dialog-min-width: 90vw;
-            --mdc-dialog-max-width: 90vw;
-          }
-        }
-
         .title {
           display: flex;
           flex-direction: column;