Rename service button to action button (#21511)

src/components/ha-service-control.ts

@@ -717,7 +717,7 @@ export class HaServiceControl extends LitElement {
     }
 
     const value = {
-      service: newService,
+      action: newService,
       target,
     };
 

src/panels/lovelace/create-element/create-hui-element.ts

@@ -18,5 +18,9 @@ const ALWAYS_LOADED_TYPES = new Set([
   "state-label",
 ]);
 
-export const createHuiElement = (config: LovelaceElementConfig) =>
-  createLovelaceElement("element", config, ALWAYS_LOADED_TYPES);
+export const createHuiElement = (config: LovelaceElementConfig) => {
+  if (config.type === "action-button") {
+    config = { ...config, type: "service-button" };
+  }
+  return createLovelaceElement("element", config, ALWAYS_LOADED_TYPES);
+};

src/panels/lovelace/editor/config-elements/elements/hui-service-button-element-editor.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { any, assert, literal, object, optional, string } from "superstruct";
+import { any, assert, enums, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
@@ -12,7 +12,7 @@ import { ServiceButtonElementConfig } from "../../../elements/types";
 import { LovelacePictureElementEditor } from "../../../types";
 
 const serviceButtonElementConfigStruct = object({
-  type: literal("service-button"),
+  type: enums(["service-button", "action-button"]),
   style: optional(any()),
   title: optional(string()),
   action: optional(string()),

src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts

@@ -31,7 +31,7 @@ const elementTypes: string[] = [
   "state-badge",
   "state-icon",
   "state-label",
-  "service-button",
+  "action-button",
   "icon",
   "image",
   "conditional",
@@ -141,9 +141,13 @@ export class HuiPictureElementsCardRowEditor extends LitElement {
           ).entity ??
           ""
         );
+      case "action-button":
       case "service-button":
         return (
-          element.title ?? (element as ServiceButtonElementConfig).service ?? ""
+          element.title ??
+          (element as ServiceButtonElementConfig).action ??
+          (element as ServiceButtonElementConfig).service ??
+          ""
         );
       case "image":
         return (

src/panels/lovelace/editor/picture-element-editor/hui-picture-element-element-editor.ts

@@ -7,7 +7,9 @@ import { getPictureElementClass } from "../../create-element/create-picture-elem
 @customElement("hui-picture-element-element-editor")
 export class HuiPictureElementElementEditor extends HuiElementEditor<LovelaceElementConfig> {
   protected get configElementType(): string | undefined {
-    return this.value?.type;
+    return this.value?.type === "action-button"
+      ? "service-button"
+      : this.value?.type;
   }
 
   protected async getConfigElement(): Promise<

src/translations/en.json

@@ -5997,6 +5997,7 @@
                 "state-icon": "State icon",
                 "state-label": "State label",
                 "service-button": "Perform action button",
+                "action-button": "Perform action button",
                 "icon": "Icon",
                 "image": "Image",
                 "conditional": "Conditional"