Allow rendering helper text from strings.json (#12119)

* Allow rendering helper text from strings.json * Persistent helpers * Update src/components/ha-base-time-input.ts Co-authored-by: Zack Barett <zackbarett@hey.com> * Update src/components/ha-base-time-input.ts Co-authored-by: Zack Barett <zackbarett@hey.com>
2025-04-24 21:37:21 +00:00 · 2022-03-24 17:50:38 -07:00 · 2022-03-24 17:50:38 -07:00 · 224df896a1
commit 224df896a1
parent a58b4fb262
11 changed files with 55 additions and 2 deletions
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@ -21,6 +21,11 @@ export class HaBaseTimeInput extends LitElement {
   */
  @property() label?: string;

+  /**
+   * Helper for the input
+   */
+  @property() helper?: string;
+
  /**
   * auto validate time inputs
   */
@ -207,6 +212,7 @@ 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>` : ""}
    `;
  }

@ -303,6 +309,13 @@ 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));
+      font-size: 0.75rem;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
  `;
 }

--- 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}
--- 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,8 @@ export class HaFormString extends LitElement implements HaFormElement {
          : "password"}
        .label=${this.label}
        .value=${this.data || ""}
+        .helper=${this.helper}
+        helperPersistent
        .disabled=${this.disabled}
        .required=${this.schema.required}
        .autoValidate=${this.schema.required}
--- 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}
--- 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,8 @@ 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}
        .suffix=${this.selector.number.unit_of_measurement}
--- 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,8 @@ export class HaTextSelector extends LitElement {
        .label=${this.label}
        .placeholder=${this.placeholder}
        .value=${this.value || ""}
+        .helper=${this.helper}
+        helperPersistent
        .disabled=${this.disabled}
        @input=${this._handleChange}
        autocapitalize="none"
@ -44,6 +48,8 @@ export class HaTextSelector extends LitElement {
    return html`<ha-textfield
        .value=${this.value || ""}
        .placeholder=${this.placeholder || ""}
+        .helper=${this.helper}
+        helperPersistent
        .disabled=${this.disabled}
        .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
        @input=${this._handleChange}
--- 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,
--- 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}`,
--- 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,
--- 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}`,
--- 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);