Migrate all paper dialogs to mwc (#10333)

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,7 +1,5 @@
 /* eslint-disable lit/prefer-static-styles */
 import { mdiMicrophone } from "@mdi/js";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
@@ -17,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { SpeechRecognition } from "../../common/dom/speech-recognition";
 import { uid } from "../../common/util/uid";
-import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-icon-button";
 import {
   AgentInfo,
@@ -27,6 +24,9 @@ import {
 } from "../../data/conversation";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import "../../components/ha-dialog";
+import type { HaDialog } from "../../components/ha-dialog";
+import "@material/mwc-button/mwc-button";
 
 interface Message {
   who: string;
@@ -56,7 +56,7 @@ export class HaVoiceCommandDialog extends LitElement {
 
   @state() private _agentInfo?: AgentInfo;
 
-  @query("#messages", true) private messages!: PaperDialogScrollableElement;
+  @query("ha-dialog", true) private _dialog!: HaDialog;
 
   private recognition!: SpeechRecognition;
 
@@ -70,74 +70,42 @@ export class HaVoiceCommandDialog extends LitElement {
     this._agentInfo = await getAgentInfo(this.hass);
   }
 
+  public async closeDialog(): Promise<void> {
+    this._opened = false;
+    if (this.recognition) {
+      this.recognition.abort();
+    }
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render(): TemplateResult {
-    // CSS custom property mixins only work in render https://github.com/Polymer/lit-element/issues/633
+    if (!this._opened) {
+      return html``;
+    }
     return html`
-      <style>
-        paper-dialog-scrollable {
-          --paper-dialog-scrollable: {
-            -webkit-overflow-scrolling: auto;
-            max-height: 50vh !important;
-          }
-        }
-
-        paper-dialog-scrollable.can-scroll {
-          --paper-dialog-scrollable: {
-            -webkit-overflow-scrolling: touch;
-            max-height: 50vh !important;
-          }
-        }
-
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog-scrollable {
-            --paper-dialog-scrollable: {
-              -webkit-overflow-scrolling: auto;
-              max-height: calc(100vh - 175px) !important;
-            }
-          }
-
-          paper-dialog-scrollable.can-scroll {
-            --paper-dialog-scrollable: {
-              -webkit-overflow-scrolling: touch;
-              max-height: calc(100vh - 175px) !important;
-            }
-          }
-        }
-      </style>
-      <ha-paper-dialog
-        with-backdrop
-        .opened=${this._opened}
-        @opened-changed=${this._openedChanged}
-      >
-        ${this._agentInfo && this._agentInfo.onboarding
-          ? html`
-              <div class="onboarding">
-                ${this._agentInfo.onboarding.text}
-                <div class="side-by-side" @click=${this._completeOnboarding}>
-                  <a
-                    class="button"
-                    href=${this._agentInfo.onboarding.url}
-                    target="_blank"
-                    rel="noreferrer"
-                    ><mwc-button unelevated
-                      >${this.hass.localize("ui.common.yes")}!</mwc-button
-                    ></a
-                  >
-                  <mwc-button outlined
-                    >${this.hass.localize("ui.common.no")}</mwc-button
-                  >
+      <ha-dialog open @closed=${this.closeDialog}>
+        <div>
+          ${this._agentInfo && this._agentInfo.onboarding
+            ? html`
+                <div class="onboarding">
+                  ${this._agentInfo.onboarding.text}
+                  <div class="side-by-side" @click=${this._completeOnboarding}>
+                    <a
+                      class="button"
+                      href=${this._agentInfo.onboarding.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      ><mwc-button unelevated
+                        >${this.hass.localize("ui.common.yes")}!</mwc-button
+                      ></a
+                    >
+                    <mwc-button outlined
+                      >${this.hass.localize("ui.common.no")}</mwc-button
+                    >
+                  </div>
                 </div>
-              </div>
-            `
-          : ""}
-        <paper-dialog-scrollable
-          id="messages"
-          class=${classMap({
-            "top-border": Boolean(
-              this._agentInfo && this._agentInfo.onboarding
-            ),
-          })}
-        >
+              `
+            : ""}
           ${this._conversation.map(
             (message) => html`
               <div class=${this._computeMessageClasses(message)}>
@@ -157,8 +125,8 @@ export class HaVoiceCommandDialog extends LitElement {
                 </div>
               `
             : ""}
-        </paper-dialog-scrollable>
-        <div class="input">
+        </div>
+        <div class="input" slot="primaryAction">
           <paper-input
             @keyup=${this._handleKeyUp}
             .label=${this.hass.localize(
@@ -200,7 +168,7 @@ export class HaVoiceCommandDialog extends LitElement {
               `
             : ""}
         </div>
-      </ha-paper-dialog>
+      </ha-dialog>
     `;
   }
 
@@ -346,18 +314,7 @@ export class HaVoiceCommandDialog extends LitElement {
   }
 
   private _scrollMessagesBottom() {
-    this.messages.scrollTarget.scrollTop =
-      this.messages.scrollTarget.scrollHeight;
-    if (this.messages.scrollTarget.scrollTop === 0) {
-      fireEvent(this.messages, "iron-resize");
-    }
-  }
-
-  private _openedChanged(ev: CustomEvent) {
-    this._opened = ev.detail.value;
-    if (!this._opened && this.recognition) {
-      this.recognition.abort();
-    }
+    this._dialog.scrollToPos(0, 99999);
   }
 
   private _computeMessageClasses(message: Message) {
@@ -368,10 +325,6 @@ export class HaVoiceCommandDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        :host {
-          z-index: 103;
-        }
-
         ha-icon-button {
           color: var(--secondary-text-color);
         }
@@ -380,13 +333,12 @@ export class HaVoiceCommandDialog extends LitElement {
           color: var(--primary-color);
         }
 
-        .input {
-          margin: 0 0 16px 0;
+        ha-dialog {
+          --primary-action-button-flex: 1;
+          --secondary-action-button-flex: 0;
+          --mdc-dialog-max-width: 450px;
         }
 
-        ha-paper-dialog {
-          width: 450px;
-        }
         a.button {
           text-decoration: none;
         }
@@ -394,16 +346,7 @@ export class HaVoiceCommandDialog extends LitElement {
           width: 100%;
         }
         .onboarding {
-          padding: 0 24px;
-        }
-        paper-dialog-scrollable.top-border::before {
-          content: "";
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: 1px;
-          background: var(--divider-color);
+          border-bottom: 1px solid var(--divider-color);
         }
         .side-by-side {
           display: flex;