Use prevent scrim close on settings form/editor dialogs, add cancel as secondary action (#29656)

* Use prevent scrim close on registry dialogs (forms/editors)

* Add to va pipeline

* Add cancel button

* Add cancel button

* Add cancel

* Prevent scrim close, easily closable, undesired effect

* Prevent scrim closure

* Prevent scrim closure

* Delete or cancel, not both

* Remove cancel, 2 actions per dialog

* Prevent scrim closure

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -344,6 +344,7 @@ class DialogAreaDetail
         header-title=${entry
           ? this.hass.localize("ui.panel.config.areas.editor.update_area")
           : this.hass.localize("ui.panel.config.areas.editor.create_area")}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <ha-suggest-with-ai-button
@@ -374,7 +375,13 @@ class DialogAreaDetail
                   ${this.hass.localize("ui.common.delete")}
                 </ha-button>
               `
-            : nothing}
+            : html`<ha-button
+                appearance="plain"
+                slot="secondaryAction"
+                @click=${this.closeDialog}
+              >
+                ${this.hass.localize("ui.common.cancel")}
+              </ha-button>`}
           <ha-button
             slot="primaryAction"
             @click=${this._updateEntry}

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -112,6 +112,7 @@ class DialogFloorDetail extends LitElement {
         header-title=${entry
           ? this.hass.localize("ui.panel.config.floors.editor.update_floor")
           : this.hass.localize("ui.panel.config.floors.editor.create_floor")}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <div>

src/panels/config/backup/dialogs/dialog-local-backup-location.ts

@@ -69,6 +69,7 @@ class LocalBackupLocationDialog extends LitElement {
         header-title=${this.hass.localize(
           `ui.panel.config.backup.dialogs.local_backup_location.title`
         )}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         ${this._error

src/panels/config/category/dialog-category-registry-detail.ts

@@ -71,6 +71,7 @@ class DialogCategoryDetail extends LitElement {
         header-title=${entry
           ? this.hass.localize("ui.panel.config.category.editor.edit")
           : this.hass.localize("ui.panel.config.category.editor.create")}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         ${this._error

src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts

@@ -74,6 +74,7 @@ class DialogZHAChangeChannel extends LitElement {
         header-title=${this.hass.localize(
           "ui.panel.config.zha.change_channel_dialog.title"
         )}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <ha-alert alert-type="warning">

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts

@@ -105,6 +105,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
         .hass=${this.hass}
         .open=${this._open}
         header-title=${dialogTitle}
+        prevent-scrim-close
         @closed=${this.handleDialogClosed}
       >
         <ha-icon-button

src/panels/config/labels/dialog-label-detail.ts

@@ -79,6 +79,7 @@ class DialogLabelDetail
         header-title=${this._params.entry
           ? this._params.entry.name || this._params.entry.label_id
           : this.hass!.localize("ui.dialogs.label-detail.new_label")}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <div>
@@ -135,7 +136,15 @@ class DialogLabelDetail
                   ${this.hass!.localize("ui.common.delete")}
                 </ha-button>
               `
-            : nothing}
+            : html`
+                <ha-button
+                  appearance="plain"
+                  slot="secondaryAction"
+                  @click=${this.closeDialog}
+                >
+                  ${this.hass.localize("ui.common.cancel")}
+                </ha-button>
+              `}
           <ha-button
             slot="primaryAction"
             @click=${this._updateEntry}

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -69,6 +69,16 @@ export class DialogLovelaceDashboardDetail extends LitElement {
 
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
+    const cancelButton = html`
+      <ha-button
+        appearance="plain"
+        slot="secondaryAction"
+        @click=${this.closeDialog}
+      >
+        ${this.hass.localize("ui.common.cancel")}
+      </ha-button>
+    `;
+
     return html`
       <ha-dialog
         .hass=${this.hass}
@@ -81,6 +91,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
           : this.hass.localize(
               "ui.panel.config.lovelace.dashboards.detail.new_dashboard"
             )}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <div>
@@ -117,9 +128,9 @@ export class DialogLovelaceDashboardDetail extends LitElement {
                         )}
                       </ha-button>
                     `
-                  : nothing}
+                  : cancelButton}
               `
-            : nothing}
+            : cancelButton}
           <ha-button
             slot="primaryAction"
             @click=${this._updateDashboard}

src/panels/config/person/dialog-person-detail.ts

@@ -253,14 +253,13 @@ class DialogPersonDetail extends LitElement implements HassDialog {
                   ${this.hass!.localize("ui.panel.config.person.detail.delete")}
                 </ha-button>
               `
-            : nothing}
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass!.localize("ui.common.cancel")}
-          </ha-button>
+            : html`<ha-button
+                slot="secondaryAction"
+                appearance="plain"
+                @click=${this.closeDialog}
+              >
+                ${this.hass!.localize("ui.common.cancel")}
+              </ha-button>`}
           <ha-button
             slot="primaryAction"
             @click=${this._updateEntry}

src/panels/config/users/dialog-user-detail.ts

@@ -244,33 +244,26 @@ class DialogUserDetail extends LitElement {
         </div>
 
         <ha-dialog-footer slot="footer">
-        <ha-button
-          slot="secondaryAction"
-          variant="danger"
-          appearance="plain"
-          @click=${this._deleteEntry}
-            .disabled=${
-              this._submitting || user.system_generated || user.is_owner
-            }
-        >
-          ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
-        </ha-button>
-        <ha-button
+          <ha-button
             slot="secondaryAction"
-          appearance="plain"
-          @click=${this._close}
-        >
-          ${this.hass!.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-            .disabled=${
-              !this._name || this._submitting || user.system_generated
-            }
-        >
-          ${this.hass!.localize("ui.common.save")}
-        </ha-button>
+            variant="danger"
+            appearance="plain"
+            @click=${this._deleteEntry}
+              .disabled=${
+                this._submitting || user.system_generated || user.is_owner
+              }
+          >
+            ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+              .disabled=${
+                !this._name || this._submitting || user.system_generated
+              }
+          >
+            ${this.hass!.localize("ui.common.save")}
+          </ha-button>
         </ha-dialog-footer>
       </ha-dialog>
     `;

src/panels/config/voice-assistants/dialog-expose-entity.ts

@@ -92,6 +92,7 @@ class DialogExposeEntity extends LitElement {
         width="medium"
         header-title=${header}
         header-subtitle=${subtitle}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <search-input

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -146,6 +146,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
         .hass=${this.hass}
         .open=${this._open}
         header-title=${title}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         ${!this._hideWakeWord ||
@@ -223,6 +224,13 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
               ></assist-pipeline-detail-wakeword>`}
         </div>
         <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._updatePipeline}

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -72,6 +72,7 @@ class DialogHomeZoneDetail extends LitElement {
         header-title=${this.hass!.localize("ui.common.edit_item", {
           name: this._data.name,
         })}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <ha-form

src/panels/config/zone/dialog-zone-detail.ts

@@ -94,6 +94,7 @@ class DialogZoneDetail extends LitElement {
               name: this._params.entry.name,
             })
           : this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
+        prevent-scrim-close
         @closed=${this._dialogClosed}
       >
         <ha-form