From 44b399dfb3bf6567ae2a3ea1e925038346809cc4 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Wed, 23 Mar 2022 22:54:04 -0700
Subject: [PATCH 1/4] Allow rendering helper text from strings.json

---
 src/components/ha-base-time-input.ts          | 25 ++++++++++++++++++-
 src/components/ha-duration-input.ts           |  3 +++
 src/components/ha-form/ha-form-string.ts      |  3 +++
 .../ha-selector/ha-selector-duration.ts       |  3 +++
 .../ha-selector/ha-selector-number.ts         |  3 +++
 .../ha-selector/ha-selector-text.ts           |  4 +++
 .../config-flow/dialog-data-entry-flow.ts     |  2 --
 .../config-flow/show-dialog-config-flow.ts    |  6 +++++
 .../show-dialog-data-entry-flow.ts            |  6 +++++
 .../config-flow/show-dialog-options-flow.ts   |  6 +++++
 src/dialogs/config-flow/step-flow-form.ts     |  4 +++
 11 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 64b12f18e2df..b5751387fe92 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, TemplateResult, css } from "lit";
+import { LitElement, html, TemplateResult, css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import "./ha-select";
 import "@material/mwc-list/mwc-list-item";
@@ -21,6 +21,11 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property() label?: string;
 
+  /**
+   * Helper for the input
+   */
+  @property() helper?: string;
+
   /**
    * auto validate time inputs
    */
@@ -207,9 +212,16 @@ export class HaBaseTimeInput extends LitElement {
               <mwc-list-item value="PM">PM</mwc-list-item>
             </ha-select>`}
       </div>
+      ${this.helper ? html`<div class="helper">${this.helper}</div>` : ""}
     `;
   }
 
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.addEventListener("focus", () => this.toggleAttribute("focused", true));
+    this.addEventListener("blur", () => this.toggleAttribute("focused", false));
+  }
+
   private _valueChanged(ev) {
     this[ev.target.name] =
       ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);
@@ -303,6 +315,17 @@ export class HaBaseTimeInput extends LitElement {
       color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
       padding-left: 4px;
     }
+
+    .helper {
+      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+      opacity: 0;
+      font-size: 0.75rem;
+      will-change: opacity;
+      transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    :host([focused]) .helper {
+      opacity: 1;
+    }
   `;
 }
 
diff --git a/src/components/ha-duration-input.ts b/src/components/ha-duration-input.ts
index 9ac4e72e2ff0..b862059b355b 100644
--- a/src/components/ha-duration-input.ts
+++ b/src/components/ha-duration-input.ts
@@ -17,6 +17,8 @@ class HaDurationInput extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public required?: boolean;
 
   @property({ type: Boolean }) public enableMillisecond?: boolean;
@@ -35,6 +37,7 @@ class HaDurationInput extends LitElement {
     return html`
       <ha-base-time-input
         .label=${this.label}
+        .helper=${this.helper}
         .required=${this.required}
         .autoValidate=${this.required}
         .disabled=${this.disabled}
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index e82a96519e97..f7bf716c1934 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -28,6 +28,8 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @state() private _unmaskedPassword = false;
@@ -53,6 +55,7 @@ export class HaFormString extends LitElement implements HaFormElement {
           : "password"}
         .label=${this.label}
         .value=${this.data || ""}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
diff --git a/src/components/ha-selector/ha-selector-duration.ts b/src/components/ha-selector/ha-selector-duration.ts
index 1f5e88b1460e..73266aaed53d 100644
--- a/src/components/ha-selector/ha-selector-duration.ts
+++ b/src/components/ha-selector/ha-selector-duration.ts
@@ -14,6 +14,8 @@ export class HaTimeDuration extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -22,6 +24,7 @@ export class HaTimeDuration extends LitElement {
     return html`
       <ha-duration-input
         .label=${this.label}
+        .helper=${this.helper}
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 8a9dfb1c3ac9..89b0deb14e6c 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -19,6 +19,8 @@ export class HaNumberSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public required = true;
 
   @property({ type: Boolean }) public disabled = false;
@@ -48,6 +50,7 @@ export class HaNumberSelector extends LitElement {
         .max=${this.selector.number.max}
         .value=${this.value ?? ""}
         .step=${this.selector.number.step ?? 1}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.required}
         .suffix=${this.selector.number.unit_of_measurement}
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index 2e6c879d9ebc..c40496313d2d 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -18,6 +18,8 @@ export class HaTextSelector extends LitElement {
 
   @property() public placeholder?: string;
 
+  @property() public helper?: string;
+
   @property() public selector!: StringSelector;
 
   @property({ type: Boolean }) public disabled = false;
@@ -32,6 +34,7 @@ export class HaTextSelector extends LitElement {
         .label=${this.label}
         .placeholder=${this.placeholder}
         .value=${this.value || ""}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         @input=${this._handleChange}
         autocapitalize="none"
@@ -44,6 +47,7 @@ export class HaTextSelector extends LitElement {
     return html`<ha-textfield
         .value=${this.value || ""}
         .placeholder=${this.placeholder || ""}
+        .helper=${this.helper}
         .disabled=${this.disabled}
         .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
         @input=${this._handleChange}
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index b190f605b5e8..836e699ff6b1 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -14,9 +14,7 @@ import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
-import "../../components/ha-form/ha-form";
 import "../../components/ha-icon-button";
-import "../../components/ha-markdown";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
diff --git a/src/dialogs/config-flow/show-dialog-config-flow.ts b/src/dialogs/config-flow/show-dialog-config-flow.ts
index 7f413fee8d91..937dabdac229 100644
--- a/src/dialogs/config-flow/show-dialog-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-config-flow.ts
@@ -91,6 +91,12 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderShowFormStepFieldHelper(hass, step, field) {
+      return hass.localize(
+        `component.${step.handler}.config.step.${step.step_id}.data_description.${field.name}`
+      );
+    },
+
     renderShowFormStepFieldError(hass, step, error) {
       return hass.localize(
         `component.${step.handler}.config.error.${error}`,
diff --git a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
index 2736b98fe38f..78346468e5e6 100644
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@@ -50,6 +50,12 @@ export interface FlowConfig {
     field: HaFormSchema
   ): string;
 
+  renderShowFormStepFieldHelper(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepForm,
+    field: HaFormSchema
+  ): string;
+
   renderShowFormStepFieldError(
     hass: HomeAssistant,
     step: DataEntryFlowStepForm,
diff --git a/src/dialogs/config-flow/show-dialog-options-flow.ts b/src/dialogs/config-flow/show-dialog-options-flow.ts
index fbc9205ef3dc..4a90b088899d 100644
--- a/src/dialogs/config-flow/show-dialog-options-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-options-flow.ts
@@ -89,6 +89,12 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderShowFormStepFieldHelper(hass, step, field) {
+        return hass.localize(
+          `component.${configEntry.domain}.options.step.${step.step_id}.data_description.${field.name}`
+        );
+      },
+
       renderShowFormStepFieldError(hass, step, error) {
         return hass.localize(
           `component.${configEntry.domain}.options.error.${error}`,
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 59e3656b1b79..e88128b326b5 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -54,6 +54,7 @@ class StepFlowForm extends LitElement {
           .schema=${step.data_schema}
           .error=${step.errors}
           .computeLabel=${this._labelCallback}
+          .computeHelper=${this._helperCallback}
           .computeError=${this._errorCallback}
         ></ha-form>
       </div>
@@ -166,6 +167,9 @@ class StepFlowForm extends LitElement {
   private _labelCallback = (field: HaFormSchema): string =>
     this.flowConfig.renderShowFormStepFieldLabel(this.hass, this.step, field);
 
+  private _helperCallback = (field: HaFormSchema): string =>
+    this.flowConfig.renderShowFormStepFieldHelper(this.hass, this.step, field);
+
   private _errorCallback = (error: string) =>
     this.flowConfig.renderShowFormStepFieldError(this.hass, this.step, error);
 

From ccc5c72111df09f1b6d3a4508428752ba629d298 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 24 Mar 2022 11:53:24 -0700
Subject: [PATCH 2/4] Persistent helpers

---
 src/components/ha-base-time-input.ts             | 8 ++------
 src/components/ha-form/ha-form-string.ts         | 1 +
 src/components/ha-selector/ha-selector-number.ts | 1 +
 src/components/ha-selector/ha-selector-text.ts   | 2 ++
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index b5751387fe92..cf206e6f5115 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -318,13 +318,9 @@ export class HaBaseTimeInput extends LitElement {
 
     .helper {
       color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      opacity: 0;
       font-size: 0.75rem;
-      will-change: opacity;
-      transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    :host([focused]) .helper {
-      opacity: 1;
+      padding-left: 16px;
+      padding-right: 16px;
     }
   `;
 }
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index f7bf716c1934..f527676aafd7 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -56,6 +56,7 @@ export class HaFormString extends LitElement implements HaFormElement {
         .label=${this.label}
         .value=${this.data || ""}
         .helper=${this.helper}
+        helperPersistent
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 89b0deb14e6c..ef3bc63fc023 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -50,6 +50,7 @@ export class HaNumberSelector extends LitElement {
         .max=${this.selector.number.max}
         .value=${this.value ?? ""}
         .step=${this.selector.number.step ?? 1}
+        helperPersistent
         .helper=${this.helper}
         .disabled=${this.disabled}
         .required=${this.required}
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index c40496313d2d..b91e0edc3342 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -35,6 +35,7 @@ export class HaTextSelector extends LitElement {
         .placeholder=${this.placeholder}
         .value=${this.value || ""}
         .helper=${this.helper}
+        helperPersistent
         .disabled=${this.disabled}
         @input=${this._handleChange}
         autocapitalize="none"
@@ -48,6 +49,7 @@ export class HaTextSelector extends LitElement {
         .value=${this.value || ""}
         .placeholder=${this.placeholder || ""}
         .helper=${this.helper}
+        helperPersistent
         .disabled=${this.disabled}
         .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
         @input=${this._handleChange}

From dcec9564093c5c7da1a569c4f43a75bc07f23563 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 24 Mar 2022 17:24:55 -0700
Subject: [PATCH 3/4] Update src/components/ha-base-time-input.ts

Co-authored-by: Zack Barett <zackbarett@hey.com>
---
 src/components/ha-base-time-input.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index cf206e6f5115..b19ae6b8bf5d 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -216,12 +216,6 @@ export class HaBaseTimeInput extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this.addEventListener("focus", () => this.toggleAttribute("focused", true));
-    this.addEventListener("blur", () => this.toggleAttribute("focused", false));
-  }
-
   private _valueChanged(ev) {
     this[ev.target.name] =
       ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);

From e76e747e2ced23c751857aa966464e71f1ea0c9b Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 24 Mar 2022 17:39:58 -0700
Subject: [PATCH 4/4] Update src/components/ha-base-time-input.ts

---
 src/components/ha-base-time-input.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index b19ae6b8bf5d..4c1f1d7ff45c 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, TemplateResult, css, PropertyValues } from "lit";
+import { LitElement, html, TemplateResult, css } from "lit";
 import { customElement, property } from "lit/decorators";
 import "./ha-select";
 import "@material/mwc-list/mwc-list-item";