Fix combobox helper (#25834)

* Fix combobox helper

* Pass disabled to all helpers

src/components/ha-base-time-input.ts

@@ -271,7 +271,9 @@ export class HaBaseTimeInput extends LitElement {
             </ha-select>`}
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }

src/components/ha-combo-box.ts

@@ -19,6 +19,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
 import "./ha-combo-box-textfield";
 import "./ha-icon-button";
+import "./ha-input-helper-text";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
@@ -195,8 +196,6 @@ export class HaComboBox extends LitElement {
           ></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
-          .helper=${this.helper}
-          helperPersistent
           .disableSetValue=${this._disableSetValue}
         >
           <slot name="icon" slot="leadingIcon"></slot>
@@ -222,9 +221,18 @@ export class HaComboBox extends LitElement {
           @click=${this._toggleOpen}
         ></ha-svg-icon>
       </vaadin-combo-box-light>
+      ${this._renderHelper()}
     `;
   }
 
+  private _renderHelper() {
+    return this.helper
+      ? html`<ha-input-helper-text .disabled=${this.disabled}
+          >${this.helper}</ha-input-helper-text
+        >`
+      : "";
+  }
+
   private _defaultRowRenderer: ComboBoxLitRenderer<
     string | Record<string, any>
   > = (item) => html`
@@ -398,6 +406,9 @@ export class HaComboBox extends LitElement {
       inset-inline-end: 36px;
       direction: var(--direction);
     }
+    ha-input-helper-text {
+      margin-top: 4px;
+    }
   `;
 }
 

src/components/ha-form/ha-form-integer.ts

@@ -71,7 +71,9 @@ export class HaFormInteger extends LitElement implements HaFormElement {
             ></ha-slider>
           </div>
           ${this.helper
-            ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+            ? html`<ha-input-helper-text .disabled=${this.disabled}
+                >${this.helper}</ha-input-helper-text
+              >`
             : ""}
         </div>
       `;

src/components/ha-input-helper-text.ts

@@ -19,6 +19,11 @@ class InputHelperText extends LitElement {
       padding-right: 16px;
       padding-inline-start: 16px;
       padding-inline-end: 16px;
+      letter-spacing: var(
+        --mdc-typography-caption-letter-spacing,
+        0.0333333333em
+      );
+      line-height: normal;
     }
     :host([disabled]) {
       color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));

src/components/ha-labeled-slider.ts

@@ -47,7 +47,9 @@ class HaLabeledSlider extends LitElement {
         ></ha-slider>
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text> ${this.helper} </ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}>
+            ${this.helper}
+          </ha-input-helper-text>`
         : nothing}
     `;
   }

src/components/ha-selector/ha-selector-datetime.ts

@@ -54,7 +54,9 @@ export class HaDateTimeSelector extends LitElement {
         ></ha-time-input>
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : ""}
     `;
   }

src/components/ha-selector/ha-selector-number.ts

@@ -106,7 +106,9 @@ export class HaNumberSelector extends LitElement {
         </ha-textfield>
       </div>
       ${!isBox && this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }

src/components/ha-selector/ha-selector-object.ts

@@ -38,7 +38,9 @@ export class HaObjectSelector extends LitElement {
         @value-changed=${this._handleChange}
       ></ha-yaml-editor>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : ""} `;
   }
 

src/components/ha-selector/ha-selector-select.ts

@@ -285,7 +285,9 @@ export class HaSelectSelector extends LitElement {
 
   private _renderHelper() {
     return this.helper
-      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+      ? html`<ha-input-helper-text .disabled=${this.disabled}
+          >${this.helper}</ha-input-helper-text
+        >`
       : "";
   }
 

src/components/ha-selector/ha-selector-template.ts

@@ -63,7 +63,9 @@ export class HaTemplateSelector extends LitElement {
         linewrap
       ></ha-code-editor>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : nothing}
     `;
   }

src/components/ha-target-picker.ts

@@ -289,7 +289,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         ${this._renderPicker()}
       </div>
       ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
         : ""}
     `;
   }