Use ha-form conditional field visibility in dashboard editors

src/panels/lovelace/editor/config-elements/customizable-list-feature.ts

@@ -2,13 +2,11 @@ import type { HaFormSchema } from "../../../../components/ha-form/types";
 
 interface CustomizableListSchemaParams {
   field: string;
-  customize: boolean;
   options: { value: string; label: string }[];
 }
 
 export const customizableListSchema = ({
   field,
-  customize,
   options,
 }: CustomizableListSchemaParams) =>
   [
@@ -16,21 +14,18 @@ export const customizableListSchema = ({
       name: "customize",
       selector: { boolean: {} },
     },
-    ...(customize
-      ? ([
-          {
-            name: field,
-            selector: {
-              select: {
-                mode: "list",
-                reorder: true,
-                multiple: true,
-                options,
-              },
-            },
-          },
-        ] as const satisfies readonly HaFormSchema[])
-      : []),
+    {
+      name: field,
+      hidden: { field: "customize", value: false },
+      selector: {
+        select: {
+          mode: "list",
+          reorder: true,
+          multiple: true,
+          options,
+        },
+      },
+    },
   ] as const satisfies readonly HaFormSchema[];
 
 // `customize` is form-only and never stored in the config.

src/panels/lovelace/editor/config-elements/hui-alarm-modes-card-feature-editor.ts

@@ -37,11 +37,7 @@ export class HuiAlarmModesCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      stateObj: HassEntity | undefined,
-      customizeModes: boolean
-    ) =>
+    (localize: LocalizeFunc, stateObj: HassEntity | undefined) =>
       [
         {
           name: "customize_modes",
@@ -49,27 +45,24 @@ export class HuiAlarmModesCardFeatureEditor
             boolean: {},
           },
         },
-        ...(customizeModes
-          ? ([
-              {
-                name: "modes",
-                selector: {
-                  select: {
-                    multiple: true,
-                    reorder: true,
-                    options: stateObj
-                      ? supportedAlarmModes(stateObj).map((mode) => ({
-                          value: mode,
-                          label: `${localize(
-                            `ui.panel.lovelace.editor.features.types.alarm-modes.modes_list.${mode}`
-                          )}`,
-                        }))
-                      : [],
-                  },
-                },
-              },
-            ] as const satisfies readonly HaFormSchema[])
-          : []),
+        {
+          name: "modes",
+          hidden: { field: "customize_modes", value: false },
+          selector: {
+            select: {
+              multiple: true,
+              reorder: true,
+              options: stateObj
+                ? supportedAlarmModes(stateObj).map((mode) => ({
+                    value: mode,
+                    label: `${localize(
+                      `ui.panel.lovelace.editor.features.types.alarm-modes.modes_list.${mode}`
+                    )}`,
+                  }))
+                : [],
+            },
+          },
+        },
       ] as const satisfies readonly HaFormSchema[]
   );
 
@@ -87,11 +80,7 @@ export class HuiAlarmModesCardFeatureEditor
       ? this.hass.states[this.context?.entity_id]
       : undefined;
 
-    const schema = this._schema(
-      this.hass.localize,
-      stateObj,
-      data.customize_modes
-    );
+    const schema = this._schema(this.hass.localize, stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-counter-actions-card-feature-editor.ts

@@ -2,6 +2,7 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import "../../../../components/ha-form/ha-form";
 import type { HomeAssistant } from "../../../../types";
@@ -32,13 +33,12 @@ export class HuiCounterActionsCardFeatureEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne((customize: boolean) =>
+  private _schema = memoizeOne((localize: LocalizeFunc) =>
     customizableListSchema({
       field: "actions",
-      customize,
       options: COUNTER_ACTIONS.map((action) => ({
         value: action,
-        label: this.hass!.localize(
+        label: localize(
           `ui.panel.lovelace.editor.features.types.counter-actions.actions_list.${action}`
         ),
       })),
@@ -51,7 +51,7 @@ export class HuiCounterActionsCardFeatureEditor
     }
 
     const data = customizableListData(this._config, "actions");
-    const schema = this._schema(data.customize);
+    const schema = this._schema(this.hass.localize);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-energy-devices-card-editor.ts

@@ -61,38 +61,44 @@ export class HuiEnergyDevicesCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne((localize: LocalizeFunc, type: string) => {
+  private _schema = memoizeOne((localize: LocalizeFunc) => {
     const schema: HaFormSchema[] = [
       { name: "title", selector: { text: {} } },
       {
         name: "",
         type: "grid",
         schema: [
-          ...(type === "energy-devices-graph"
-            ? ([
-                {
-                  name: "modes",
-                  required: false,
-                  selector: {
-                    select: {
-                      multiple: true,
-                      mode: "list",
-                      options: chartModeOpts.map((mode) => ({
-                        value: mode,
-                        label: localize(
-                          `ui.panel.lovelace.editor.card.energy-devices-graph.mode_options.${mode}`
-                        ),
-                      })),
-                    },
-                  },
-                },
-                {
-                  name: "hide_compound_stats",
-                  required: false,
-                  selector: { boolean: {} },
-                },
-              ] as HaFormSchema[])
-            : []),
+          {
+            name: "modes",
+            required: false,
+            hidden: {
+              field: "type",
+              operator: "not_eq",
+              value: "energy-devices-graph",
+            },
+            selector: {
+              select: {
+                multiple: true,
+                mode: "list",
+                options: chartModeOpts.map((mode) => ({
+                  value: mode,
+                  label: localize(
+                    `ui.panel.lovelace.editor.card.energy-devices-graph.mode_options.${mode}`
+                  ),
+                })),
+              },
+            },
+          },
+          {
+            name: "hide_compound_stats",
+            required: false,
+            hidden: {
+              field: "type",
+              operator: "not_eq",
+              value: "energy-devices-graph",
+            },
+            selector: { boolean: {} },
+          },
           {
             name: "max_devices",
             required: false,
@@ -114,7 +120,7 @@ export class HuiEnergyDevicesCardEditor
       return nothing;
     }
 
-    const schema = this._schema(this.hass.localize, this._config.type);
+    const schema = this._schema(this.hass.localize);
 
     const data = {
       ...this._config,

src/panels/lovelace/editor/config-elements/hui-energy-graph-card-editor.ts

@@ -10,7 +10,6 @@ import {
   string,
   union,
 } from "superstruct";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../components/ha-form/types";
@@ -24,6 +23,36 @@ import type {
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
+const SCHEMA: HaFormSchema[] = [
+  {
+    name: "title",
+    hidden: { field: "type", value: "energy-compare" },
+    selector: { text: {} },
+  },
+  {
+    name: "show_legend",
+    hidden: {
+      field: "type",
+      operator: "not_in",
+      value: ["power-sources-graph", "energy-usage-graph"],
+    },
+    default: true,
+    required: false,
+    selector: { boolean: {} },
+  },
+  {
+    name: "link_dashboard",
+    hidden: { field: "type", operator: "not_eq", value: "energy-distribution" },
+    required: false,
+    selector: { boolean: {} },
+  },
+  {
+    type: "string",
+    name: "collection_key",
+    required: false,
+  },
+];
+
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
@@ -72,46 +101,11 @@ export class HuiEnergyGraphCardEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne((type: string) => {
-    const schema: HaFormSchema[] = [
-      ...(type !== "energy-compare"
-        ? [{ name: "title", selector: { text: {} } }]
-        : []),
-      ...(type === "power-sources-graph" || type === "energy-usage-graph"
-        ? [
-            {
-              name: "show_legend",
-              default: true,
-              required: false,
-              selector: { boolean: {} },
-            },
-          ]
-        : []),
-      ...(type === "energy-distribution"
-        ? [
-            {
-              name: "link_dashboard",
-              required: false,
-              selector: { boolean: {} },
-            },
-          ]
-        : []),
-      {
-        type: "string",
-        name: "collection_key",
-        required: false,
-      },
-    ];
-    return schema;
-  });
-
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
     }
 
-    const schema = this._schema(this._config.type);
-
     const data = {
       ...this._config,
     };
@@ -119,7 +113,7 @@ export class HuiEnergyGraphCardEditor
     return html` <ha-form
       .hass=${this.hass}
       .data=${data}
-      .schema=${schema}
+      .schema=${SCHEMA}
       .computeLabel=${this._computeLabelCallback}
       .computeHelper=${this._computeHelperCallback}
       @value-changed=${this._valueChanged}

src/panels/lovelace/editor/config-elements/hui-entity-modes-card-feature-editor-base.ts

@@ -74,11 +74,7 @@ export abstract class HuiEntityModesCardFeatureEditorBase<
   }
 
   private _schema = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      stateObj: HassEntity | undefined,
-      customizeModes: boolean
-    ) => {
+    (localize: LocalizeFunc, stateObj: HassEntity | undefined) => {
       const d = this.descriptor;
       const styleListId = d.styleListI18nFeatureId ?? d.i18nFeatureId;
       return [
@@ -103,25 +99,20 @@ export abstract class HuiEntityModesCardFeatureEditorBase<
             boolean: {},
           },
         },
-        ...(customizeModes
-          ? ([
-              {
-                name: d.modeField,
-                selector: {
-                  select: {
-                    reorder: true,
-                    multiple: true,
-                    options: d
-                      .getAvailableModesOrdered(stateObj)
-                      .map((mode) => ({
-                        value: mode,
-                        label: d.getModeLabel(this.hass!, stateObj, mode),
-                      })),
-                  },
-                },
-              },
-            ] as const satisfies readonly HaFormSchema[])
-          : []),
+        {
+          name: d.modeField,
+          hidden: { field: "customize_modes", value: false },
+          selector: {
+            select: {
+              reorder: true,
+              multiple: true,
+              options: d.getAvailableModesOrdered(stateObj).map((mode) => ({
+                value: mode,
+                label: d.getModeLabel(this.hass!, stateObj, mode),
+              })),
+            },
+          },
+        },
       ] as const satisfies readonly HaFormSchema[];
     }
   );
@@ -143,11 +134,7 @@ export abstract class HuiEntityModesCardFeatureEditorBase<
       customize_modes: this._config[modeField as keyof TConfig] !== undefined,
     };
 
-    const schema = this._schema(
-      this.hass.localize,
-      stateObj,
-      data.customize_modes
-    );
+    const schema = this._schema(this.hass.localize, stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -80,7 +80,7 @@ export class HuiGaugeCardEditor
   }
 
   private _schema = memoizeOne(
-    (showSeverity: boolean, entityId?: string) =>
+    (entityId?: string) =>
       [
         {
           name: "entity",
@@ -132,28 +132,25 @@ export class HuiGaugeCardEditor
             { name: "show_severity", selector: { boolean: {} } },
           ],
         },
-        ...(showSeverity
-          ? ([
-              {
-                name: "severity",
-                type: "grid",
-                schema: [
-                  {
-                    name: "green",
-                    selector: { number: { mode: "box", step: "any" } },
-                  },
-                  {
-                    name: "yellow",
-                    selector: { number: { mode: "box", step: "any" } },
-                  },
-                  {
-                    name: "red",
-                    selector: { number: { mode: "box", step: "any" } },
-                  },
-                ],
-              },
-            ] as const)
-          : []),
+        {
+          name: "severity",
+          type: "grid",
+          hidden: { field: "show_severity", value: false },
+          schema: [
+            {
+              name: "green",
+              selector: { number: { mode: "box", step: "any" } },
+            },
+            {
+              name: "yellow",
+              selector: { number: { mode: "box", step: "any" } },
+            },
+            {
+              name: "red",
+              selector: { number: { mode: "box", step: "any" } },
+            },
+          ],
+        },
         {
           name: "interactions",
           type: "expandable",
@@ -197,10 +194,7 @@ export class HuiGaugeCardEditor
       return nothing;
     }
 
-    const schema = this._schema(
-      this._config!.severity !== undefined,
-      this._config!.entity
-    );
+    const schema = this._schema(this._config!.entity);
     const data = {
       show_severity: this._config!.severity !== undefined,
       ...this._config,

src/panels/lovelace/editor/config-elements/hui-lawn-mower-commands-card-feature-editor.ts

@@ -34,20 +34,18 @@ export class HuiLawnMowerCommandsCardFeatureEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (stateObj: HassEntity | undefined, customize: boolean) =>
-      customizableListSchema({
-        field: "commands",
-        customize,
-        options: LAWN_MOWER_COMMANDS.filter(
-          (command) => stateObj && supportsLawnMowerCommand(stateObj, command)
-        ).map((command) => ({
-          value: command,
-          label: this.hass!.localize(
-            `ui.panel.lovelace.editor.features.types.lawn-mower-commands.commands_list.${command}`
-          ),
-        })),
-      })
+  private _schema = memoizeOne((stateObj: HassEntity | undefined) =>
+    customizableListSchema({
+      field: "commands",
+      options: LAWN_MOWER_COMMANDS.filter(
+        (command) => stateObj && supportsLawnMowerCommand(stateObj, command)
+      ).map((command) => ({
+        value: command,
+        label: this.hass!.localize(
+          `ui.panel.lovelace.editor.features.types.lawn-mower-commands.commands_list.${command}`
+        ),
+      })),
+    })
   );
 
   protected render() {
@@ -60,7 +58,7 @@ export class HuiLawnMowerCommandsCardFeatureEditor
       : undefined;
 
     const data = customizableListData(this._config, "commands");
-    const schema = this._schema(stateObj, data.customize);
+    const schema = this._schema(stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -51,7 +51,7 @@ export class HuiMarkdownCardEditor
   }
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, text_only: boolean) =>
+    (localize: LocalizeFunc) =>
       [
         {
           name: "style",
@@ -73,9 +73,11 @@ export class HuiMarkdownCardEditor
             },
           },
         },
-        ...(!text_only
-          ? ([{ name: "title", selector: { text: {} } }] as const)
-          : []),
+        {
+          name: "title",
+          hidden: { field: "style", value: "text-only" },
+          selector: { text: {} },
+        },
         {
           name: "content",
           required: true,
@@ -131,10 +133,7 @@ export class HuiMarkdownCardEditor
       style: this._config.text_only ? "text-only" : "card",
     };
 
-    const schema = this._schema(
-      this.hass.localize,
-      this._config.text_only || false
-    );
+    const schema = this._schema(this.hass.localize);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-media-player-playback-card-feature-editor.ts

@@ -38,11 +38,10 @@ export class HuiMediaPlayerPlaybackCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (stateObj: MediaPlayerEntity | undefined, customize: boolean) =>
+    (stateObj: MediaPlayerEntity | undefined) =>
       [
         ...customizableListSchema({
           field: "controls",
-          customize,
           options: MEDIA_PLAYER_PLAYBACK_CONTROLS.filter(
             (control) =>
               stateObj && supportsMediaPlayerPlaybackControl(stateObj, control)
@@ -69,7 +68,7 @@ export class HuiMediaPlayerPlaybackCardFeatureEditor
       : undefined;
 
     const data = customizableListData(this._config, "controls");
-    const schema = this._schema(stateObj, data.customize);
+    const schema = this._schema(stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-media-player-sound-mode-card-feature-editor.ts

@@ -32,21 +32,19 @@ export class HuiMediaPlayerSoundModeCardFeatureEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (stateObj: MediaPlayerEntity | undefined, customize: boolean) =>
-      customizableListSchema({
-        field: "sound_modes",
-        customize,
-        options:
-          stateObj?.attributes.sound_mode_list?.map((mode) => ({
-            value: mode,
-            label: this.hass!.formatEntityAttributeValue(
-              stateObj,
-              "sound_mode",
-              mode
-            ),
-          })) ?? [],
-      })
+  private _schema = memoizeOne((stateObj: MediaPlayerEntity | undefined) =>
+    customizableListSchema({
+      field: "sound_modes",
+      options:
+        stateObj?.attributes.sound_mode_list?.map((mode) => ({
+          value: mode,
+          label: this.hass!.formatEntityAttributeValue(
+            stateObj,
+            "sound_mode",
+            mode
+          ),
+        })) ?? [],
+    })
   );
 
   protected render() {
@@ -60,7 +58,7 @@ export class HuiMediaPlayerSoundModeCardFeatureEditor
       : undefined;
 
     const data = customizableListData(this._config, "sound_modes");
-    const schema = this._schema(stateObj, data.customize);
+    const schema = this._schema(stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-media-player-source-card-feature-editor.ts

@@ -32,21 +32,19 @@ export class HuiMediaPlayerSourceCardFeatureEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (stateObj: MediaPlayerEntity | undefined, customize: boolean) =>
-      customizableListSchema({
-        field: "sources",
-        customize,
-        options:
-          stateObj?.attributes.source_list?.map((source) => ({
-            value: source,
-            label: this.hass!.formatEntityAttributeValue(
-              stateObj,
-              "source",
-              source
-            ),
-          })) ?? [],
-      })
+  private _schema = memoizeOne((stateObj: MediaPlayerEntity | undefined) =>
+    customizableListSchema({
+      field: "sources",
+      options:
+        stateObj?.attributes.source_list?.map((source) => ({
+          value: source,
+          label: this.hass!.formatEntityAttributeValue(
+            stateObj,
+            "source",
+            source
+          ),
+        })) ?? [],
+    })
   );
 
   protected render() {
@@ -60,7 +58,7 @@ export class HuiMediaPlayerSourceCardFeatureEditor
       : undefined;
 
     const data = customizableListData(this._config, "sources");
-    const schema = this._schema(stateObj, data.customize);
+    const schema = this._schema(stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-precipitation-forecast-card-feature-editor.ts

@@ -38,15 +38,10 @@ export class HuiPrecipitationForecastCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (
-      stateObj: HassEntity | undefined,
-      forecastType: ForecastResolution,
-      localize: HomeAssistant["localize"]
-    ) => {
+    (stateObj: HassEntity | undefined, localize: HomeAssistant["localize"]) => {
       const supportedTypes = stateObj
         ? getSupportedForecastTypes(stateObj)
         : [];
-      const isHourly = forecastType === "hourly";
       return [
         {
           name: "forecast_type",
@@ -67,17 +62,22 @@ export class HuiPrecipitationForecastCardFeatureEditor
             },
           },
         },
-        isHourly
-          ? {
-              name: "hours_to_show",
-              default: DEFAULT_HOURS_TO_SHOW,
-              selector: { number: { min: 1, mode: "box" } },
-            }
-          : {
-              name: "days_to_show",
-              default: DEFAULT_DAYS_TO_SHOW,
-              selector: { number: { min: 1, mode: "box" } },
-            },
+        {
+          name: "hours_to_show",
+          default: DEFAULT_HOURS_TO_SHOW,
+          hidden: {
+            field: "forecast_type",
+            operator: "not_eq",
+            value: "hourly",
+          },
+          selector: { number: { min: 1, mode: "box" } },
+        },
+        {
+          name: "days_to_show",
+          default: DEFAULT_DAYS_TO_SHOW,
+          hidden: { field: "forecast_type", value: "hourly" },
+          selector: { number: { min: 1, mode: "box" } },
+        },
         {
           name: "precipitation_type",
           required: true,
@@ -141,7 +141,7 @@ export class HuiPrecipitationForecastCardFeatureEditor
         : { days_to_show: this._config.days_to_show ?? DEFAULT_DAYS_TO_SHOW }),
     };
 
-    const schema = this._schema(stateObj, resolvedType, this.hass.localize);
+    const schema = this._schema(stateObj, this.hass.localize);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-select-options-card-feature-editor.ts

@@ -38,8 +38,7 @@ export class HuiSelectOptionsCardFeatureEditor
   private _schema = memoizeOne(
     (
       formatEntityState: FormatEntityStateFunc,
-      stateObj: HassEntity | undefined,
-      customizeOptions: boolean
+      stateObj: HassEntity | undefined
     ) =>
       [
         {
@@ -48,24 +47,21 @@ export class HuiSelectOptionsCardFeatureEditor
             boolean: {},
           },
         },
-        ...(customizeOptions
-          ? ([
-              {
-                name: "options",
-                selector: {
-                  select: {
-                    multiple: true,
-                    reorder: true,
-                    options:
-                      stateObj?.attributes.options?.map((option) => ({
-                        value: option,
-                        label: formatEntityState(stateObj, option),
-                      })) || [],
-                  },
-                },
-              },
-            ] as const satisfies readonly HaFormSchema[])
-          : []),
+        {
+          name: "options",
+          hidden: { field: "customize_options", value: false },
+          selector: {
+            select: {
+              multiple: true,
+              reorder: true,
+              options:
+                stateObj?.attributes.options?.map((option) => ({
+                  value: option,
+                  label: formatEntityState(stateObj, option),
+                })) || [],
+            },
+          },
+        },
       ] as const satisfies readonly HaFormSchema[]
   );
 
@@ -83,11 +79,7 @@ export class HuiSelectOptionsCardFeatureEditor
       customize_options: this._config.options !== undefined,
     };
 
-    const schema = this._schema(
-      this.hass.formatEntityState,
-      stateObj,
-      data.customize_options
-    );
+    const schema = this._schema(this.hass.formatEntityState, stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -157,8 +157,6 @@ export class HuiStatisticsGraphCardEditor
       localize: LocalizeFunc,
       statisticIds: string[] | undefined,
       metaDatas: StatisticsMetaData[] | undefined,
-      showFitOption: boolean,
-      hiddenLegend: boolean,
       enableDateSelect: boolean
     ) => {
       const units = new Set<string>();
@@ -291,15 +289,18 @@ export class HuiStatisticsGraphCardEditor
                   required: false,
                   selector: { number: { mode: "box", step: "any" } },
                 },
-                ...(showFitOption
-                  ? [
-                      {
-                        name: "fit_y_data",
-                        required: false,
-                        selector: { boolean: {} },
-                      },
-                    ]
-                  : []),
+                {
+                  name: "fit_y_data",
+                  required: false,
+                  hidden: {
+                    condition: "and",
+                    conditions: [
+                      { field: "min_y_axis", operator: "not_exists" },
+                      { field: "max_y_axis", operator: "not_exists" },
+                    ],
+                  },
+                  selector: { boolean: {} },
+                },
                 {
                   name: "logarithmic_scale",
                   required: false,
@@ -310,15 +311,12 @@ export class HuiStatisticsGraphCardEditor
                   required: false,
                   selector: { boolean: {} },
                 },
-                ...(!hiddenLegend
-                  ? [
-                      {
-                        name: "expand_legend",
-                        required: false,
-                        selector: { boolean: {} },
-                      },
-                    ]
-                  : []),
+                {
+                  name: "expand_legend",
+                  required: false,
+                  hidden: { field: "hide_legend", value: true },
+                  selector: { boolean: {} },
+                },
               ],
             },
           ],
@@ -397,9 +395,6 @@ export class HuiStatisticsGraphCardEditor
       this.hass.localize,
       this._configEntities,
       this._metaDatas,
-      this._config!.min_y_axis !== undefined ||
-        this._config!.max_y_axis !== undefined,
-      !!this._config!.hide_legend,
       !!this._config!.energy_date_selection
     );
     const configured_stat_types = this._config!.stat_types

src/panels/lovelace/editor/config-elements/hui-temperature-forecast-card-feature-editor.ts

@@ -38,15 +38,10 @@ export class HuiTemperatureForecastCardFeatureEditor
   }
 
   private _schema = memoizeOne(
-    (
-      stateObj: HassEntity | undefined,
-      forecastType: ForecastResolution,
-      localize: HomeAssistant["localize"]
-    ) => {
+    (stateObj: HassEntity | undefined, localize: HomeAssistant["localize"]) => {
       const supportedTypes = stateObj
         ? getSupportedForecastTypes(stateObj)
         : [];
-      const isHourly = forecastType === "hourly";
       return [
         {
           name: "forecast_type",
@@ -67,17 +62,22 @@ export class HuiTemperatureForecastCardFeatureEditor
             },
           },
         },
-        isHourly
-          ? {
-              name: "hours_to_show",
-              default: DEFAULT_HOURS_TO_SHOW,
-              selector: { number: { min: 1, mode: "box" } },
-            }
-          : {
-              name: "days_to_show",
-              default: DEFAULT_DAYS_TO_SHOW,
-              selector: { number: { min: 1, mode: "box" } },
-            },
+        {
+          name: "hours_to_show",
+          default: DEFAULT_HOURS_TO_SHOW,
+          hidden: {
+            field: "forecast_type",
+            operator: "not_eq",
+            value: "hourly",
+          },
+          selector: { number: { min: 1, mode: "box" } },
+        },
+        {
+          name: "days_to_show",
+          default: DEFAULT_DAYS_TO_SHOW,
+          hidden: { field: "forecast_type", value: "hourly" },
+          selector: { number: { min: 1, mode: "box" } },
+        },
         {
           name: "color",
           selector: {
@@ -117,7 +117,7 @@ export class HuiTemperatureForecastCardFeatureEditor
         : { days_to_show: this._config.days_to_show ?? DEFAULT_DAYS_TO_SHOW }),
     };
 
-    const schema = this._schema(stateObj, resolvedType, this.hass.localize);
+    const schema = this._schema(stateObj, this.hass.localize);
 
     return html`
       <ha-form

src/panels/lovelace/editor/config-elements/hui-vacuum-commands-card-feature-editor.ts

@@ -37,20 +37,18 @@ export class HuiVacuumCommandsCardFeatureEditor
     this._config = config;
   }
 
-  private _schema = memoizeOne(
-    (stateObj: HassEntity | undefined, customize: boolean) =>
-      customizableListSchema({
-        field: "commands",
-        customize,
-        options: VACUUM_COMMANDS.filter(
-          (command) => stateObj && supportsVacuumCommand(stateObj, command)
-        ).map((command) => ({
-          value: command,
-          label: this.hass!.localize(
-            `ui.panel.lovelace.editor.features.types.vacuum-commands.commands_list.${command}`
-          ),
-        })),
-      })
+  private _schema = memoizeOne((stateObj: HassEntity | undefined) =>
+    customizableListSchema({
+      field: "commands",
+      options: VACUUM_COMMANDS.filter(
+        (command) => stateObj && supportsVacuumCommand(stateObj, command)
+      ).map((command) => ({
+        value: command,
+        label: this.hass!.localize(
+          `ui.panel.lovelace.editor.features.types.vacuum-commands.commands_list.${command}`
+        ),
+      })),
+    })
   );
 
   protected render() {
@@ -63,7 +61,7 @@ export class HuiVacuumCommandsCardFeatureEditor
       : undefined;
 
     const data = customizableListData(this._config, "commands");
-    const schema = this._schema(stateObj, data.customize);
+    const schema = this._schema(stateObj);
 
     return html`
       <ha-form

src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts

@@ -34,7 +34,7 @@ export class HuiDialogEditSection extends LitElement {
   @property({ attribute: false }) public viewConfig!: LovelaceViewConfig;
 
   private _schema = memoizeOne(
-    (maxColumns: number, backgroundEnabled: boolean, localize: LocalizeFunc) =>
+    (maxColumns: number, localize: LocalizeFunc) =>
       [
         {
           name: "column_span",
@@ -50,48 +50,45 @@ export class HuiDialogEditSection extends LitElement {
           name: "background_enabled",
           selector: { boolean: {} },
         },
-        ...(backgroundEnabled
-          ? ([
-              {
-                name: "background",
-                type: "expandable",
-                flatten: true,
-                expanded: true,
-                iconPath: mdiPalette,
-                schema: [
-                  {
-                    name: "background_color",
-                    selector: {
-                      ui_color: {
-                        extra_options: [
-                          {
-                            value: "default",
-                            label: localize(
-                              "ui.panel.lovelace.editor.edit_section.settings.background_color_default"
-                            ),
-                            display_color:
-                              "var(--ha-section-background-color, var(--secondary-background-color))",
-                          },
-                        ],
-                      },
+        {
+          name: "background",
+          type: "expandable",
+          flatten: true,
+          expanded: true,
+          hidden: { field: "background_enabled", value: false },
+          iconPath: mdiPalette,
+          schema: [
+            {
+              name: "background_color",
+              selector: {
+                ui_color: {
+                  extra_options: [
+                    {
+                      value: "default",
+                      label: localize(
+                        "ui.panel.lovelace.editor.edit_section.settings.background_color_default"
+                      ),
+                      display_color:
+                        "var(--ha-section-background-color, var(--secondary-background-color))",
                     },
-                  },
-                  {
-                    name: "background_opacity",
-                    selector: {
-                      number: {
-                        min: 0,
-                        max: 100,
-                        step: 1,
-                        unit_of_measurement: "%",
-                        mode: "slider",
-                      },
-                    },
-                  },
-                ],
+                  ],
+                },
               },
-            ] as const satisfies readonly HaFormSchema[])
-          : []),
+            },
+            {
+              name: "background_opacity",
+              selector: {
+                number: {
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  unit_of_measurement: "%",
+                  mode: "slider",
+                },
+              },
+            },
+          ],
+        },
         {
           name: "theme",
           selector: {
@@ -116,7 +113,6 @@ export class HuiDialogEditSection extends LitElement {
 
     const schema = this._schema(
       this.viewConfig.max_columns || 4,
-      backgroundEnabled,
       this.hass.localize
     );
 

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -44,7 +44,7 @@ export class HuiViewEditor extends LitElement {
   private _suggestedPath = false;
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, viewType: string) =>
+    (localize: LocalizeFunc) =>
       [
         {
           name: "type",
@@ -87,41 +87,42 @@ export class HuiViewEditor extends LitElement {
             boolean: {},
           },
         },
-        ...(viewType === SECTIONS_VIEW_LAYOUT
-          ? ([
-              {
-                name: "section_specifics",
-                type: "expandable",
-                flatten: true,
-                expanded: true,
-                schema: [
-                  {
-                    name: "max_columns",
-                    selector: {
-                      number: {
-                        min: 1,
-                        max: 10,
-                        mode: "slider",
-                        slider_ticks: true,
-                      },
-                    },
-                  },
-                  {
-                    name: "dense_section_placement",
-                    selector: {
-                      boolean: {},
-                    },
-                  },
-                  {
-                    name: "top_margin",
-                    selector: {
-                      boolean: {},
-                    },
-                  },
-                ],
+        {
+          name: "section_specifics",
+          type: "expandable",
+          flatten: true,
+          expanded: true,
+          hidden: {
+            field: "type",
+            operator: "not_eq",
+            value: SECTIONS_VIEW_LAYOUT,
+          },
+          schema: [
+            {
+              name: "max_columns",
+              selector: {
+                number: {
+                  min: 1,
+                  max: 10,
+                  mode: "slider",
+                  slider_ticks: true,
+                },
               },
-            ] as const satisfies HaFormSchema[])
-          : []),
+            },
+            {
+              name: "dense_section_placement",
+              selector: {
+                boolean: {},
+              },
+            },
+            {
+              name: "top_margin",
+              selector: {
+                boolean: {},
+              },
+            },
+          ],
+        },
       ] as const satisfies HaFormSchema[]
   );
 
@@ -138,7 +139,7 @@ export class HuiViewEditor extends LitElement {
       return nothing;
     }
 
-    const schema = this._schema(this.hass.localize, this._type);
+    const schema = this._schema(this.hass.localize);
 
     const data = {
       ...this._config,