Make entry flow dialog modal (#4440)

* Make entry flow dialog modal

* Add close button

* Update dialog-data-entry-flow.ts

* Fix aria-label

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -11,6 +11,7 @@ import {
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-tooltip/paper-tooltip";
+import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-spinner/paper-spinner";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
@@ -124,6 +125,7 @@ class DataEntryFlowDialog extends LitElement {
       <ha-paper-dialog
         with-backdrop
         opened
+        modal
         @opened-changed=${this._openedChanged}
       >
         ${this._loading || (this._step === null && this._handlers === undefined)
@@ -134,7 +136,15 @@ class DataEntryFlowDialog extends LitElement {
           ? // When we are going to next step, we render 1 round of empty
             // to reset the element.
             ""
-          : this._step === null
+          : html`
+              <paper-icon-button
+                aria-label=${this.hass.localize(
+                  "ui.panel.config.integrations.config_flow.dismiss"
+                )}
+                icon="hass:close"
+                dialog-dismiss
+              ></paper-icon-button>
+              ${this._step === null
                 ? // Show handler picker
                   html`
                     <step-flow-pick-handler
@@ -182,6 +192,7 @@ class DataEntryFlowDialog extends LitElement {
                       .areas=${this._areas}
                     ></step-flow-create-entry>
                   `}
+            `}
       </ha-paper-dialog>
     `;
   }
@@ -318,6 +329,12 @@ class DataEntryFlowDialog extends LitElement {
           display: block;
           padding: 0;
         }
+        paper-icon-button {
+          display: inline-block;
+          padding: 8px;
+          margin: 16px 16px 0 0;
+          float: right;
+        }
       `,
     ];
   }

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -19,6 +19,7 @@ import "../../components/ha-icon-next";
 import "../../common/search/search-input";
 import { styleMap } from "lit-html/directives/style-map";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { configFlowContentStyles } from "./styles";
 
 interface HandlerObj {
   name: string;
@@ -133,12 +134,10 @@ class StepFlowPickHandler extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
-    return css`
-      h2 {
-        margin-bottom: 2px;
-        padding-left: 16px;
-      }
+  static get styles(): CSSResult[] {
+    return [
+      configFlowContentStyles,
+      css`
         div {
           overflow: auto;
           max-height: 600px;
@@ -154,7 +153,8 @@ class StepFlowPickHandler extends LitElement {
         p > a {
           color: var(--primary-color);
         }
-    `;
+      `,
+    ];
   }
 }
 

src/translations/en.json

@@ -1373,6 +1373,7 @@
           "config_flow": {
             "aborted": "Aborted",
             "close": "Close",
+            "dismiss": "Dismiss dialog",
             "finish": "Finish",
             "submit": "Submit",
             "not_all_required_fields": "Not all required fields are filled in.",