Add title to stack editor UI (#21328)

Add title to stack editor UI

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

@@ -1,4 +1,3 @@
-import { html, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import {
   any,
@@ -11,8 +10,10 @@ import {
   optional,
   string,
 } from "superstruct";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import type {
-import type { SchemaUnion } from "../../../../components/ha-form/types";
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import type { GridCardConfig } from "../../cards/types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { HuiStackCardEditor } from "./hui-stack-card-editor";
@@ -49,35 +50,18 @@ const SCHEMA = [
 
 @customElement("hui-grid-card-editor")
 export class HuiGridCardEditor extends HuiStackCardEditor {
+  protected _schema: readonly HaFormSchema[] = SCHEMA;
+
   public setConfig(config: Readonly<GridCardConfig>): void {
     assert(config, cardConfigStruct);
     this._config = config;
   }
 
-  protected render() {
+  protected formData(): object {
-    if (!this.hass || !this._config) {
+    return { square: true, ...this._config };
-      return nothing;
-    }
-
-    const data = { square: true, ...this._config };
-
-    return html`
-      <ha-form
-        .hass=${this.hass}
-        .data=${data}
-        .schema=${SCHEMA}
-        .computeLabel=${this._computeLabelCallback}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
-      ${super.render()}
-    `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  protected _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
-    fireEvent(this, "config-changed", { config: ev.detail.value });
-  }
-
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
     this.hass!.localize(`ui.panel.lovelace.editor.card.grid.${schema.name}`);
 }
 

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

@@ -20,6 +20,10 @@ import {
   optional,
   string,
 } from "superstruct";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import { storage } from "../../../../common/decorators/storage";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
@@ -46,6 +50,13 @@ const cardConfigStruct = assign(
   })
 );
 
+const SCHEMA = [
+  {
+    name: "title",
+    selector: { text: {} },
+  },
+] as const;
+
 @customElement("hui-stack-card-editor")
 export class HuiStackCardEditor
   extends LitElement
@@ -71,6 +82,8 @@ export class HuiStackCardEditor
 
   @state() protected _guiModeAvailable? = true;
 
+  protected _schema: readonly HaFormSchema[] = SCHEMA;
+
   @query("hui-card-element-editor")
   protected _cardEditorEl?: HuiCardElementEditor;
 
@@ -83,6 +96,10 @@ export class HuiStackCardEditor
     this._cardEditorEl?.focusYamlEditor();
   }
 
+  protected formData(): object {
+    return this._config!;
+  }
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
@@ -93,6 +110,13 @@ export class HuiStackCardEditor
     const isGuiMode = !this._cardEditorEl || this._GUImode;
 
     return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${this.formData()}
+        .schema=${this._schema}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
       <div class="card-config">
         <div class="toolbar">
           <paper-tabs
@@ -285,6 +309,15 @@ export class HuiStackCardEditor
     }
   }
 
+  protected _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  protected _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.card.${this._config!.type}.${schema.name}`
+    );
+
   static get styles(): CSSResultGroup {
     return [
       configElementStyle,

src/translations/en.json

@@ -5852,6 +5852,7 @@
             },
             "horizontal-stack": {
               "name": "Horizontal stack",
+              "title": "[%key:ui::panel::lovelace::editor::card::grid::title%]",
               "description": "The Horizontal stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."
             },
             "humidifier": {
@@ -5988,6 +5989,7 @@
             },
             "vertical-stack": {
               "name": "Vertical stack",
+              "title": "[%key:ui::panel::lovelace::editor::card::grid::title%]",
               "description": "The Vertical stack card allows you to group multiple cards so they always sit in the same column."
             },
             "weather-forecast": {