From 20dd3ca21c9e30f85fa82e01fa1f354f431e6d15 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 9 Jun 2020 22:31:27 +0200
Subject: [PATCH] data-entry-flow: replace paper-dialog with mwc-dialog (#6129)

---
 src/components/ha-dialog.ts                   |   3 +
 .../config-flow/dialog-data-entry-flow.ts     | 204 ++++++++----------
 src/dialogs/config-flow/styles.ts             |  15 +-
 .../config/person/dialog-person-detail.ts     |   6 +-
 4 files changed, 111 insertions(+), 117 deletions(-)

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 1af4d63882..92c17b0fa8 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -35,6 +35,9 @@ export class HaDialog extends MwcDialog {
           display: block;
           height: 20px;
         }
+        .mdc-dialog__content {
+          padding: var(--dialog-content-padding, 20px 24px);
+        }
         .header_button {
           position: absolute;
           right: 16px;
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index 8ee7b60587..a92f7e36d9 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -14,8 +14,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import "../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-dialog";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
 import {
@@ -27,7 +26,6 @@ import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
 } from "../../data/device_registry";
-import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
@@ -90,7 +88,6 @@ class DataEntryFlowDialog extends LitElement {
       // We only load the handlers once
       if (this._handlers === undefined) {
         this._loading = true;
-        this.updateComplete.then(() => this._scheduleCenterDialog());
         try {
           this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
         } finally {
@@ -98,7 +95,6 @@ class DataEntryFlowDialog extends LitElement {
         }
       }
       await this.updateComplete;
-      this._scheduleCenterDialog();
       return;
     }
 
@@ -115,9 +111,6 @@ class DataEntryFlowDialog extends LitElement {
 
     this._processStep(step);
     this._loading = false;
-    // When the flow changes, center the dialog.
-    // Don't do it on each step or else the dialog keeps bouncing.
-    this._scheduleCenterDialog();
   }
 
   protected render(): TemplateResult {
@@ -126,80 +119,84 @@ class DataEntryFlowDialog extends LitElement {
     }
 
     return html`
-      <ha-paper-dialog
-        with-backdrop
-        opened
-        modal
-        @opened-changed=${this._openedChanged}
+      <ha-dialog
+        open
+        @closing=${this._close}
+        scrimClickAction
+        escapeKeyAction
+        hideActions
       >
-        ${this._loading || (this._step === null && this._handlers === undefined)
-          ? html`
-              <step-flow-loading
-                .label=${this.hass.localize(
-                  "ui.panel.config.integrations.config_flow.loading_first_time"
-                )}
-              ></step-flow-loading>
-            `
-          : this._step === undefined
-          ? // When we are going to next step, we render 1 round of empty
-            // to reset the element.
-            ""
-          : html`
-              <ha-icon-button
-                aria-label=${this.hass.localize(
-                  "ui.panel.config.integrations.config_flow.dismiss"
-                )}
-                icon="hass:close"
-                dialog-dismiss
-              ></ha-icon-button>
-              ${this._step === null
-                ? // Show handler picker
-                  html`
-                    <step-flow-pick-handler
-                      .flowConfig=${this._params.flowConfig}
-                      .hass=${this.hass}
-                      .handlers=${this._handlers}
-                      .showAdvanced=${this._params.showAdvanced}
-                    ></step-flow-pick-handler>
-                  `
-                : this._step.type === "form"
-                ? html`
-                    <step-flow-form
-                      .flowConfig=${this._params.flowConfig}
-                      .step=${this._step}
-                      .hass=${this.hass}
-                    ></step-flow-form>
-                  `
-                : this._step.type === "external"
-                ? html`
-                    <step-flow-external
-                      .flowConfig=${this._params.flowConfig}
-                      .step=${this._step}
-                      .hass=${this.hass}
-                    ></step-flow-external>
-                  `
-                : this._step.type === "abort"
-                ? html`
-                    <step-flow-abort
-                      .flowConfig=${this._params.flowConfig}
-                      .step=${this._step}
-                      .hass=${this.hass}
-                    ></step-flow-abort>
-                  `
-                : this._devices === undefined || this._areas === undefined
-                ? // When it's a create entry result, we will fetch device & area registry
-                  html` <step-flow-loading></step-flow-loading> `
-                : html`
-                    <step-flow-create-entry
-                      .flowConfig=${this._params.flowConfig}
-                      .step=${this._step}
-                      .hass=${this.hass}
-                      .devices=${this._devices}
-                      .areas=${this._areas}
-                    ></step-flow-create-entry>
-                  `}
-            `}
-      </ha-paper-dialog>
+        <div>
+          ${this._loading ||
+          (this._step === null && this._handlers === undefined)
+            ? html`
+                <step-flow-loading
+                  .label=${this.hass.localize(
+                    "ui.panel.config.integrations.config_flow.loading_first_time"
+                  )}
+                ></step-flow-loading>
+              `
+            : this._step === undefined
+            ? // When we are going to next step, we render 1 round of empty
+              // to reset the element.
+              ""
+            : html`
+                <ha-icon-button
+                  aria-label=${this.hass.localize(
+                    "ui.panel.config.integrations.config_flow.dismiss"
+                  )}
+                  icon="hass:close"
+                  dialogAction="close"
+                ></ha-icon-button>
+                ${this._step === null
+                  ? // Show handler picker
+                    html`
+                      <step-flow-pick-handler
+                        .flowConfig=${this._params.flowConfig}
+                        .hass=${this.hass}
+                        .handlers=${this._handlers}
+                        .showAdvanced=${this._params.showAdvanced}
+                      ></step-flow-pick-handler>
+                    `
+                  : this._step.type === "form"
+                  ? html`
+                      <step-flow-form
+                        .flowConfig=${this._params.flowConfig}
+                        .step=${this._step}
+                        .hass=${this.hass}
+                      ></step-flow-form>
+                    `
+                  : this._step.type === "external"
+                  ? html`
+                      <step-flow-external
+                        .flowConfig=${this._params.flowConfig}
+                        .step=${this._step}
+                        .hass=${this.hass}
+                      ></step-flow-external>
+                    `
+                  : this._step.type === "abort"
+                  ? html`
+                      <step-flow-abort
+                        .flowConfig=${this._params.flowConfig}
+                        .step=${this._step}
+                        .hass=${this.hass}
+                      ></step-flow-abort>
+                    `
+                  : this._devices === undefined || this._areas === undefined
+                  ? // When it's a create entry result, we will fetch device & area registry
+                    html` <step-flow-loading></step-flow-loading> `
+                  : html`
+                      <step-flow-create-entry
+                        .flowConfig=${this._params.flowConfig}
+                        .step=${this._step}
+                        .hass=${this.hass}
+                        .devices=${this._devices}
+                        .areas=${this._areas}
+                      ></step-flow-create-entry>
+                    `}
+              `}
+        </div>
+      </ha-dialog>
     `;
   }
 
@@ -225,18 +222,6 @@ class DataEntryFlowDialog extends LitElement {
         this._areas = [];
       }
     }
-
-    if (changedProps.has("_devices") && this._dialog) {
-      this._scheduleCenterDialog();
-    }
-  }
-
-  private _scheduleCenterDialog() {
-    setTimeout(() => this._dialog.center(), 0);
-  }
-
-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   private async _fetchDevices(configEntryId) {
@@ -310,16 +295,13 @@ class DataEntryFlowDialog extends LitElement {
     }
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    // Closed dialog by clicking on the overlay
-    if (!ev.detail.value) {
-      if (this._step) {
-        this._flowDone();
-      } else if (this._step === null) {
-        // Flow aborted during picking flow
-        this._step = undefined;
-        this._params = undefined;
-      }
+  private _close(): void {
+    if (this._step) {
+      this._flowDone();
+    } else if (this._step === null) {
+      // Flow aborted during picking flow
+      this._step = undefined;
+      this._params = undefined;
     }
   }
 
@@ -327,18 +309,14 @@ class DataEntryFlowDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-paper-dialog {
-          max-width: 600px;
-        }
-        ha-paper-dialog > * {
-          margin: 0;
-          display: block;
-          padding: 0;
+        ha-dialog {
+          --dialog-content-padding: 0;
         }
         ha-icon-button {
-          display: inline-block;
-          padding: 8px;
-          float: right;
+          padding: 16px;
+          position: absolute;
+          top: 0;
+          right: 0;
         }
       `,
     ];
diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts
index 0e8b6e2609..b6e2b8d831 100644
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -2,8 +2,21 @@ import { css } from "lit-element";
 
 export const configFlowContentStyles = css`
   h2 {
-    margin-top: 24px;
+    margin: 24px 0 0;
     padding: 0 24px;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: var(
+      --mdc-typography-headline6-font-family,
+      var(--mdc-typography-font-family, Roboto, sans-serif)
+    );
+    font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
+    line-height: var(--mdc-typography-headline6-line-height, 2rem);
+    font-weight: var(--mdc-typography-headline6-font-weight, 500);
+    letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
+    text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
+    text-transform: var(--mdc-typography-headline6-text-transform, inherit);
+    box-sizing: border-box;
   }
 
   .content {
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 13c957dea5..fa784f1793 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -65,9 +65,9 @@ class DialogPersonDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing="${this._close}"
-        scrimClickAction=""
-        escapeKeyAction=""
+        @closing=${this._close}
+        scrimClickAction
+        escapeKeyAction
         .heading=${createCloseHeading(
           this.hass,
           this._params.entry