Add an auto height toggle in card layout editor (#30182)

* Add auto height toggle in grid card editor

* Improve toggle

* Prettier

src/components/ha-grid-size-picker.ts

@@ -32,12 +32,6 @@ export class HaGridSizeEditor extends LitElement {
 
   @property({ attribute: false }) public step = 1;
 
-  @property({ type: Boolean, attribute: "rows-disabled" })
-  public rowsDisabled?: boolean;
-
-  @property({ type: Boolean, attribute: "columns-disabled" })
-  public columnsDisabled?: boolean;
-
   @state() public _localValue?: CardGridSize = { rows: 1, columns: 1 };
 
   protected willUpdate(changedProperties) {
@@ -47,16 +41,15 @@ export class HaGridSizeEditor extends LitElement {
   }
 
   protected render() {
-    const disabledColumns =
-      this.columnsDisabled ||
-      (this.columnMin !== undefined && this.columnMin === this.columnMax);
-    const disabledRows =
-      this.rowsDisabled ||
-      (this.rowMin !== undefined && this.rowMin === this.rowMax);
-
     const autoHeight = this._localValue?.rows === "auto";
     const fullWidth = this._localValue?.columns === "full";
 
+    const disabledColumns =
+      fullWidth ||
+      (this.columnMin !== undefined && this.columnMin === this.columnMax);
+    const disabledRows =
+      autoHeight || (this.rowMin !== undefined && this.rowMin === this.rowMax);
+
     const rowMin = this.rowMin ?? 1;
     const rowMax = this.rowMax ?? this.rows;
     const columnMin = Math.ceil((this.columnMin ?? 1) / this.step) * this.step;

src/panels/lovelace/cards/hui-card.ts

@@ -71,23 +71,6 @@ export class HuiCard extends ConditionalListenerMixin<LovelaceCardConfig>(
       ...elementOptions,
       ...configOptions,
     };
-
-    // If the element has fixed rows or columns, we use the values from the element
-    // unless the user has already configured their own
-    if (elementOptions.fixed_rows) {
-      if (configOptions.rows === undefined) {
-        mergedConfig.rows = elementOptions.rows;
-      }
-      delete mergedConfig.min_rows;
-      delete mergedConfig.max_rows;
-    }
-    if (elementOptions.fixed_columns) {
-      if (configOptions.columns === undefined) {
-        mergedConfig.columns = elementOptions.columns;
-      }
-      delete mergedConfig.min_columns;
-      delete mergedConfig.max_columns;
-    }
     return mergedConfig;
   }
 

src/panels/lovelace/cards/hui-entities-card.ts

@@ -145,7 +145,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       columns: 12,
       rows: "auto",
       min_columns: 3,
-      fixed_rows: true,
     };
   }
 

src/panels/lovelace/cards/hui-error-card.ts

@@ -33,7 +33,6 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
       rows: this.preview ? "auto" : 1,
       min_rows: 1,
       min_columns: 6,
-      fixed_rows: this.preview,
     };
   }
 

src/panels/lovelace/cards/hui-stack-card.ts

@@ -48,7 +48,6 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
       columns: 12,
       rows: "auto",
       min_columns: 3,
-      fixed_rows: true,
     };
   }
 

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -7,6 +7,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-grid-size-picker";
 import "../../../../components/ha-icon-button";
@@ -28,7 +29,6 @@ import {
   migrateLayoutToGridOptions,
 } from "../../common/compute-card-grid-size";
 import type { LovelaceGridOptions } from "../../types";
-import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("hui-card-layout-editor")
 export class HuiCardLayoutEditor extends LitElement {
@@ -134,10 +134,26 @@ export class HuiCardLayoutEditor extends LitElement {
               .rowMax=${gridOptions.max_rows}
               .columnMin=${gridOptions.min_columns}
               .columnMax=${gridOptions.max_columns}
-              .rowsDisabled=${this._defaultGridOptions?.fixed_rows}
-              .columnsDisabled=${this._defaultGridOptions?.fixed_columns}
               .step=${this._preciseMode ? 1 : GRID_COLUMN_MULTIPLIER}
             ></ha-grid-size-picker>
+            <ha-md-list-item>
+              <span slot="headline"
+                >${this.hass.localize(
+                  "ui.panel.lovelace.editor.edit_card.layout.auto_height"
+                )}</span
+              >
+              <span slot="supporting-text"
+                >${this.hass.localize(
+                  "ui.panel.lovelace.editor.edit_card.layout.auto_height_helper"
+                )}</span
+              >
+              <ha-switch
+                slot="end"
+                @change=${this._autoHeightChanged}
+                .checked=${options.rows === "auto"}
+                name="auto-height"
+              ></ha-switch>
+            </ha-md-list-item>
             <ha-md-list-item>
               <span slot="headline"
                 >${this.hass.localize(
@@ -265,10 +281,43 @@ export class HuiCardLayoutEditor extends LitElement {
 
   private _fullWidthChanged(ev): void {
     ev.stopPropagation();
-    const value = ev.target.checked;
+    const checked = ev.target.checked;
+
+    let columns: number | "full" | undefined;
+    if (checked) {
+      columns = "full";
+    } else if (this._defaultGridOptions?.columns === "full") {
+      // Default is full width, so we need to set a specific value
+      const columnSpan = this.sectionConfig.column_span ?? 1;
+      const gridTotalColumns = 12 * columnSpan;
+      columns = this._defaultGridOptions?.max_columns ?? gridTotalColumns;
+    } else {
+      columns = undefined;
+    }
+
     this._updateGridOptions({
       ...this.config.grid_options,
-      columns: value ? "full" : undefined,
+      columns,
+    });
+  }
+
+  private _autoHeightChanged(ev): void {
+    ev.stopPropagation();
+    const checked = ev.target.checked;
+
+    let rows: number | "auto" | undefined;
+    if (checked) {
+      rows = "auto";
+    } else if (this._defaultGridOptions?.rows === "auto") {
+      // Default is auto height, so we need to set a specific value
+      rows = this._defaultGridOptions?.min_rows ?? 1;
+    } else {
+      rows = undefined;
+    }
+
+    this._updateGridOptions({
+      ...this.config.grid_options,
+      rows,
     });
   }
 

src/panels/lovelace/types.ts

@@ -64,8 +64,6 @@ export interface LovelaceGridOptions {
   min_columns?: number;
   min_rows?: number;
   max_rows?: number;
-  fixed_rows?: boolean;
-  fixed_columns?: boolean;
 }
 
 export interface LovelaceCard extends HTMLElement {

src/translations/en.json

@@ -8632,8 +8632,10 @@
               "explanation": "The card will be shown when ALL conditions below are fulfilled. If no conditions are set, the card will always be shown."
             },
             "layout": {
-              "full_width": "Full width card",
+              "full_width": "Full width",
               "full_width_helper": "Take up the full width of the section whatever its size",
+              "auto_height": "Auto height",
+              "auto_height_helper": "Adjust the card height based on its content",
               "precise_mode": "Precise mode",
               "precise_mode_helper": "Change the card width with more precision"
             }