diff --git a/src/components/ha-generic-picker.ts b/src/components/ha-generic-picker.ts index 92631333cf..98496a4b40 100644 --- a/src/components/ha-generic-picker.ts +++ b/src/components/ha-generic-picker.ts @@ -72,7 +72,9 @@ export class HaGenericPicker extends LitElement { protected render() { return html` - ${this.label ? html`` : nothing} + ${this.label + ? html`` + : nothing}
${!this._opened ? html` @@ -116,7 +118,9 @@ export class HaGenericPicker extends LitElement { private _renderHelper() { return this.helper - ? html`${this.helper}` + ? html`${this.helper}` : nothing; } @@ -165,6 +169,9 @@ export class HaGenericPicker extends LitElement { position: relative; display: block; } + label[disabled] { + color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6)); + } label { display: block; margin: 0 0 8px; diff --git a/src/components/ha-input-helper-text.ts b/src/components/ha-input-helper-text.ts index 4af842ee74..6d817d1bf6 100644 --- a/src/components/ha-input-helper-text.ts +++ b/src/components/ha-input-helper-text.ts @@ -1,9 +1,11 @@ import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; -import { customElement } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; @customElement("ha-input-helper-text") class InputHelperText extends LitElement { + @property({ type: Boolean, reflect: true }) disabled = false; + protected render(): TemplateResult { return html``; } @@ -18,6 +20,9 @@ class InputHelperText extends LitElement { padding-inline-start: 16px; padding-inline-end: 16px; } + :host([disabled]) { + color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6)); + } `; } diff --git a/src/components/ha-multi-textfield.ts b/src/components/ha-multi-textfield.ts index dd1d46b8b2..c40b6033b6 100644 --- a/src/components/ha-multi-textfield.ts +++ b/src/components/ha-multi-textfield.ts @@ -85,7 +85,9 @@ class HaMultiTextField extends LitElement {
${this.helper - ? html`${this.helper}` + ? html`${this.helper}` : nothing} `; } diff --git a/src/components/ha-picker-field.ts b/src/components/ha-picker-field.ts index 0d62e084bc..ba8513794f 100644 --- a/src/components/ha-picker-field.ts +++ b/src/components/ha-picker-field.ts @@ -88,6 +88,12 @@ export class HaPickerField extends LitElement { static get styles(): CSSResultGroup { return [ css` + ha-combo-box-item[disabled] { + background-color: var( + --mdc-text-field-disabled-fill-color, + whitesmoke + ); + } ha-combo-box-item { background-color: var(--mdc-text-field-fill-color, whitesmoke); border-radius: 4px; @@ -106,6 +112,12 @@ export class HaPickerField extends LitElement { } /* Add Similar focus style as the text field */ + ha-combo-box-item[disabled]:after { + background-color: var( + --mdc-text-field-disabled-line-color, + rgba(0, 0, 0, 0.42) + ); + } ha-combo-box-item:after { display: block; content: "";