From cfa048ea4e31218550280f0bcfcd142278d24427 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Thu, 7 Apr 2022 00:11:12 +0200
Subject: [PATCH] Only show "required" indicator if we have a selector label
 (#12241)

---
 src/components/ha-base-time-input.ts                 | 2 +-
 src/components/ha-labeled-slider.js                  | 2 +-
 src/components/ha-selector/ha-selector-color-temp.ts | 2 +-
 src/components/ha-selector/ha-selector-number.ts     | 2 +-
 src/components/ha-yaml-editor.ts                     | 4 +++-
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 7c3f59a629..9b35e60ca2 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -131,7 +131,7 @@ export class HaBaseTimeInput extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.label
-        ? html`<label>${this.label}${this.required ? "*" : ""}</label>`
+        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
         : ""}
       <div class="time-input-wrap">
         ${this.enableDay
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index 00d1b1848f..0cb42de57d 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -53,7 +53,7 @@ class HaLabeledSlider extends PolymerElement {
   }
 
   _getTitle() {
-    return `${this.caption}${this.required ? "*" : ""}`;
+    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
   }
 
   static get properties() {
diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts
index c3cbb5ffe8..e94519df24 100644
--- a/src/components/ha-selector/ha-selector-color-temp.ts
+++ b/src/components/ha-selector/ha-selector-color-temp.ts
@@ -26,7 +26,7 @@ export class HaColorTempSelector extends LitElement {
       <ha-labeled-slider
         pin
         icon="hass:thermometer"
-        .caption=${this.label}
+        .caption=${this.label || ""}
         .min=${this.selector.color_temp.min_mireds ?? 153}
         .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index f7dcbf28ba..6fa656635e 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -30,7 +30,7 @@ export class HaNumberSelector extends LitElement {
     const isBox = this.selector.number.mode === "box";
 
     return html`
-      ${this.label}${this.required ? "*" : ""}
+      ${this.label ? html`${this.label}${this.required ? " *" : ""}` : ""}
       <div class="input">
         ${!isBox
           ? html`<ha-slider
diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index d4a30cc158..a1f24f302f 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -61,7 +61,9 @@ export class HaYamlEditor extends LitElement {
       return html``;
     }
     return html`
-      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
+      ${this.label
+        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
+        : ""}
       <ha-code-editor
         .hass=${this.hass}
         .value=${this._yaml}