Use tilecard button feature editor (#26335)

Use button feature editor

Author: wendevlin

src/panels/lovelace/card-features/hui-button-card-feature.ts

@@ -1,15 +1,15 @@
-import { html, LitElement, nothing } from "lit";
 import type { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import type { HomeAssistant } from "../../../types";
-import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import { cardFeatureStyles } from "./common/card-feature-styles";
 import type {
-  LovelaceCardFeatureContext,
   ButtonCardFeatureConfig,
+  LovelaceCardFeatureContext,
 } from "./types";
 
 export const supportsButtonCardFeature = (
@@ -89,6 +89,11 @@ class HuiButtonCardFeature extends LitElement implements LovelaceCardFeature {
   }
 
   static styles = cardFeatureStyles;
+
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
+    await import("../editor/config-elements/hui-button-card-feature-editor");
+    return document.createElement("hui-button-card-feature-editor");
+  }
 }
 
 declare global {

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

@@ -1,10 +1,11 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-form/ha-form";
 import type { HomeAssistant } from "../../../../types";
 import type { ButtonCardFeatureConfig } from "../../card-features/types";
 import type { LovelaceCardFeatureEditor } from "../../types";
-import "../../../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
 
 @customElement("hui-button-card-feature-editor")
 export class HuiButtonCardFeatureEditor
@@ -19,14 +20,15 @@ export class HuiButtonCardFeatureEditor
     this._config = config;
   }
 
-  private _schema: HaFormSchema[] = [
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
     {
       name: "action_name",
+      default: localize("ui.card.button.press"),
       selector: {
         text: {},
       },
     },
-  ];
+  ]);
 
   protected render() {
     if (!this.hass || !this._config) {
@@ -37,12 +39,15 @@ export class HuiButtonCardFeatureEditor
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${this._schema}
+        .schema=${this._schema(this.hass.localize)}
+        .computeLabel=${this._computeLabel}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
   }
 
+  private _computeLabel = () => this.hass.localize("ui.common.name");
+
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
     this.dispatchEvent(