jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 05:47:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Paulus Schoutsen 2022-03-24 17:50:38 -07:00 committed by GitHub
parent a58b4fb262
commit 224df896a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ha-base-time-input.ts
View File

@ -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;
}
`;
}

3
src/components/ha-duration-input.ts
View File

@ -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}

4
src/components/ha-form/ha-form-string.ts
View File

@ -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}

3
src/components/ha-selector/ha-selector-duration.ts
View File

@ -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}

4
src/components/ha-selector/ha-selector-number.ts
View File

@ -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}

6
src/components/ha-selector/ha-selector-text.ts
View File

@ -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}

2
src/dialogs/config-flow/dialog-data-entry-flow.ts
View File

@ -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,

6
src/dialogs/config-flow/show-dialog-config-flow.ts
View File

@ -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}`,

6
src/dialogs/config-flow/show-dialog-data-entry-flow.ts
View File

@ -50,6 +50,12 @@ export interface FlowConfig {
field: HaFormSchema
): string;
renderShowFormStepFieldHelper(
hass: HomeAssistant,
step: DataEntryFlowStepForm,
field: HaFormSchema
): string;
renderShowFormStepFieldError(
hass: HomeAssistant,
step: DataEntryFlowStepForm,

6
src/dialogs/config-flow/show-dialog-options-flow.ts
View File

@ -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}`,

4
src/dialogs/config-flow/step-flow-form.ts
View File

@ -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);