Display tooltips for labels #27613
Display tooltips for labels #27613
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Note that in other PRs to avoid points in If there is a need to add a slugified |
|
Resolved conflicts with #27594, a new look for |
I've noticed this in dev recently, so it's not related to this PR |
| public description?: string; | ||
|
|
||
| protected render(): TemplateResult { | ||
| const elementId = "label-" + uid(); |
There was a problem hiding this comment.
You can optimize this by adding private _uid = uid() so it doesn't generate it for every render
| const color = label?.color | ||
| ? computeCssColor(label.color) | ||
| : undefined; | ||
| const elementId = "label-" + uid(); |
There was a problem hiding this comment.
Can be optimized the same way
| @click=${clickAction ? this._labelClicked : undefined} | ||
| @keydown=${clickAction ? this._labelClicked : undefined} | ||
| style=${color ? `--color: ${color}` : ""} | ||
| .description=${label.description ?? ""} |
There was a problem hiding this comment.
The attribute is defined as description?: string so the ?? "" is redundant. You can just pass the description as is. Same for all the other cases of description ?? ""
| .disabled=${this.description === undefined || | ||
| this.description?.trim().replaceAll("\n", "").replaceAll("\r", "") === | ||
| ""} |
There was a problem hiding this comment.
These checks are slightly different in ha-labels-picker. They should be unified somehow.
Also no need to check === undefined and have a ? afterwards. One of these is enough
There was a problem hiding this comment.
In more-info, for chips, a check for “undefined” turned to be not enough, had to add a check for “null”. Shall I add a check for “null” here as well? Or may be I shall find out a reason why it could be “null” in more-info.
Thanks for comments! |
2 participants
Breaking change
Proposed change
Display a description of a label in
ha-tooltip:Added in tables (automations, scripts, scenes, devices, entities, helpers) in 3 places:
Added in more-info:
Notes:
ha-labelused for LABELS, not in a "quick search", “+1” buttons etc.uid()function is used to generate unique ids for target elements associated with tooltips.ha-labelis a bit refactored (spanis placed into adiv) to make tooltips shown when hovering a wholeha-labelelement, not only a smallerspaninside it.In a default dark theme it looks less visible - but this could be another PR:
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed: