Update create helper dialog (#15288)

src/components/ha-dialog.ts

@@ -46,7 +46,10 @@ export class HaDialog extends DialogBase {
     styles,
     css`
       .mdc-dialog {
-        --mdc-dialog-scroll-divider-color: var(--divider-color);
+        --mdc-dialog-scroll-divider-color: var(
+          --dialog-scroll-divider-color,
+          var(--divider-color)
+        );
         z-index: var(--dialog-z-index, 7);
         -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
         backdrop-filter: var(--dialog-backdrop-filter, none);

src/panels/config/helpers/dialog-helper-detail.ts

@@ -9,7 +9,8 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-list-item";
 import { getConfigFlowHandlers } from "../../../data/config_flow";
 import { createCounter } from "../../../data/counter";
 import { createInputBoolean } from "../../../data/input_boolean";
@@ -167,8 +168,9 @@ export class DialogHelperDetail extends LitElement {
             const isLoaded =
               !(domain in HELPERS) || isComponentLoaded(this.hass, domain);
             return html`
-              <mwc-list-item
+              <ha-list-item
                 .disabled=${!isLoaded}
+                hasmeta
                 .domain=${domain}
                 @request-selected=${this._domainPicked}
                 graphic="icon"
@@ -186,7 +188,8 @@ export class DialogHelperDetail extends LitElement {
                   referrerpolicy="no-referrer"
                 />
                 <span class="item-text"> ${label} </span>
-              </mwc-list-item>
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
               ${!isLoaded
                 ? html`
                     <paper-tooltip animation-delay="0"
@@ -201,9 +204,6 @@ export class DialogHelperDetail extends LitElement {
             `;
           })}
         </mwc-list>
-        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-          ${this.hass!.localize("ui.common.cancel")}
-        </mwc-button>
       `;
     }
 
@@ -214,15 +214,19 @@ export class DialogHelperDetail extends LitElement {
         class=${classMap({ "button-left": !this._domain })}
         scrimClickAction
         escapeKeyAction
-        .heading=${this._domain
+        .hideActions=${!this._domain}
-          ? this.hass.localize(
+        .heading=${createCloseHeading(
-              "ui.panel.config.helpers.dialog.create_platform",
+          this.hass,
-              "platform",
+          this._domain
-              this.hass.localize(
+            ? this.hass.localize(
-                `ui.panel.config.helpers.types.${this._domain}`
+                "ui.panel.config.helpers.dialog.create_platform",
-              ) || this._domain
+                "platform",
-            )
+                this.hass.localize(
-          : this.hass.localize("ui.panel.config.helpers.dialog.create_helper")}
+                  `ui.panel.config.helpers.types.${this._domain}`
+                ) || this._domain
+              )
+            : this.hass.localize("ui.panel.config.helpers.dialog.create_helper")
+        )}
       >
         ${content}
       </ha-dialog>
@@ -285,6 +289,22 @@ export class DialogHelperDetail extends LitElement {
         ha-dialog.button-left {
           --justify-action-buttons: flex-start;
         }
+        ha-dialog {
+          --dialog-content-padding: 0;
+          --dialog-scroll-divider-color: transparent;
+          --mdc-dialog-max-height: 60vh;
+        }
+        @media all and (min-width: 550px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 500px;
+          }
+        }
+        ha-icon-next {
+          width: 24px;
+        }
+        .form {
+          padding: 24px;
+        }
       `,
     ];
   }