jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-10 10:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate all paper-radio elements to mwc-radio (#10327)

Browse Source
This commit is contained in:
Bram Kragten 2021-10-19 22:42:30 +02:00 committed by GitHub
parent e47a5effe6
commit 777e6c4c72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 398 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -84,8 +84,6 @@
"@polymer/paper-listbox": "^3.0.1", "@polymer/paper-listbox": "^3.0.1",
"@polymer/paper-menu-button": "^3.1.0", "@polymer/paper-menu-button": "^3.1.0",
"@polymer/paper-progress": "^3.0.1", "@polymer/paper-progress": "^3.0.1",
"@polymer/paper-radio-button": "^3.0.1",
"@polymer/paper-radio-group": "^3.0.1",
"@polymer/paper-ripple": "^3.0.2", "@polymer/paper-ripple": "^3.0.2",
"@polymer/paper-slider": "^3.0.1", "@polymer/paper-slider": "^3.0.1",
"@polymer/paper-styles": "^3.0.1", "@polymer/paper-styles": "^3.0.1",

78
src/onboarding/onboarding-core-config.ts
View File

@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -21,6 +19,9 @@ import { SYMBOL_TO_ISO } from "../data/currency";
import { onboardCoreConfigStep } from "../data/onboarding"; import { onboardCoreConfigStep } from "../data/onboarding";
import type { PolymerChangedEvent } from "../polymer-types"; import type { PolymerChangedEvent } from "../polymer-types";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import "../components/ha-radio";
import "../components/ha-formfield";
import type { HaRadio } from "../components/ha-radio";
const amsterdam: [number, number] = [52.3731339, 4.8903147]; const amsterdam: [number, number] = [52.3731339, 4.8903147];
const mql = matchMedia("(prefers-color-scheme: dark)"); const mql = matchMedia("(prefers-color-scheme: dark)");
@ -135,32 +136,44 @@ class OnboardingCoreConfig extends LitElement {
"ui.panel.config.core.section.core.core_config.unit_system" "ui.panel.config.core.section.core.core_config.unit_system"
)} )}
</div> </div>
<paper-radio-group <div class="radio-group">
class="flex" <ha-formfield
.selected=${this._unitSystemValue} .label=${html`${this.hass.localize(
@selected-changed=${this._unitSystemChanged} "ui.panel.config.core.section.core.core_config.unit_system_metric"
>
<paper-radio-button name="metric" .disabled=${this._working}>
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system_metric"
)}
<div class="secondary">
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.metric_example"
)} )}
</div> <div class="secondary">
</paper-radio-button> ${this.hass.localize(
<paper-radio-button name="imperial" .disabled=${this._working}> "ui.panel.config.core.section.core.core_config.metric_example"
${this.hass.localize( )}
"ui.panel.config.core.section.core.core_config.unit_system_imperial" </div>`}
)} >
<div class="secondary"> <ha-radio
${this.hass.localize( name="unit_system"
"ui.panel.config.core.section.core.core_config.imperial_example" value="metric"
.checked=${this._unitSystemValue === "metric"}
@change=${this._unitSystemChanged}
.disabled=${this._working}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${html`${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system_imperial"
)} )}
</div> <div class="secondary">
</paper-radio-button> ${this.hass.localize(
</paper-radio-group> "ui.panel.config.core.section.core.core_config.imperial_example"
)}
</div>`}
>
<ha-radio
name="unit_system"
value="imperial"
.checked=${this._unitSystemValue === "imperial"}
@change=${this._unitSystemChanged}
.disabled=${this._working}
></ha-radio>
</ha-formfield>
</div>
</div> </div>
<div class="row"> <div class="row">
@ -281,10 +294,8 @@ class OnboardingCoreConfig extends LitElement {
this._location = ev.detail.location; this._location = ev.detail.location;
} }
private _unitSystemChanged( private _unitSystemChanged(ev: CustomEvent) {
ev: PolymerChangedEvent<ConfigUpdateValues["unit_system"]> this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
) {
this._unitSystem = ev.detail.value;
} }
private async _detect() { private async _detect() {
@ -363,6 +374,13 @@ class OnboardingCoreConfig extends LitElement {
.row > * { .row > * {
margin: 0 8px; margin: 0 8px;
} }
.radio-group {
display: flex;
flex-direction: column;
flex: 1;
}
.footer { .footer {
margin-top: 16px; margin-top: 16px;
text-align: right; text-align: right;

104
src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
View File

@ -1,8 +1,5 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button"; import { css, html, LitElement } from "lit";
import "@polymer/paper-radio-group/paper-radio-group";
import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import type { SunCondition } from "../../../../../data/automation"; import type { SunCondition } from "../../../../../data/automation";
@ -11,12 +8,15 @@ import {
ConditionElement, ConditionElement,
handleChangeEvent, handleChangeEvent,
} from "../ha-automation-condition-row"; } from "../ha-automation-condition-row";
import "../../../../../components/ha-radio";
import "../../../../../components/ha-formfield";
import type { HaRadio } from "../../../../../components/ha-radio";
@customElement("ha-automation-condition-sun") @customElement("ha-automation-condition-sun")
export class HaSunCondition extends LitElement implements ConditionElement { export class HaSunCondition extends LitElement implements ConditionElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public condition!: SunCondition; @property({ attribute: false }) public condition!: SunCondition;
public static get defaultConfig() { public static get defaultConfig() {
return {}; return {};
@ -25,28 +25,35 @@ export class HaSunCondition extends LitElement implements ConditionElement {
protected render() { protected render() {
const { after, after_offset, before, before_offset } = this.condition; const { after, after_offset, before, before_offset } = this.condition;
return html` return html`
<label id="beforelabel"> <label>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.sun.before" "ui.panel.config.automation.editor.conditions.type.sun.before"
)} )}
</label> <ha-formfield
<paper-radio-group .label=${this.hass.localize(
.selected=${before}
.name=${"before"}
aria-labelledby="beforelabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="sunrise">
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.sun.sunrise" "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
)} )}
</paper-radio-button> >
<paper-radio-button name="sunset"> <ha-radio
${this.hass.localize( name="before"
value="sunrise"
.checked=${before === "sunrise"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.sun.sunset" "ui.panel.config.automation.editor.conditions.type.sun.sunset"
)} )}
</paper-radio-button> >
</paper-radio-group> <ha-radio
name="before"
value="sunset"
.checked=${before === "sunset"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
</label>
<paper-input <paper-input
.label=${this.hass.localize( .label=${this.hass.localize(
@ -57,28 +64,36 @@ export class HaSunCondition extends LitElement implements ConditionElement {
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></paper-input> ></paper-input>
<label id="afterlabel"> <label>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.sun.after" "ui.panel.config.automation.editor.conditions.type.sun.after"
)} )}
</label>
<paper-radio-group <ha-formfield
.selected=${after} .label=${this.hass.localize(
.name=${"after"}
aria-labelledby="afterlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="sunrise">
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.sun.sunrise" "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
)} )}
</paper-radio-button> >
<paper-radio-button name="sunset"> <ha-radio
${this.hass.localize( name="after"
value="sunrise"
.checked=${after === "sunrise"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.sun.sunset" "ui.panel.config.automation.editor.conditions.type.sun.sunset"
)} )}
</paper-radio-button> >
</paper-radio-group> <ha-radio
name="after"
value="sunset"
.checked=${after === "sunset"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
</label>
<paper-input <paper-input
.label=${this.hass.localize( .label=${this.hass.localize(
@ -95,14 +110,27 @@ export class HaSunCondition extends LitElement implements ConditionElement {
handleChangeEvent(this, ev); handleChangeEvent(this, ev);
} }
private _radioGroupPicked(ev) { private _radioGroupPicked(ev: CustomEvent) {
const key = ev.target.name; const key = (ev.target as HaRadio).name;
ev.stopPropagation(); ev.stopPropagation();
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { value: {
...this.condition, ...this.condition,
[key]: (ev.target as PaperRadioGroupElement).selected, [key]: (ev.target as HaRadio).value,
}, },
}); });
} }
static styles = css`
label {
display: flex;
align-items: center;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-condition-sun": HaSunCondition;
}
} }

53
src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts
View File

@ -1,10 +1,8 @@
import "@polymer/paper-radio-button/paper-radio-button"; import { css, html, LitElement } from "lit";
import "@polymer/paper-radio-group/paper-radio-group";
import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/entity/ha-entity-picker"; import "../../../../../components/entity/ha-entity-picker";
import type { HaRadio } from "../../../../../components/ha-radio";
import type { GeoLocationTrigger } from "../../../../../data/automation"; import type { GeoLocationTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
import { handleChangeEvent } from "../ha-automation-trigger-row"; import { handleChangeEvent } from "../ha-automation-trigger-row";
@ -15,7 +13,7 @@ const includeDomains = ["zone"];
export default class HaGeolocationTrigger extends LitElement { export default class HaGeolocationTrigger extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public trigger!: GeoLocationTrigger; @property({ attribute: false }) public trigger!: GeoLocationTrigger;
public static get defaultConfig() { public static get defaultConfig() {
return { return {
@ -47,27 +45,35 @@ export default class HaGeolocationTrigger extends LitElement {
allow-custom-entity allow-custom-entity
.includeDomains=${includeDomains} .includeDomains=${includeDomains}
></ha-entity-picker> ></ha-entity-picker>
<label id="eventlabel"> <label>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.event" "ui.panel.config.automation.editor.triggers.type.geo_location.event"
)} )}
</label> <ha-formfield
<paper-radio-group .label=${this.hass.localize(
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="enter">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.enter" "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
)} )}
</paper-radio-button> >
<paper-radio-button name="leave"> <ha-radio
${this.hass.localize( name="event"
value="enter"
.checked=${event === "enter"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.geo_location.leave" "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
)} )}
</paper-radio-button> >
</paper-radio-group> <ha-radio
name="event"
value="leave"
.checked=${event === "leave"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
</label>
`; `;
} }
@ -87,10 +93,17 @@ export default class HaGeolocationTrigger extends LitElement {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { value: {
...this.trigger, ...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected, event: (ev.target as HaRadio).value,
}, },
}); });
} }
static styles = css`
label {
display: flex;
align-items: center;
}
`;
} }
declare global { declare global {

53
src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
View File

@ -1,17 +1,17 @@
import "@polymer/paper-radio-button/paper-radio-button"; import { css, html, LitElement } from "lit";
import "@polymer/paper-radio-group/paper-radio-group";
import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import type { HaRadio } from "../../../../../components/ha-radio";
import type { HassTrigger } from "../../../../../data/automation"; import type { HassTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
import "../../../../../components/ha-formfield";
import "../../../../../components/ha-radio";
@customElement("ha-automation-trigger-homeassistant") @customElement("ha-automation-trigger-homeassistant")
export default class HaHassTrigger extends LitElement { export default class HaHassTrigger extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public trigger!: HassTrigger; @property({ attribute: false }) public trigger!: HassTrigger;
public static get defaultConfig() { public static get defaultConfig() {
return { return {
@ -26,23 +26,31 @@ export default class HaHassTrigger extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.event" "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
)} )}
</label> <ha-formfield
<paper-radio-group .label=${this.hass.localize(
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="start">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.start" "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
)} )}
</paper-radio-button> >
<paper-radio-button name="shutdown"> <ha-radio
${this.hass.localize( name="event"
value="start"
.checked=${event === "start"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown" "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
)} )}
</paper-radio-button> >
</paper-radio-group> <ha-radio
name="event"
value="shutdown"
.checked=${event === "shutdown"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
</label>
`; `;
} }
@ -51,10 +59,17 @@ export default class HaHassTrigger extends LitElement {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { value: {
...this.trigger, ...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected, event: (ev.target as HaRadio).value,
}, },
}); });
} }
static styles = css`
label {
display: flex;
align-items: center;
}
`;
} }
declare global { declare global {

61
src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts
View File

@ -1,10 +1,10 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button"; import { css, html, LitElement } from "lit";
import "@polymer/paper-radio-group/paper-radio-group";
import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-radio";
import "../../../../../components/ha-formfield";
import type { HaRadio } from "../../../../../components/ha-radio";
import type { SunTrigger } from "../../../../../data/automation"; import type { SunTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
import { import {
@ -16,7 +16,7 @@ import {
export class HaSunTrigger extends LitElement implements TriggerElement { export class HaSunTrigger extends LitElement implements TriggerElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public trigger!: SunTrigger; @property({ attribute: false }) public trigger!: SunTrigger;
public static get defaultConfig() { public static get defaultConfig() {
return { return {
@ -27,27 +27,35 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
protected render() { protected render() {
const { offset, event } = this.trigger; const { offset, event } = this.trigger;
return html` return html`
<label id="eventlabel"> <label>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.event" "ui.panel.config.automation.editor.triggers.type.sun.event"
)} )}
</label> <ha-formfield
<paper-radio-group .label=${this.hass.localize(
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="sunrise">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.sunrise" "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
)} )}
</paper-radio-button> >
<paper-radio-button name="sunset"> <ha-radio
${this.hass.localize( name="event"
value="sunrise"
.checked=${event === "sunrise"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.sun.sunset" "ui.panel.config.automation.editor.triggers.type.sun.sunset"
)} )}
</paper-radio-button> >
</paper-radio-group> <ha-radio
name="event"
value="sunset"
.checked=${event === "sunset"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
</label>
<paper-input <paper-input
.label=${this.hass.localize( .label=${this.hass.localize(
@ -69,8 +77,21 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { value: {
...this.trigger, ...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected, event: (ev.target as HaRadio).value,
}, },
}); });
} }
static styles = css`
label {
display: flex;
align-items: center;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-sun": HaSunTrigger;
}
} }

54
src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts
View File

@ -1,7 +1,4 @@
import "@polymer/paper-radio-button/paper-radio-button"; import { css, html, LitElement } from "lit";
import "@polymer/paper-radio-group/paper-radio-group";
import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import { computeStateDomain } from "../../../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../../../common/entity/compute_state_domain";
@ -10,6 +7,9 @@ import "../../../../../components/entity/ha-entity-picker";
import type { ZoneTrigger } from "../../../../../data/automation"; import type { ZoneTrigger } from "../../../../../data/automation";
import type { PolymerChangedEvent } from "../../../../../polymer-types"; import type { PolymerChangedEvent } from "../../../../../polymer-types";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
import "../../../../../components/ha-radio";
import "../../../../../components/ha-formfield";
import type { HaRadio } from "../../../../../components/ha-radio";
function zoneAndLocationFilter(stateObj) { function zoneAndLocationFilter(stateObj) {
return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone"; return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
@ -54,27 +54,36 @@ export class HaZoneTrigger extends LitElement {
allow-custom-entity allow-custom-entity
.includeDomains=${includeDomains} .includeDomains=${includeDomains}
></ha-entity-picker> ></ha-entity-picker>
<label id="eventlabel">
<label>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.event" "ui.panel.config.automation.editor.triggers.type.zone.event"
)} )}
</label> <ha-formfield
<paper-radio-group .label=${this.hass.localize(
.selected=${event}
aria-labelledby="eventlabel"
@paper-radio-group-changed=${this._radioGroupPicked}
>
<paper-radio-button name="enter">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.enter" "ui.panel.config.automation.editor.triggers.type.zone.enter"
)} )}
</paper-radio-button> >
<paper-radio-button name="leave"> <ha-radio
${this.hass.localize( name="event"
value="enter"
.checked=${event === "enter"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.zone.leave" "ui.panel.config.automation.editor.triggers.type.zone.leave"
)} )}
</paper-radio-button> >
</paper-radio-group> <ha-radio
name="event"
value="leave"
.checked=${event === "leave"}
@change=${this._radioGroupPicked}
></ha-radio>
</ha-formfield>
</label>
`; `;
} }
@ -97,10 +106,17 @@ export class HaZoneTrigger extends LitElement {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { value: {
...this.trigger, ...this.trigger,
event: (ev.target as PaperRadioGroupElement).selected, event: (ev.target as HaRadio).value,
}, },
}); });
} }
static styles = css`
label {
display: flex;
align-items: center;
}
`;
} }
declare global { declare global {

77
src/panels/config/core/ha-config-core-form.ts
View File

@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -16,6 +14,9 @@ import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
import { SYMBOL_TO_ISO } from "../../../data/currency"; import { SYMBOL_TO_ISO } from "../../../data/currency";
import type { PolymerChangedEvent } from "../../../polymer-types"; import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import "../../../components/ha-formfield";
import "../../../components/ha-radio";
import type { HaRadio } from "../../../components/ha-radio";
@customElement("ha-config-core-form") @customElement("ha-config-core-form")
class ConfigCoreForm extends LitElement { class ConfigCoreForm extends LitElement {
@ -120,32 +121,44 @@ class ConfigCoreForm extends LitElement {
"ui.panel.config.core.section.core.core_config.unit_system" "ui.panel.config.core.section.core.core_config.unit_system"
)} )}
</div> </div>
<paper-radio-group <div class="radio-group">
class="flex" <ha-formfield
.selected=${this._unitSystemValue} .label=${html`${this.hass.localize(
@selected-changed=${this._unitSystemChanged} "ui.panel.config.core.section.core.core_config.unit_system_metric"
>
<paper-radio-button name="metric" .disabled=${disabled}>
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system_metric"
)}
<div class="secondary">
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.metric_example"
)} )}
</div> <div class="secondary">
</paper-radio-button> ${this.hass.localize(
<paper-radio-button name="imperial" .disabled=${disabled}> "ui.panel.config.core.section.core.core_config.metric_example"
${this.hass.localize( )}
"ui.panel.config.core.section.core.core_config.unit_system_imperial" </div>`}
)} >
<div class="secondary"> <ha-radio
${this.hass.localize( name="unit_system"
"ui.panel.config.core.section.core.core_config.imperial_example" value="metric"
.checked=${this._unitSystemValue === "metric"}
@change=${this._unitSystemChanged}
.disabled=${this._working}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${html`${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system_imperial"
)} )}
</div> <div class="secondary">
</paper-radio-button> ${this.hass.localize(
</paper-radio-group> "ui.panel.config.core.section.core.core_config.imperial_example"
)}
</div>`}
>
<ha-radio
name="unit_system"
value="imperial"
.checked=${this._unitSystemValue === "imperial"}
@change=${this._unitSystemChanged}
.disabled=${this._working}
></ha-radio>
</ha-formfield>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="flex"> <div class="flex">
@ -258,10 +271,8 @@ class ConfigCoreForm extends LitElement {
this._location = ev.detail.location; this._location = ev.detail.location;
} }
private _unitSystemChanged( private _unitSystemChanged(ev: CustomEvent) {
ev: PolymerChangedEvent<ConfigUpdateValues["unit_system"]> this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
) {
this._unitSystem = ev.detail.value;
} }
private async _save() { private async _save() {
@ -307,6 +318,12 @@ class ConfigCoreForm extends LitElement {
margin: 0 8px; margin: 0 8px;
} }
.radio-group {
display: flex;
flex-direction: column;
flex: 1;
}
.card-actions { .card-actions {
text-align: right; text-align: right;
} }

2
src/panels/config/core/ha-config-name-form.ts
View File

@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-card"; import "../../../components/ha-card";

62
src/panels/config/helpers/forms/ha-input_datetime-form.ts
View File

@ -1,6 +1,4 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
@ -8,6 +6,9 @@ import "../../../../components/ha-icon-picker";
import { InputDateTime } from "../../../../data/input_datetime"; import { InputDateTime } from "../../../../data/input_datetime";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
@customElement("ha-input_datetime-form") @customElement("ha-input_datetime-form")
class HaInputDateTimeForm extends LitElement { class HaInputDateTimeForm extends LitElement {
@ -81,32 +82,49 @@ class HaInputDateTimeForm extends LitElement {
<br /> <br />
${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}: ${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
<br /> <br />
<paper-radio-group
.selected=${this._mode} <ha-formfield
@selected-changed=${this._modeChanged} .label=${this.hass.localize(
"ui.dialogs.helper_settings.input_datetime.date"
)}
> >
<paper-radio-button name="date"> <ha-radio
${this.hass.localize( name="mode"
"ui.dialogs.helper_settings.input_datetime.date" value="date"
)} .checked=${this._mode === "date"}
</paper-radio-button> @change=${this._modeChanged}
<paper-radio-button name="time"> ></ha-radio>
${this.hass.localize( </ha-formfield>
"ui.dialogs.helper_settings.input_datetime.time" <ha-formfield
)} .label=${this.hass.localize(
</paper-radio-button> "ui.dialogs.helper_settings.input_datetime.time"
<paper-radio-button name="datetime"> )}
${this.hass.localize( >
"ui.dialogs.helper_settings.input_datetime.datetime" <ha-radio
)} name="mode"
</paper-radio-button> value="time"
</paper-radio-group> .checked=${this._mode === "time"}
@change=${this._modeChanged}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.dialogs.helper_settings.input_datetime.datetime"
)}
>
<ha-radio
name="mode"
value="datetime"
.checked=${this._mode === "datetime"}
@change=${this._modeChanged}
></ha-radio>
</ha-formfield>
</div> </div>
`; `;
} }
private _modeChanged(ev: CustomEvent) { private _modeChanged(ev: CustomEvent) {
const mode = ev.detail.value; const mode = (ev.target as HaRadio).value;
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { value: {
...this._item, ...this._item,

44
src/panels/config/helpers/forms/ha-input_number-form.ts
View File

@ -1,6 +1,4 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
@ -8,6 +6,9 @@ import "../../../../components/ha-icon-picker";
import { InputNumber } from "../../../../data/input_number"; import { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
@customElement("ha-input_number-form") @customElement("ha-input_number-form")
class HaInputNumberForm extends LitElement { class HaInputNumberForm extends LitElement {
@ -117,21 +118,30 @@ class HaInputNumberForm extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.helper_settings.input_number.mode" "ui.dialogs.helper_settings.input_number.mode"
)} )}
<paper-radio-group <ha-formfield
.selected=${this._mode} .label=${this.hass.localize(
@selected-changed=${this._modeChanged} "ui.dialogs.helper_settings.input_number.slider"
)}
> >
<paper-radio-button name="slider"> <ha-radio
${this.hass.localize( name="mode"
"ui.dialogs.helper_settings.input_number.slider" value="slider"
)} .checked=${this._mode === "slider"}
</paper-radio-button> @change=${this._modeChanged}
<paper-radio-button name="box"> ></ha-radio>
${this.hass.localize( </ha-formfield>
"ui.dialogs.helper_settings.input_number.box" <ha-formfield
)} .label=${this.hass.localize(
</paper-radio-button> "ui.dialogs.helper_settings.input_number.box"
</paper-radio-group> )}
>
<ha-radio
name="mode"
value="box"
.checked=${this._mode === "box"}
@change=${this._modeChanged}
></ha-radio>
</ha-formfield>
</div> </div>
<paper-input <paper-input
.value=${this._step} .value=${this._step}
@ -159,7 +169,7 @@ class HaInputNumberForm extends LitElement {
private _modeChanged(ev: CustomEvent) { private _modeChanged(ev: CustomEvent) {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { ...this._item, mode: ev.detail.value }, value: { ...this._item, mode: (ev.target as HaRadio).value },
}); });
} }

44
src/panels/config/helpers/forms/ha-input_text-form.ts
View File

@ -1,13 +1,14 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-picker"; import "../../../../components/ha-icon-picker";
import type { HaRadio } from "../../../../components/ha-radio";
import { InputText } from "../../../../data/input_text"; import { InputText } from "../../../../data/input_text";
import { haStyle } from "../../../../resources/styles"; import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
@customElement("ha-input_text-form") @customElement("ha-input_text-form")
class HaInputTextForm extends LitElement { class HaInputTextForm extends LitElement {
@ -112,21 +113,30 @@ class HaInputTextForm extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.helper_settings.input_text.mode" "ui.dialogs.helper_settings.input_text.mode"
)} )}
<paper-radio-group <ha-formfield
.selected=${this._mode} .label=${this.hass.localize(
@selected-changed=${this._modeChanged} "ui.dialogs.helper_settings.input_text.text"
)}
> >
<paper-radio-button name="text"> <ha-radio
${this.hass.localize( name="mode"
"ui.dialogs.helper_settings.input_text.text" value="text"
)} .checked=${this._mode === "text"}
</paper-radio-button> @change=${this._modeChanged}
<paper-radio-button name="password"> ></ha-radio>
${this.hass.localize( </ha-formfield>
"ui.dialogs.helper_settings.input_text.password" <ha-formfield
)} .label=${this.hass.localize(
</paper-radio-button> "ui.dialogs.helper_settings.input_text.password"
</paper-radio-group> )}
>
<ha-radio
name="mode"
value="password"
.checked=${this._mode === "password"}
@change=${this._modeChanged}
></ha-radio>
</ha-formfield>
</div> </div>
<paper-input <paper-input
.value=${this._pattern} .value=${this._pattern}
@ -144,7 +154,7 @@ class HaInputTextForm extends LitElement {
private _modeChanged(ev: CustomEvent) { private _modeChanged(ev: CustomEvent) {
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
value: { ...this._item, mode: ev.detail.value }, value: { ...this._item, mode: (ev.target as HaRadio).value },
}); });
} }

27
yarn.lock
View File

@ -3378,31 +3378,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@polymer/paper-radio-button@npm:^3.0.0-pre.26, @polymer/paper-radio-button@npm:^3.0.1":
version: 3.0.1
resolution: "@polymer/paper-radio-button@npm:3.0.1"
dependencies:
"@polymer/iron-checked-element-behavior": ^3.0.0-pre.26
"@polymer/iron-flex-layout": ^3.0.0-pre.26
"@polymer/paper-behaviors": ^3.0.0-pre.27
"@polymer/paper-styles": ^3.0.0-pre.26
"@polymer/polymer": ^3.0.0
checksum: 2e0d448dabb76164536ad0af499f88161d459b0f0b664b028f74487630bfdfac2d8e293bee0d3df6f4942fdb03bfcd5acd5818fe17213c05819a1a3e59fa2948
languageName: node
linkType: hard
"@polymer/paper-radio-group@npm:^3.0.1":
version: 3.0.1
resolution: "@polymer/paper-radio-group@npm:3.0.1"
dependencies:
"@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
"@polymer/iron-menu-behavior": ^3.0.0-pre.26
"@polymer/paper-radio-button": ^3.0.0-pre.26
"@polymer/polymer": ^3.0.0
checksum: e60f820171d5cbfca987a98a1396d6279fa02da8274c1a4ceaf9bb1c8e320b04be9ee0f913c6753343d3fd8861baabc7f3f9aa5e86f953b9335ed802c6e008f2
languageName: node
linkType: hard
"@polymer/paper-ripple@npm:^3.0.0-pre.26, @polymer/paper-ripple@npm:^3.0.2": "@polymer/paper-ripple@npm:^3.0.0-pre.26, @polymer/paper-ripple@npm:^3.0.2":
version: 3.0.2 version: 3.0.2
resolution: "@polymer/paper-ripple@npm:3.0.2" resolution: "@polymer/paper-ripple@npm:3.0.2"
@ -9104,8 +9079,6 @@ fsevents@^1.2.7:
"@polymer/paper-listbox": ^3.0.1 "@polymer/paper-listbox": ^3.0.1
"@polymer/paper-menu-button": ^3.1.0 "@polymer/paper-menu-button": ^3.1.0
"@polymer/paper-progress": ^3.0.1 "@polymer/paper-progress": ^3.0.1
"@polymer/paper-radio-button": ^3.0.1
"@polymer/paper-radio-group": ^3.0.1
"@polymer/paper-ripple": ^3.0.2 "@polymer/paper-ripple": ^3.0.2
"@polymer/paper-slider": ^3.0.1 "@polymer/paper-slider": ^3.0.1
"@polymer/paper-styles": ^3.0.1 "@polymer/paper-styles": ^3.0.1