QUick Fix from a review

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

@@ -1,12 +1,13 @@
-import "../../../../../components/ha-form/ha-form";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import { HaFormSchema } from "../../../../../components/ha-form/types";
+import "../../../../../components/entity/ha-entity-picker";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import { handleChangeEvent } from "../ha-automation-trigger-row";
+
+const includeDomains = ["zone"];
 
 @customElement("ha-automation-trigger-geo_location")
 export class HaGeolocationTrigger extends LitElement {
@@ -14,30 +15,6 @@ export class HaGeolocationTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: GeoLocationTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    { name: "source", selector: { text: {} } },
-    { name: "zone", selector: { entity: { domain: "zone" } } },
-    {
-      name: "event",
-      type: "select",
-      required: true,
-      options: [
-        [
-          "enter",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
-          ),
-        ],
-        [
-          "leave",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.geo_location.leave"
-          ),
-        ],
-      ],
-    },
-  ]);
-
   public static get defaultConfig() {
     return {
       source: "",
@@ -47,27 +24,86 @@ export class HaGeolocationTrigger extends LitElement {
   }
 
   protected render() {
+    const { source, zone, event } = this.trigger;
+
     return html`
-      <ha-form
-        .schema=${this._schema(this.hass.localize)}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.geo_location.source"
+        )}
+        name="source"
+        .value=${source}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
+      <ha-entity-picker
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.geo_location.zone"
+        )}
+        .value=${zone}
+        @value-changed=${this._zonePicked}
+        .hass=${this.hass}
+        allow-custom-entity
+        .includeDomains=${includeDomains}
+      ></ha-entity-picker>
+      <label>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.geo_location.event"
+        )}
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.geo_location.enter"
+          )}
+        >
+          <ha-radio
+            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"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="leave"
+            .checked=${event === "leave"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
-    );
+  private _zonePicked(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: { ...this.trigger, zone: ev.detail.value },
+    });
+  }
+
+  private _radioGroupPicked(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        event: (ev.target as HaRadio).value,
+      },
+    });
+  }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,12 +1,11 @@
-import "../../../../../components/ha-form/ha-form";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaRadio } from "../../../../../components/ha-radio";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
 
 @customElement("ha-automation-trigger-homeassistant")
 export class HaHassTrigger extends LitElement {
@@ -14,28 +13,6 @@ export class HaHassTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: HassTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    {
-      name: "event",
-      type: "select",
-      required: true,
-      options: [
-        [
-          "start",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
-          ),
-        ],
-        [
-          "shutdown",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
-          ),
-        ],
-      ],
-    },
-  ]);
-
   public static get defaultConfig() {
     return {
       event: "start" as HassTrigger["event"],
@@ -43,28 +20,50 @@ export class HaHassTrigger extends LitElement {
   }
 
   protected render() {
+    const { event } = this.trigger;
     return html`
-      <ha-form
-        .schema=${this._schema(this.hass.localize)}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
+      <label id="eventlabel">
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
+        )}
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+          )}
+        >
+          <ha-radio
+            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"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="shutdown"
+            .checked=${event === "shutdown"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _radioGroupPicked(ev) {
     ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        event: (ev.target as HaRadio).value,
+      },
+    });
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
-    );
-
   static styles = css`
     label {
       display: flex;

src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts

@@ -1,15 +1,12 @@
+import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
-import type { TriggerElement } from "../ha-automation-trigger-row";
-
-const SCHEMA: HaFormSchema[] = [
-  { name: "topic", required: true, selector: { text: {} } },
-  { name: "payload", selector: { text: {} } },
-];
+import {
+  handleChangeEvent,
+  TriggerElement,
+} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-mqtt")
 export class HaMQTTTrigger extends LitElement implements TriggerElement {
@@ -22,27 +19,30 @@ export class HaMQTTTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
+    const { topic, payload } = this.trigger;
     return html`
-      <ha-form
-        .schema=${SCHEMA}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.mqtt.topic"
+        )}
+        name="topic"
+        .value=${topic}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.mqtt.payload"
+        )}
+        name="payload"
+        .value=${payload}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
-
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.mqtt.${schema.name}`
-    );
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -91,7 +91,7 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
   protected render() {
     const trgFor = createDurationData(this.trigger.for);
 
-    const data = { ...this.trigger, ...{ for: trgFor } };
+    const data = { ...this.trigger, for: trgFor };
     const schema = this._schema(this.trigger.entity_id);
 
     return html`

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

@@ -1,12 +1,16 @@
-import { html, LitElement } from "lit";
+import "@polymer/paper-input/paper-input";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
 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 { HomeAssistant } from "../../../../../types";
-import type { TriggerElement } from "../ha-automation-trigger-row";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { LocalizeFunc } from "../../../../../common/translations/localize";
+import {
+  handleChangeEvent,
+  TriggerElement,
+} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-sun")
 export class HaSunTrigger extends LitElement implements TriggerElement {
@@ -14,29 +18,6 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
 
   @property({ attribute: false }) public trigger!: SunTrigger;
 
-  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    {
-      name: "event",
-      type: "select",
-      required: true,
-      options: [
-        [
-          "sunrise",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
-          ),
-        ],
-        [
-          "sunset",
-          localize(
-            "ui.panel.config.automation.editor.triggers.type.sun.sunset"
-          ),
-        ],
-      ],
-    },
-    { name: "offset", selector: { text: {} } },
-  ]);
-
   public static get defaultConfig() {
     return {
       event: "sunrise" as SunTrigger["event"],
@@ -45,27 +26,69 @@ export class HaSunTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
+    const { offset, event } = this.trigger;
     return html`
-      <ha-form
-        .schema=${this._schema(this.hass.localize)}
-        .data=${this.trigger}
-        .hass=${this.hass}
-        .computeLabel=${this._computeLabelCallback}
+      <label>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.sun.event"
+        )}
+        <ha-formfield
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.sun.sunrise"
+          )}
+        >
+          <ha-radio
+            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"
+          )}
+        >
+          <ha-radio
+            name="event"
+            value="sunset"
+            .checked=${event === "sunset"}
+            @change=${this._radioGroupPicked}
+          ></ha-radio>
+        </ha-formfield>
+      </label>
+
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.sun.offset"
+        )}
+        name="offset"
+        .value=${offset}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.sun.${schema.name}`
-    );
+  private _radioGroupPicked(ev) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.trigger,
+        event: (ev.target as HaRadio).value,
+      },
+    });
+  }
+
+  static styles = css`
+    label {
+      display: flex;
+      align-items: center;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts

@@ -1,16 +1,12 @@
+import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import type { TimePatternTrigger } from "../../../../../data/automation";
-import type { HomeAssistant } from "../../../../../types";
-import type { TriggerElement } from "../ha-automation-trigger-row";
-
-const SCHEMA: HaFormSchema[] = [
-  { name: "hours", selector: { text: {} } },
-  { name: "minutes", selector: { text: {} } },
-  { name: "seconds", selector: { text: {} } },
-];
+import { TimePatternTrigger } from "../../../../../data/automation";
+import { HomeAssistant } from "../../../../../types";
+import {
+  handleChangeEvent,
+  TriggerElement,
+} from "../ha-automation-trigger-row";
 
 @customElement("ha-automation-trigger-time_pattern")
 export class HaTimePatternTrigger extends LitElement implements TriggerElement {
@@ -23,27 +19,38 @@ export class HaTimePatternTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
+    const { hours, minutes, seconds } = this.trigger;
     return html`
-      <ha-form
-        .hass=${this.hass}
-        .schema=${SCHEMA}
-        .data=${this.trigger}
-        .computeLabel=${this._computeLabelCallback}
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.time_pattern.hours"
+        )}
+        name="hours"
+        .value=${hours}
         @value-changed=${this._valueChanged}
-      ></ha-form>
+      ></paper-input>
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.time_pattern.minutes"
+        )}
+        name="minutes"
+        .value=${minutes}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
+      <paper-input
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.time_pattern.seconds"
+        )}
+        name="seconds"
+        .value=${seconds}
+        @value-changed=${this._valueChanged}
+      ></paper-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    const newTrigger = ev.detail.value;
-    fireEvent(this, "value-changed", { value: newTrigger });
+    handleChangeEvent(this, ev);
   }
-
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.triggers.type.time_pattern.${schema.name}`
-    );
 }
 
 declare global {