target picker: use slugify() for tooltips (#27619)

This commit is contained in:
ildar170975
2025-10-24 10:59:14 +03:00
committed by GitHub
parent fe94ae0243
commit 4e6e3629a8

View File

@@ -16,6 +16,7 @@ import memoizeOne from "memoize-one";
import { computeCssColor } from "../../common/color/compute-color"; import { computeCssColor } from "../../common/color/compute-color";
import { hex2rgb } from "../../common/color/convert-color"; import { hex2rgb } from "../../common/color/convert-color";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { slugify } from "../../common/string/slugify";
import { import {
computeDeviceName, computeDeviceName,
computeDeviceNameDisplay, computeDeviceNameDisplay,
@@ -102,7 +103,7 @@ export class HaTargetPickerValueChip extends LitElement {
${this.type === "entity" ${this.type === "entity"
? nothing ? nothing
: html`<span role="gridcell"> : html`<span role="gridcell">
<ha-tooltip .for="expand-${this.itemId}" <ha-tooltip .for="expand-${slugify(this.itemId)}"
>${this.hass.localize( >${this.hass.localize(
`ui.components.target-picker.expand_${this.type}_id` `ui.components.target-picker.expand_${this.type}_id`
)} )}
@@ -114,13 +115,13 @@ export class HaTargetPickerValueChip extends LitElement {
)} )}
.path=${mdiUnfoldMoreVertical} .path=${mdiUnfoldMoreVertical}
hide-title hide-title
.id="expand-${this.itemId}" .id="expand-${slugify(this.itemId)}"
.type=${this.type} .type=${this.type}
@click=${this._handleExpand} @click=${this._handleExpand}
></ha-icon-button> ></ha-icon-button>
</span>`} </span>`}
<span role="gridcell"> <span role="gridcell">
<ha-tooltip .for="remove-${this.itemId}"> <ha-tooltip .for="remove-${slugify(this.itemId)}">
${this.hass.localize( ${this.hass.localize(
`ui.components.target-picker.remove_${this.type}_id` `ui.components.target-picker.remove_${this.type}_id`
)} )}
@@ -130,7 +131,7 @@ export class HaTargetPickerValueChip extends LitElement {
.label=${this.hass.localize("ui.components.target-picker.remove")} .label=${this.hass.localize("ui.components.target-picker.remove")}
.path=${mdiClose} .path=${mdiClose}
hide-title hide-title
.id="remove-${this.itemId}" .id="remove-${slugify(this.itemId)}"
.type=${this.type} .type=${this.type}
@click=${this._removeItem} @click=${this._removeItem}
></ha-icon-button> ></ha-icon-button>