Use right naming convention for ui_action and ui_color selector (#16235)

src/components/ha-selector/ha-selector-ui-action.ts

@@ -6,7 +6,7 @@ import { HomeAssistant } from "../../types";
 import "../../panels/lovelace/components/hui-action-editor";
 import { ActionConfig } from "../../data/lovelace";
 
-@customElement("ha-selector-ui-action")
+@customElement("ha-selector-ui_action")
 export class HaSelectorUiAction extends LitElement {
   @property() public hass!: HomeAssistant;
 
@@ -24,7 +24,7 @@ export class HaSelectorUiAction extends LitElement {
         .label=${this.label}
         .hass=${this.hass}
         .config=${this.value}
-        .actions=${this.selector["ui-action"]?.actions}
+        .actions=${this.selector.ui_action?.actions}
         .tooltipText=${this.helper}
         @value-changed=${this._valueChanged}
       ></hui-action-editor>

src/components/ha-selector/ha-selector-ui-color.ts

@@ -6,7 +6,7 @@ import { UiColorSelector } from "../../data/selector";
 import "../../panels/lovelace/components/hui-color-picker";
 import { HomeAssistant } from "../../types";
 
-@customElement("ha-selector-ui-color")
+@customElement("ha-selector-ui_color")
 export class HaSelectorUiColor extends LitElement {
   @property() public hass!: HomeAssistant;
 

src/components/ha-selector/ha-selector.ts

@@ -42,10 +42,12 @@ const LOAD_ELEMENTS = {
   tts: () => import("./ha-selector-tts"),
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
-  "ui-action": () => import("./ha-selector-ui-action"),
+  ui_action: () => import("./ha-selector-ui-action"),
-  "ui-color": () => import("./ha-selector-ui-color"),
+  ui_color: () => import("./ha-selector-ui-color"),
 };
 
+const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);
+
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -75,7 +77,11 @@ export class HaSelector extends LitElement {
   }
 
   private get _type() {
-    return Object.keys(this.selector)[0];
+    const type = Object.keys(this.selector)[0];
+    if (LEGACY_UI_SELECTORS.has(type)) {
+      return type.replace("-", "_");
+    }
+    return type;
   }
 
   protected willUpdate(changedProps: PropertyValues) {
@@ -91,6 +97,10 @@ export class HaSelector extends LitElement {
     if ("device" in selector) {
       return handleLegacyDeviceSelector(selector);
     }
+    const type = Object.keys(this.selector)[0];
+    if (LEGACY_UI_SELECTORS.has(type)) {
+      return { [type.replace("-", "_")]: selector[type] };
+    }
     return selector;
   });
 

src/data/selector.ts

@@ -332,14 +332,14 @@ export interface TTSSelector {
 }
 
 export interface UiActionSelector {
-  "ui-action": {
+  ui_action: {
     actions?: UiAction[];
   } | null;
 }
 
 export interface UiColorSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  "ui-color": {} | null;
+  ui_color: {} | null;
 }
 
 export const filterSelectorDevices = (

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

@@ -65,11 +65,11 @@ const SCHEMA = [
   },
   {
     name: "tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 

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

@@ -48,11 +48,11 @@ const SCHEMA = [
   { name: "theme", selector: { theme: {} } },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "double_tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 

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

@@ -61,11 +61,11 @@ const SCHEMA = [
   { name: "theme", selector: { theme: {} } },
   {
     name: "tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 

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

@@ -51,11 +51,11 @@ const SCHEMA = [
   { name: "theme", selector: { theme: {} } },
   {
     name: "tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 

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

@@ -87,7 +87,7 @@ export class HuiTileCardEditor
                 {
                   name: "color",
                   selector: {
-                    "ui-color": {},
+                    ui_color: {},
                   },
                 },
                 {
@@ -115,13 +115,13 @@ export class HuiTileCardEditor
             {
               name: "tap_action",
               selector: {
-                "ui-action": {},
+                ui_action: {},
               },
             },
             {
               name: "icon_tap_action",
               selector: {
-                "ui-action": {},
+                ui_action: {},
               },
             },
           ] as const,