Use expandable instead of advanced mode toggle (#25052)

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

@@ -403,7 +403,7 @@ export class DialogHelperDetail extends LitElement {
         ha-dialog {
           --dialog-content-padding: 0;
           --dialog-scroll-divider-color: transparent;
-          --mdc-dialog-max-height: 60vh;
+          --mdc-dialog-max-height: 90vh;
         }
         @media all and (min-width: 550px) {
           ha-dialog {

src/panels/config/helpers/forms/dialog-schedule-block-info.ts

@@ -139,7 +139,7 @@ class DialogScheduleBlockInfo extends LitElement {
         return this.hass!.localize("ui.dialogs.helper_settings.schedule.data");
       case "advanced_settings":
         return this.hass!.localize(
-          "ui.dialogs.helper_settings.schedule.advanced_settings"
+          "ui.dialogs.helper_settings.generic.advanced_settings"
         );
     }
     return "";

src/panels/config/helpers/forms/ha-counter-form.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -118,32 +119,35 @@ class HaCounterForm extends LitElement {
             "ui.dialogs.helper_settings.counter.initial"
           )}
         ></ha-textfield>
-        ${this.hass.userData?.showAdvanced
-          ? html`
-              <ha-textfield
-                .value=${this._step}
-                .configValue=${"step"}
-                type="number"
-                @input=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.counter.step"
-                )}
-              ></ha-textfield>
-              <div class="row">
-                <ha-switch
-                  .checked=${this._restore}
-                  .configValue=${"restore"}
-                  @change=${this._valueChanged}
-                >
-                </ha-switch>
-                <div>
-                  ${this.hass.localize(
-                    "ui.dialogs.helper_settings.counter.restore"
-                  )}
-                </div>
-              </div>
-            `
-          : ""}
+        <ha-expansion-panel
+          header=${this.hass.localize(
+            "ui.dialogs.helper_settings.generic.advanced_settings"
+          )}
+          outlined
+        >
+          <ha-textfield
+            .value=${this._step}
+            .configValue=${"step"}
+            type="number"
+            @input=${this._valueChanged}
+            .label=${this.hass!.localize(
+              "ui.dialogs.helper_settings.counter.step"
+            )}
+          ></ha-textfield>
+          <div class="row">
+            <ha-switch
+              .checked=${this._restore}
+              .configValue=${"restore"}
+              @change=${this._valueChanged}
+            >
+            </ha-switch>
+            <div>
+              ${this.hass.localize(
+                "ui.dialogs.helper_settings.counter.restore"
+              )}
+            </div>
+          </div>
+        </ha-expansion-panel>
       </div>
     `;
   }

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-radio";
@@ -118,58 +119,61 @@ class HaInputNumberForm extends LitElement {
             "ui.dialogs.helper_settings.input_number.max"
           )}
         ></ha-textfield>
-        ${this.hass.userData?.showAdvanced
-          ? html`
-              <div class="layout horizontal center justified">
-                ${this.hass.localize(
-                  "ui.dialogs.helper_settings.input_number.mode"
-                )}
-                <ha-formfield
-                  .label=${this.hass.localize(
-                    "ui.dialogs.helper_settings.input_number.slider"
-                  )}
-                >
-                  <ha-radio
-                    name="mode"
-                    value="slider"
-                    .checked=${this._mode === "slider"}
-                    @change=${this._modeChanged}
-                  ></ha-radio>
-                </ha-formfield>
-                <ha-formfield
-                  .label=${this.hass.localize(
-                    "ui.dialogs.helper_settings.input_number.box"
-                  )}
-                >
-                  <ha-radio
-                    name="mode"
-                    value="box"
-                    .checked=${this._mode === "box"}
-                    @change=${this._modeChanged}
-                  ></ha-radio>
-                </ha-formfield>
-              </div>
-              <ha-textfield
-                .value=${this._step}
-                .configValue=${"step"}
-                type="number"
-                step="any"
-                @input=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.input_number.step"
-                )}
-              ></ha-textfield>
+        <ha-expansion-panel
+          header=${this.hass.localize(
+            "ui.dialogs.helper_settings.generic.advanced_settings"
+          )}
+          outlined
+        >
+          <div class="layout horizontal center justified">
+            ${this.hass.localize(
+              "ui.dialogs.helper_settings.input_number.mode"
+            )}
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.dialogs.helper_settings.input_number.slider"
+              )}
+            >
+              <ha-radio
+                name="mode"
+                value="slider"
+                .checked=${this._mode === "slider"}
+                @change=${this._modeChanged}
+              ></ha-radio>
+            </ha-formfield>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.dialogs.helper_settings.input_number.box"
+              )}
+            >
+              <ha-radio
+                name="mode"
+                value="box"
+                .checked=${this._mode === "box"}
+                @change=${this._modeChanged}
+              ></ha-radio>
+            </ha-formfield>
+          </div>
+          <ha-textfield
+            .value=${this._step}
+            .configValue=${"step"}
+            type="number"
+            step="any"
+            @input=${this._valueChanged}
+            .label=${this.hass!.localize(
+              "ui.dialogs.helper_settings.input_number.step"
+            )}
+          ></ha-textfield>
 
-              <ha-textfield
-                .value=${this._unit_of_measurement || ""}
-                .configValue=${"unit_of_measurement"}
-                @input=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.input_number.unit_of_measurement"
-                )}
-              ></ha-textfield>
-            `
-          : ""}
+          <ha-textfield
+            .value=${this._unit_of_measurement || ""}
+            .configValue=${"unit_of_measurement"}
+            @input=${this._valueChanged}
+            .label=${this.hass!.localize(
+              "ui.dialogs.helper_settings.input_number.unit_of_measurement"
+            )}
+          ></ha-textfield>
+        </ha-expansion-panel>
       </div>
     `;
   }

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-form/ha-form";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
@@ -88,72 +89,73 @@ class HaInputTextForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-picker>
-        ${this.hass.userData?.showAdvanced
-          ? html`
-              <ha-textfield
-                .value=${this._min}
-                .configValue=${"min"}
-                type="number"
-                min="0"
-                max="255"
-                @input=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.input_text.min"
-                )}
-              ></ha-textfield>
-              <ha-textfield
-                .value=${this._max}
-                .configValue=${"max"}
-                min="0"
-                max="255"
-                type="number"
-                @input=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.input_text.max"
-                )}
-              ></ha-textfield>
-              <div class="layout horizontal center justified">
-                ${this.hass.localize(
-                  "ui.dialogs.helper_settings.input_text.mode"
-                )}
-                <ha-formfield
-                  .label=${this.hass.localize(
-                    "ui.dialogs.helper_settings.input_text.text"
-                  )}
-                >
-                  <ha-radio
-                    name="mode"
-                    value="text"
-                    .checked=${this._mode === "text"}
-                    @change=${this._modeChanged}
-                  ></ha-radio>
-                </ha-formfield>
-                <ha-formfield
-                  .label=${this.hass.localize(
-                    "ui.dialogs.helper_settings.input_text.password"
-                  )}
-                >
-                  <ha-radio
-                    name="mode"
-                    value="password"
-                    .checked=${this._mode === "password"}
-                    @change=${this._modeChanged}
-                  ></ha-radio>
-                </ha-formfield>
-              </div>
-              <ha-textfield
-                .value=${this._pattern || ""}
-                .configValue=${"pattern"}
-                @input=${this._valueChanged}
-                .label=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.input_text.pattern_label"
-                )}
-                .helper=${this.hass!.localize(
-                  "ui.dialogs.helper_settings.input_text.pattern_helper"
-                )}
-              ></ha-textfield>
-            `
-          : ""}
+        <ha-expansion-panel
+          header=${this.hass.localize(
+            "ui.dialogs.helper_settings.generic.advanced_settings"
+          )}
+          outlined
+        >
+          <ha-textfield
+            .value=${this._min}
+            .configValue=${"min"}
+            type="number"
+            min="0"
+            max="255"
+            @input=${this._valueChanged}
+            .label=${this.hass!.localize(
+              "ui.dialogs.helper_settings.input_text.min"
+            )}
+          ></ha-textfield>
+          <ha-textfield
+            .value=${this._max}
+            .configValue=${"max"}
+            min="0"
+            max="255"
+            type="number"
+            @input=${this._valueChanged}
+            .label=${this.hass!.localize(
+              "ui.dialogs.helper_settings.input_text.max"
+            )}
+          ></ha-textfield>
+          <div class="layout horizontal center justified">
+            ${this.hass.localize("ui.dialogs.helper_settings.input_text.mode")}
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.dialogs.helper_settings.input_text.text"
+              )}
+            >
+              <ha-radio
+                name="mode"
+                value="text"
+                .checked=${this._mode === "text"}
+                @change=${this._modeChanged}
+              ></ha-radio>
+            </ha-formfield>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.dialogs.helper_settings.input_text.password"
+              )}
+            >
+              <ha-radio
+                name="mode"
+                value="password"
+                .checked=${this._mode === "password"}
+                @change=${this._modeChanged}
+              ></ha-radio>
+            </ha-formfield>
+          </div>
+          <ha-textfield
+            .value=${this._pattern || ""}
+            .configValue=${"pattern"}
+            @input=${this._valueChanged}
+            .label=${this.hass!.localize(
+              "ui.dialogs.helper_settings.input_text.pattern_label"
+            )}
+            .helper=${this.hass!.localize(
+              "ui.dialogs.helper_settings.input_text.pattern_helper"
+            )}
+          ></ha-textfield>
+        </ha-expansion-panel>
       </div>
     `;
   }
@@ -195,10 +197,14 @@ class HaInputTextForm extends LitElement {
         .row {
           padding: 16px 0;
         }
-        ha-textfield {
+        ha-textfield,
+        ha-icon-picker {
           display: block;
           margin: 8px 0;
         }
+        ha-expansion-panel {
+          margin-top: 16px;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -1601,7 +1601,8 @@
         "required_error_msg": "This field is required",
         "generic": {
           "name": "Name",
-          "icon": "Icon"
+          "icon": "Icon",
+          "advanced_settings": "Advanced settings"
         },
         "input_datetime": {
           "date": "Date",
@@ -1655,8 +1656,7 @@
           "edit_schedule_block": "Edit schedule block",
           "start": "Start",
           "end": "End",
-          "data": "Additional data",
-          "advanced_settings": "Advanced settings"
+          "data": "Additional data"
         },
         "template": {
           "time": "[%key:ui::panel::developer-tools::tabs::templates::time%]",