Migrate config-cloud dialog(s) to wa

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -8,7 +8,7 @@ import { computeStateDomain } from "../../../../common/entity/compute_state_doma
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-button";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-select";
 import type {
   HaSelectOption,
@@ -16,6 +16,7 @@ import type {
 } from "../../../../components/ha-select";
 import "../../../../components/ha-textarea";
 import type { HaTextArea } from "../../../../components/ha-textarea";
+import "../../../../components/ha-wa-dialog";
 import { showAutomationEditor } from "../../../../data/automation";
 import { MediaPlayerEntityFeature } from "../../../../data/media-player";
 import { convertTextToSpeech } from "../../../../data/tts";
@@ -30,6 +31,8 @@ export class DialogTryTts extends LitElement {
 
   @state() private _loadingExample = false;
 
+  @state() private _open = false;
+
   @state() private _params?: TryTtsDialogParams;
 
   @query("#message") private _messageInput?: HaTextArea;
@@ -50,9 +53,14 @@ export class DialogTryTts extends LitElement {
 
   public showDialog(params: TryTtsDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -82,20 +90,20 @@ export class DialogTryTts extends LitElement {
     });
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.cloud.account.tts.dialog.header")
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.cloud.account.tts.dialog.header"
         )}
+        width="medium"
+        @closed=${this._dialogClosed}
       >
         <div>
           <ha-textarea
             autogrow
             id="message"
+            autofocus
             .label=${this.hass.localize(
               "ui.panel.config.cloud.account.tts.dialog.message"
             )}
@@ -118,26 +126,33 @@ export class DialogTryTts extends LitElement {
           >
           </ha-select>
         </div>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._playExample}
-          .disabled=${this._loadingExample}
-        >
-          <ha-svg-icon slot="start" .path=${mdiPlayCircleOutline}></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")}
-        </ha-button>
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          .disabled=${target === "browser"}
-          @click=${this._createAutomation}
-        >
-          <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.cloud.account.tts.dialog.create_automation"
-          )}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            slot="secondaryAction"
+            .disabled=${target === "browser"}
+            @click=${this._createAutomation}
+          >
+            <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.tts.dialog.create_automation"
+            )}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._playExample}
+            .disabled=${this._loadingExample}
+          >
+            <ha-svg-icon
+              slot="start"
+              .path=${mdiPlayCircleOutline}
+            ></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.cloud.account.tts.dialog.play"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -223,9 +238,6 @@ export class DialogTryTts extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-        }
         ha-textarea,
         ha-select {
           display: block;

src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts

@@ -6,8 +6,9 @@ import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import { obfuscateUrl } from "../../../../util/url";
@@ -19,13 +20,21 @@ class DialogCloudAlreadyConnected extends LitElement {
 
   @state() private _params?: CloudAlreadyConnectedDialogParams;
 
+  @state() private _open = false;
+
   @state() private _obfuscateIp = true;
 
   public showDialog(params: CloudAlreadyConnectedDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._params?.closeDialog?.();
     this._params = undefined;
     this._obfuscateIp = true;
@@ -39,15 +48,14 @@ class DialogCloudAlreadyConnected extends LitElement {
     const { details } = this._params;
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.cloud.dialog_already_connected.heading"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.cloud.dialog_already_connected.heading"
         )}
+        @closed=${this._dialogClosed}
+        width="medium"
       >
         <div class="intro">
           <span>
@@ -131,19 +139,21 @@ class DialogCloudAlreadyConnected extends LitElement {
           )}
         </ha-alert>
 
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="secondaryAction"
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button @click=${this._logInHere} slot="primaryAction">
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_already_connected.login_here"
-          )}
-        </ha-button>
-      </ha-dialog>
+        <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._logInHere}>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_already_connected.login_here"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -160,9 +170,6 @@ class DialogCloudAlreadyConnected extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 535px;
-        }
         .intro b {
           display: block;
           margin-top: 16px;

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -3,10 +3,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../../../components/ha-button";
+import "../../../../components/ha-wa-dialog";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
 
 @customElement("dialog-cloud-certificate")
@@ -15,11 +16,19 @@ class DialogCloudCertificate extends LitElement {
 
   @state() private _params?: CloudCertificateDialogParams;
 
+  @state() private _open = false;
+
   public showDialog(params: CloudCertificateDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -31,16 +40,14 @@ class DialogCloudCertificate extends LitElement {
     const { certificateInfo } = this._params;
 
     return html`
-      <ha-dialog
-        open
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.cloud.dialog_certificate.certificate_information"
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.panel.config.cloud.dialog_certificate.certificate_information"
         )}
+        @closed=${this._dialogClosed}
+        width="medium"
       >
         <div>
           <p>
@@ -74,12 +81,14 @@ class DialogCloudCertificate extends LitElement {
           </ul>
         </div>
 
-        <ha-button @click=${this.closeDialog} slot="primaryAction">
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_certificate.close"
-          )}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button slot="primaryAction" @click=${this.closeDialog}>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_certificate.close"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -87,9 +96,6 @@ class DialogCloudCertificate extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 535px;
-        }
         .break-word {
           overflow-wrap: break-word;
         }

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -3,7 +3,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -12,6 +12,7 @@ import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 
 import "../../../../components/ha-button";
 import "../../../../components/ha-copy-textfield";
+import "../../../../components/ha-wa-dialog";
 
 @customElement("dialog-manage-cloudhook")
 export class DialogManageCloudhook extends LitElement {
@@ -19,11 +20,19 @@ export class DialogManageCloudhook extends LitElement {
 
   @state() private _params?: WebhookDialogParams;
 
+  @state() private _open = false;
+
   public showDialog(params: WebhookDialogParams) {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -41,17 +50,15 @@ export class DialogManageCloudhook extends LitElement {
           )
         : documentationUrl(this.hass!, `/integrations/${webhook.domain}/`);
     return html`
-      <ha-dialog
-        open
-        hideActions
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass!,
-          this.hass!.localize(
-            "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
-            { name: webhook.name }
-          )
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass!.localize(
+          "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
+          { name: webhook.name }
         )}
+        @closed=${this._dialogClosed}
+        width="large"
       >
         <div>
           <p>
@@ -87,21 +94,25 @@ export class DialogManageCloudhook extends LitElement {
           ></ha-copy-textfield>
         </div>
 
-        <ha-button
-          href=${docsUrl}
-          target="_blank"
-          rel="noreferrer"
-          slot="secondaryAction"
-          appearance="plain"
-        >
-          ${this.hass!.localize(
-            "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
-          )}
-        </ha-button>
-        <ha-button @click=${this.closeDialog} slot="primaryAction">
-          ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
-        </ha-button>
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            href=${docsUrl}
+            target="_blank"
+            rel="noreferrer"
+            appearance="plain"
+          >
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+            )}
+          </ha-button>
+          <ha-button slot="primaryAction" @click=${this.closeDialog}>
+            ${this.hass!.localize(
+              "ui.panel.config.cloud.dialog_cloudhook.close"
+            )}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -129,9 +140,6 @@ export class DialogManageCloudhook extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        ha-dialog {
-          width: 650px;
-        }
         button.link {
           color: var(--primary-color);
           text-decoration: none;

src/panels/lovelace/hui-root.ts

@@ -635,12 +635,8 @@ class HUIRoot extends LitElement {
     `;
   }
 
-  private _handleContainerScroll = () => {
-    const viewRoot = this._viewRoot;
-    this.toggleAttribute(
-      "scrolled",
-      viewRoot ? viewRoot.scrollTop !== 0 : false
-    );
+  private _handleWindowScroll = () => {
+    this.toggleAttribute("scrolled", window.scrollY !== 0);
   };
 
   private _locationChanged = () => {
@@ -671,7 +667,7 @@ class HUIRoot extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this._viewRoot?.addEventListener("scroll", this._handleContainerScroll, {
+    window.addEventListener("scroll", this._handleWindowScroll, {
       passive: true,
     });
     this._handleUrlChanged();
@@ -682,7 +678,7 @@ class HUIRoot extends LitElement {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._viewRoot?.addEventListener("scroll", this._handleContainerScroll, {
+    window.addEventListener("scroll", this._handleWindowScroll, {
       passive: true,
     });
     window.addEventListener("popstate", this._handlePopState);
@@ -693,14 +689,10 @@ class HUIRoot extends LitElement {
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._viewRoot?.removeEventListener("scroll", this._handleContainerScroll);
+    window.removeEventListener("scroll", this._handleWindowScroll);
     window.removeEventListener("popstate", this._handlePopState);
     window.removeEventListener("location-changed", this._locationChanged);
-    const viewRoot = this._viewRoot;
-    this.toggleAttribute(
-      "scrolled",
-      viewRoot ? viewRoot.scrollTop !== 0 : false
-    );
+    this.toggleAttribute("scrolled", window.scrollY !== 0);
     // Re-enable history scroll restoration when leaving the page
     window.history.scrollRestoration = "auto";
   }
@@ -833,12 +825,9 @@ class HUIRoot extends LitElement {
             (this._restoreScroll && this._viewScrollPositions[newSelectView]) ||
             0;
           this._restoreScroll = false;
-          requestAnimationFrame(() => {
-            const viewRoot = this._viewRoot;
-            if (viewRoot) {
-              viewRoot.scrollTo({ behavior: "auto", top: position });
-            }
-          });
+          requestAnimationFrame(() =>
+            scrollTo({ behavior: "auto", top: position })
+          );
         }
         this._selectView(newSelectView, force);
       });
@@ -1163,7 +1152,7 @@ class HUIRoot extends LitElement {
       const path = this.config.views[viewIndex].path || viewIndex;
       this._navigateToView(path);
     } else if (!this._editMode) {
-      this._viewRoot?.scrollTo({ behavior: "smooth", top: 0 });
+      scrollTo({ behavior: "smooth", top: 0 });
     }
   }
 
@@ -1174,8 +1163,7 @@ class HUIRoot extends LitElement {
 
     // Save scroll position of current view
     if (this._curView != null) {
-      const viewRoot = this._viewRoot;
-      this._viewScrollPositions[this._curView] = viewRoot?.scrollTop ?? 0;
+      this._viewScrollPositions[this._curView] = window.scrollY;
     }
 
     viewIndex = viewIndex === undefined ? 0 : viewIndex;
@@ -1481,14 +1469,9 @@ class HUIRoot extends LitElement {
         hui-view-container {
           position: relative;
           display: flex;
-          height: calc(
-            100vh - var(--header-height) - var(--safe-area-inset-top) - var(
-                --view-container-padding-top,
-                0px
-              )
-          );
+          min-height: 100vh;
           box-sizing: border-box;
-          margin-top: calc(
+          padding-top: calc(
             var(--header-height) + var(--safe-area-inset-top) +
               var(--view-container-padding-top, 0px)
           );
@@ -1511,12 +1494,7 @@ class HUIRoot extends LitElement {
          * In edit mode we have the tab bar on a new line *
          */
         hui-view-container.has-tab-bar {
-          height: calc(
-            100vh - var(--header-height, 56px) - calc(
-                var(--tab-bar-height, 56px) - 2px
-              ) - var(--safe-area-inset-top, 0px)
-          );
-          margin-top: calc(
+          padding-top: calc(
             var(--header-height, 56px) +
               calc(var(--tab-bar-height, 56px) - 2px) +
               var(--safe-area-inset-top, 0px)

src/panels/lovelace/views/hui-sections-view.ts

@@ -407,20 +407,12 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     }
   }
 
-  private _getScrollContainer(): Element | null {
-    // The scroll container is the hui-view-container parent
-    return this.closest("hui-view-container");
-  }
-
   private _toggleView() {
-    const scrollContainer = this._getScrollContainer();
-    const scrollTop = scrollContainer?.scrollTop ?? 0;
-
     // Save current scroll position
     if (this._sidebarTabActive) {
-      this._sidebarScrollTop = scrollTop;
+      this._sidebarScrollTop = window.scrollY;
     } else {
-      this._contentScrollTop = scrollTop;
+      this._contentScrollTop = window.scrollY;
     }
 
     this._sidebarTabActive = !this._sidebarTabActive;
@@ -436,7 +428,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       const scrollY = this._sidebarTabActive
         ? this._sidebarScrollTop
         : this._contentScrollTop;
-      scrollContainer?.scrollTo(0, scrollY);
+      window.scrollTo(0, scrollY);
     });
   }
 

src/panels/lovelace/views/hui-view-container.ts

@@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { listenMediaQuery } from "../../../common/dom/media_query";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import { haStyleScrollbar } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 
 type BackgroundConfig = LovelaceViewConfig["background"];
@@ -23,7 +22,6 @@ class HuiViewContainer extends LitElement {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this.classList.add("ha-scrollbar");
     this._setUpMediaQuery();
     this._applyTheme();
   }
@@ -76,16 +74,11 @@ class HuiViewContainer extends LitElement {
     }
   }
 
-  static styles = [
-    haStyleScrollbar,
-    css`
-      :host {
-        display: block;
-        height: 100%;
-        -webkit-overflow-scrolling: touch;
-      }
-    `,
-  ];
+  static styles = css`
+    :host {
+      display: relative;
+    }
+  `;
 }
 
 declare global {

src/resources/styles.ts

@@ -224,20 +224,17 @@ export const haStyleDialogFixedTop = css`
 `;
 
 export const haStyleScrollbar = css`
-  .ha-scrollbar::-webkit-scrollbar,
-  :host(.ha-scrollbar)::-webkit-scrollbar {
+  .ha-scrollbar::-webkit-scrollbar {
     width: 0.4rem;
     height: 0.4rem;
   }
 
-  .ha-scrollbar::-webkit-scrollbar-thumb,
-  :host(.ha-scrollbar)::-webkit-scrollbar-thumb {
+  .ha-scrollbar::-webkit-scrollbar-thumb {
     border-radius: var(--ha-border-radius-sm);
     background: var(--scrollbar-thumb-color);
   }
 
-  .ha-scrollbar,
-  :host(.ha-scrollbar) {
+  .ha-scrollbar {
     overflow-y: auto;
     scrollbar-color: var(--scrollbar-thumb-color) transparent;
     scrollbar-width: thin;