From 8999ca2ea06a1525d6747e1bd279a6212ab8ebfe Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Fri, 18 Feb 2022 14:51:37 -0600
Subject: [PATCH] Entity Settings Page to MWC 3 (#11694)

---
 .../entities/entity-registry-basic-editor.ts  | 19 +++---
 .../entities/entity-registry-settings.ts      | 39 +++++++-----
 .../config/helpers/dialog-helper-detail.ts    | 62 +++++++++----------
 .../config/helpers/forms/ha-counter-form.ts   | 42 +++++++------
 .../helpers/forms/ha-input_boolean-form.ts    | 16 +++--
 .../helpers/forms/ha-input_button-form.ts     | 16 +++--
 .../helpers/forms/ha-input_datetime-form.ts   | 16 +++--
 .../helpers/forms/ha-input_number-form.ts     | 46 ++++++++------
 .../helpers/forms/ha-input_select-form.ts     | 59 ++++++++++--------
 .../helpers/forms/ha-input_text-form.ts       | 37 ++++++-----
 .../config/helpers/forms/ha-timer-form.ts     | 21 ++++---
 11 files changed, 211 insertions(+), 162 deletions(-)

diff --git a/src/panels/config/entities/entity-registry-basic-editor.ts b/src/panels/config/entities/entity-registry-basic-editor.ts
index af79a115aa..52240794b3 100644
--- a/src/panels/config/entities/entity-registry-basic-editor.ts
+++ b/src/panels/config/entities/entity-registry-basic-editor.ts
@@ -1,10 +1,10 @@
-import "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-switch";
+import "../../../components/ha-textfield";
 import type { HaSwitch } from "../../../components/ha-switch";
 import {
   DeviceRegistryEntry,
@@ -17,7 +17,6 @@ import {
 } from "../../../data/entity_registry";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import type { PolymerChangedEvent } from "../../../polymer-types";
 import type { HomeAssistant } from "../../../types";
 
 @customElement("ha-registry-basic-editor")
@@ -123,16 +122,16 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
       computeDomain(this.entry.entity_id);
 
     return html`
-      <paper-input
+      <ha-textfield
+        error-message="Domain needs to stay the same"
         .value=${this._entityId}
-        @value-changed=${this._entityIdChanged}
         .label=${this.hass.localize(
           "ui.dialogs.entity_registry.editor.entity_id"
         )}
-        error-message="Domain needs to stay the same"
         .invalid=${invalidDomainUpdate}
         .disabled=${this._submitting}
-      ></paper-input>
+        @input=${this._entityIdChanged}
+      ></ha-textfield>
       <ha-area-picker
         .hass=${this.hass}
         .value=${this._areaId}
@@ -177,8 +176,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
     this._areaId = ev.detail.value;
   }
 
-  private _entityIdChanged(ev: PolymerChangedEvent<string>): void {
-    this._entityId = ev.detail.value;
+  private _entityIdChanged(ev): void {
+    this._entityId = ev.target.value;
   }
 
   private _disabledByChanged(ev: Event): void {
@@ -199,6 +198,10 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
       .secondary {
         color: var(--secondary-text-color);
       }
+      ha-textfield {
+        display: block;
+        margin-bottom: 8px;
+      }
     `;
   }
 }
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index f4c40e335f..4b73600b59 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -1,7 +1,7 @@
+import "../../../components/ha-alert";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-select/mwc-select";
-import "@polymer/paper-input/paper-input";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -19,6 +19,7 @@ import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-switch";
+import "../../../components/ha-textfield";
 import type { HaSwitch } from "../../../components/ha-switch";
 import {
   DeviceRegistryEntry,
@@ -36,7 +37,6 @@ import {
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import type { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
@@ -137,15 +137,18 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
             </div>
           `
         : ""}
-      ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+      ${this._error
+        ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+        : ""}
       <div class="form container">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
-          @value-changed=${this._nameChanged}
           .label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
-          .placeholder=${this.entry.original_name}
+          .invalid=${invalidDomainUpdate}
           .disabled=${this._submitting}
-        ></paper-input>
+          .placeholder=${this.entry.original_name}
+          @input=${this._nameChanged}
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           @value-changed=${this._iconChanged}
@@ -176,16 +179,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               )}
             </mwc-select>`
           : ""}
-        <paper-input
+        <ha-textfield
+          error-message="Domain needs to stay the same"
           .value=${this._entityId}
-          @value-changed=${this._entityIdChanged}
           .label=${this.hass.localize(
             "ui.dialogs.entity_registry.editor.entity_id"
           )}
-          error-message="Domain needs to stay the same"
           .invalid=${invalidDomainUpdate}
           .disabled=${this._submitting}
-        ></paper-input>
+          @input=${this._entityIdChanged}
+        ></ha-textfield>
         ${!this.entry.device_id
           ? html`<ha-area-picker
               .hass=${this.hass}
@@ -282,19 +285,19 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _nameChanged(ev: PolymerChangedEvent<string>): void {
+  private _nameChanged(ev): void {
     this._error = undefined;
-    this._name = ev.detail.value;
+    this._name = ev.target.value;
   }
 
-  private _iconChanged(ev: PolymerChangedEvent<string>): void {
+  private _iconChanged(ev: CustomEvent): void {
     this._error = undefined;
     this._icon = ev.detail.value;
   }
 
-  private _entityIdChanged(ev: PolymerChangedEvent<string>): void {
+  private _entityIdChanged(ev): void {
     this._error = undefined;
-    this._entityId = ev.detail.value;
+    this._entityId = ev.target.value;
   }
 
   private _deviceClassChanged(ev): void {
@@ -423,6 +426,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         ha-switch {
           margin-right: 16px;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
         .row {
           margin: 8px 0;
           color: var(--primary-text-color);
diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts
index eace117eb7..bbd0b645e1 100644
--- a/src/panels/config/helpers/dialog-helper-detail.ts
+++ b/src/panels/config/helpers/dialog-helper-detail.ts
@@ -116,36 +116,35 @@ export class DialogHelperDetail extends LitElement {
               ${Object.keys(HELPERS).map((platform: string) => {
                 const isLoaded = isComponentLoaded(this.hass, platform);
                 return html`
-                  <div class="form">
-                    <paper-icon-item
-                      .disabled=${!isLoaded}
-                      @click=${this._platformPicked}
-                      @keydown=${this._handleEnter}
-                      .platform=${platform}
-                      dialogInitialFocus
-                    >
-                      <ha-svg-icon
-                        slot="item-icon"
-                        .path=${domainIcon(platform)}
-                      ></ha-svg-icon>
-                      <span class="item-text">
-                        ${this.hass.localize(
-                          `ui.panel.config.helpers.types.${platform}`
-                        ) || platform}
-                      </span>
-                    </paper-icon-item>
-                    ${!isLoaded
-                      ? html`
-                          <paper-tooltip animation-delay="0"
-                            >${this.hass.localize(
-                              "ui.dialogs.helper_settings.platform_not_loaded",
-                              "platform",
-                              platform
-                            )}</paper-tooltip
-                          >
-                        `
-                      : ""}
-                  </div>
+                  <mwc-list-item
+                    .disabled=${!isLoaded}
+                    .platform=${platform}
+                    @click=${this._platformPicked}
+                    @keydown=${this._handleEnter}
+                    dialogInitialFocus
+                    graphic="icon"
+                  >
+                    <ha-svg-icon
+                      slot="graphic"
+                      .path=${domainIcon(platform)}
+                    ></ha-svg-icon>
+                    <span class="item-text">
+                      ${this.hass.localize(
+                        `ui.panel.config.helpers.types.${platform}`
+                      ) || platform}
+                    </span>
+                  </mwc-list-item>
+                  ${!isLoaded
+                    ? html`
+                        <paper-tooltip animation-delay="0"
+                          >${this.hass.localize(
+                            "ui.dialogs.helper_settings.platform_not_loaded",
+                            "platform",
+                            platform
+                          )}</paper-tooltip
+                        >
+                      `
+                    : ""}
                 `;
               })}
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
@@ -208,9 +207,6 @@ export class DialogHelperDetail extends LitElement {
         ha-dialog.button-left {
           --justify-action-buttons: flex-start;
         }
-        paper-icon-item {
-          cursor: pointer;
-        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-counter-form.ts b/src/panels/config/helpers/forms/ha-counter-form.ts
index badebfd38c..9aa1186577 100644
--- a/src/panels/config/helpers/forms/ha-counter-form.ts
+++ b/src/panels/config/helpers/forms/ha-counter-form.ts
@@ -1,9 +1,9 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-switch";
+import "../../../../components/ha-textfield";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import { Counter } from "../../../../data/counter";
 import { haStyle } from "../../../../resources/styles";
@@ -68,10 +68,10 @@ class HaCounterForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -80,7 +80,7 @@ class HaCounterForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -89,44 +89,44 @@ class HaCounterForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-picker>
-        <paper-input
+        <ha-textfield
           .value=${this._minimum}
           .configValue=${"minimum"}
           type="number"
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.minimum"
           )}
-        ></paper-input>
-        <paper-input
+        ></ha-textfield>
+        <ha-textfield
           .value=${this._maximum}
           .configValue=${"maximum"}
           type="number"
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.maximum"
           )}
-        ></paper-input>
-        <paper-input
+        ></ha-textfield>
+        <ha-textfield
           .value=${this._initial}
           .configValue=${"initial"}
           type="number"
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.counter.initial"
           )}
-        ></paper-input>
+        ></ha-textfield>
         ${this.hass.userData?.showAdvanced
           ? html`
-              <paper-input
+              <ha-textfield
                 .value=${this._step}
                 .configValue=${"step"}
                 type="number"
-                @value-changed=${this._valueChanged}
+                @input=${this._valueChanged}
                 .label=${this.hass!.localize(
                   "ui.dialogs.helper_settings.counter.step"
                 )}
-              ></paper-input>
+              ></ha-textfield>
               <div class="row">
                 <ha-switch
                   .checked=${this._restore}
@@ -155,12 +155,12 @@ class HaCounterForm extends LitElement {
     const configValue = target.configValue;
     const value =
       target.type === "number"
-        ? ev.detail.value !== ""
-          ? Number(ev.detail.value)
+        ? target.value !== ""
+          ? Number(target.value)
           : undefined
         : target.localName === "ha-switch"
         ? (ev.target as HaSwitch).checked
-        : ev.detail.value;
+        : ev.detail?.value || target.value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -192,6 +192,10 @@ class HaCounterForm extends LitElement {
         .row div {
           margin-left: 16px;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
index bc5f45c35c..a6a099eea3 100644
--- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
@@ -1,8 +1,8 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
 import { InputBoolean } from "../../../../data/input_boolean";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -46,10 +46,10 @@ class HaInputBooleanForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -58,7 +58,7 @@ class HaInputBooleanForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -77,7 +77,7 @@ class HaInputBooleanForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -85,7 +85,7 @@ class HaInputBooleanForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -102,6 +102,10 @@ class HaInputBooleanForm extends LitElement {
         .row {
           padding: 16px 0;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-input_button-form.ts b/src/panels/config/helpers/forms/ha-input_button-form.ts
index e61faa498a..8f12946f09 100644
--- a/src/panels/config/helpers/forms/ha-input_button-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_button-form.ts
@@ -1,8 +1,8 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
 import { InputButton } from "../../../../data/input_button";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -46,10 +46,10 @@ class HaInputButtonForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -58,7 +58,7 @@ class HaInputButtonForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -77,7 +77,7 @@ class HaInputButtonForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -85,7 +85,7 @@ class HaInputButtonForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -102,6 +102,10 @@ class HaInputButtonForm extends LitElement {
         .row {
           padding: 16px 0;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
index b160edb12f..34eb59b5f8 100644
--- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
@@ -1,10 +1,10 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-textfield";
 import type { HaRadio } from "../../../../components/ha-radio";
 import { InputDateTime } from "../../../../data/input_datetime";
 import { haStyle } from "../../../../resources/styles";
@@ -60,10 +60,10 @@ class HaInputDateTimeForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -72,7 +72,7 @@ class HaInputDateTimeForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -142,7 +142,7 @@ class HaInputDateTimeForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -150,7 +150,7 @@ class HaInputDateTimeForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -167,6 +167,10 @@ class HaInputDateTimeForm extends LitElement {
         .row {
           padding: 16px 0;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts
index 9d6960062a..759d96a507 100644
--- a/src/panels/config/helpers/forms/ha-input_number-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_number-form.ts
@@ -1,8 +1,8 @@
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
 import { InputNumber } from "../../../../data/input_number";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -73,10 +73,10 @@ class HaInputNumberForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -85,7 +85,7 @@ class HaInputNumberForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -94,24 +94,24 @@ class HaInputNumberForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-picker>
-        <paper-input
+        <ha-textfield
           .value=${this._min}
           .configValue=${"min"}
           type="number"
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.input_number.min"
           )}
-        ></paper-input>
-        <paper-input
+        ></ha-textfield>
+        <ha-textfield
           .value=${this._max}
           .configValue=${"max"}
           type="number"
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.input_number.max"
           )}
-        ></paper-input>
+        ></ha-textfield>
         ${this.hass.userData?.showAdvanced
           ? html`
               <div class="layout horizontal center justified">
@@ -143,24 +143,24 @@ class HaInputNumberForm extends LitElement {
                   ></ha-radio>
                 </ha-formfield>
               </div>
-              <paper-input
+              <ha-textfield
                 .value=${this._step}
                 .configValue=${"step"}
                 type="number"
-                @value-changed=${this._valueChanged}
+                @input=${this._valueChanged}
                 .label=${this.hass!.localize(
                   "ui.dialogs.helper_settings.input_number.step"
                 )}
-              ></paper-input>
+              ></ha-textfield>
 
-              <paper-input
-                .value=${this._unit_of_measurement}
+              <ha-textfield
+                .value=${this._unit_of_measurement || ""}
                 .configValue=${"unit_of_measurement"}
-                @value-changed=${this._valueChanged}
+                @input=${this._valueChanged}
                 .label=${this.hass!.localize(
                   "ui.dialogs.helper_settings.input_number.unit_of_measurement"
                 )}
-              ></paper-input>
+              ></ha-textfield>
             `
           : ""}
       </div>
@@ -181,7 +181,10 @@ class HaInputNumberForm extends LitElement {
     const target = ev.target as any;
     const configValue = target.configValue;
     const value =
-      target.type === "number" ? Number(ev.detail.value) : ev.detail.value;
+      target.type === "number"
+        ? Number(target.value)
+        : ev.detail?.value || target.value;
+
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -189,7 +192,7 @@ class HaInputNumberForm extends LitElement {
     if (value === undefined || value === "") {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -203,6 +206,11 @@ class HaInputNumberForm extends LitElement {
         .form {
           color: var(--primary-text-color);
         }
+
+        ha-textfield {
+          display: block;
+          margin-bottom: 8px;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index 8c23ff0c34..cec1eb952e 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -1,14 +1,13 @@
 import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list-item";
 import { mdiDelete } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
 import type { InputSelect } from "../../../../data/input_select";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
@@ -28,7 +27,7 @@ class HaInputSelectForm extends LitElement {
 
   @state() private _options: string[] = [];
 
-  @query("#option_input", true) private _optionInput?: PaperInputElement;
+  @query("#option_input", true) private _optionInput?: HaTextField;
 
   set item(item: InputSelect) {
     this._item = item;
@@ -59,19 +58,19 @@ class HaInputSelectForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
-          .value=${this._name}
-          .configValue=${"name"}
-          @value-changed=${this._valueChanged}
-          .label=${this.hass!.localize(
-            "ui.dialogs.helper_settings.generic.name"
-          )}
+        <ha-textfield
+          dialogInitialFocus
           .errorMessage=${this.hass!.localize(
             "ui.dialogs.helper_settings.required_error_msg"
           )}
+          .value=${this._name}
+          .label=${this.hass!.localize(
+            "ui.dialogs.helper_settings.generic.name"
+          )}
           .invalid=${nameInvalid}
-          dialogInitialFocus
-        ></paper-input>
+          .configValue=${"name"}
+          @input=${this._valueChanged}
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -86,9 +85,10 @@ class HaInputSelectForm extends LitElement {
         ${this._options.length
           ? this._options.map(
               (option, index) => html`
-                <paper-item class="option">
-                  <paper-item-body> ${option} </paper-item-body>
+                <mwc-list-item class="option" hasMeta noninteractive>
+                  ${option}
                   <ha-icon-button
+                    slot="meta"
                     .index=${index}
                     .label=${this.hass.localize(
                       "ui.dialogs.helper_settings.input_select.remove_option"
@@ -96,25 +96,25 @@ class HaInputSelectForm extends LitElement {
                     @click=${this._removeOption}
                     .path=${mdiDelete}
                   ></ha-icon-button>
-                </paper-item>
+                </mwc-list-item>
               `
             )
           : html`
-              <paper-item>
+              <mwc-list-item noninteractive>
                 ${this.hass!.localize(
                   "ui.dialogs.helper_settings.input_select.no_options"
                 )}
-              </paper-item>
+              </mwc-list-item>
             `}
-        <div class="layout horizontal bottom">
-          <paper-input
+        <div class="layout horizontal center">
+          <ha-textfield
             class="flex-auto"
             id="option_input"
             .label=${this.hass!.localize(
               "ui.dialogs.helper_settings.input_select.add_option"
             )}
             @keydown=${this._handleKeyAdd}
-          ></paper-input>
+          ></ha-textfield>
           <mwc-button @click=${this._addOption}
             >${this.hass!.localize(
               "ui.dialogs.helper_settings.input_select.add"
@@ -135,7 +135,7 @@ class HaInputSelectForm extends LitElement {
 
   private _addOption() {
     const input = this._optionInput;
-    if (!input || !input.value) {
+    if (!input?.value) {
       return;
     }
     fireEvent(this, "value-changed", {
@@ -167,7 +167,8 @@ class HaInputSelectForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
+
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -175,7 +176,7 @@ class HaInputSelectForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -193,10 +194,18 @@ class HaInputSelectForm extends LitElement {
           border: 1px solid var(--divider-color);
           border-radius: 4px;
           margin-top: 4px;
+          --mdc-icon-button-size: 24px;
         }
         mwc-button {
           margin-left: 8px;
         }
+        ha-textfield {
+          display: block;
+          margin-bottom: 8px;
+        }
+        #option_input {
+          margin-top: 8px;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-input_text-form.ts b/src/panels/config/helpers/forms/ha-input_text-form.ts
index 7c912ca3df..f34bfa7e8c 100644
--- a/src/panels/config/helpers/forms/ha-input_text-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_text-form.ts
@@ -1,8 +1,9 @@
-import "@polymer/paper-input/paper-input";
+import "../../../../components/ha-form/ha-form";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
 import type { HaRadio } from "../../../../components/ha-radio";
 import { InputText } from "../../../../data/input_text";
 import { haStyle } from "../../../../resources/styles";
@@ -64,10 +65,10 @@ class HaInputTextForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -76,7 +77,7 @@ class HaInputTextForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -87,28 +88,28 @@ class HaInputTextForm extends LitElement {
         ></ha-icon-picker>
         ${this.hass.userData?.showAdvanced
           ? html`
-              <paper-input
+              <ha-textfield
                 .value=${this._min}
                 .configValue=${"min"}
                 type="number"
                 min="0"
                 max="255"
-                @value-changed=${this._valueChanged}
+                @input=${this._valueChanged}
                 .label=${this.hass!.localize(
                   "ui.dialogs.helper_settings.input_text.min"
                 )}
-              ></paper-input>
-              <paper-input
+              ></ha-textfield>
+              <ha-textfield
                 .value=${this._max}
                 .configValue=${"max"}
                 min="0"
                 max="255"
                 type="number"
-                @value-changed=${this._valueChanged}
+                @input=${this._valueChanged}
                 .label=${this.hass!.localize(
                   "ui.dialogs.helper_settings.input_text.max"
                 )}
-              ></paper-input>
+              ></ha-textfield>
               <div class="layout horizontal center justified">
                 ${this.hass.localize(
                   "ui.dialogs.helper_settings.input_text.mode"
@@ -138,14 +139,14 @@ class HaInputTextForm extends LitElement {
                   ></ha-radio>
                 </ha-formfield>
               </div>
-              <paper-input
-                .value=${this._pattern}
+              <ha-textfield
+                .value=${this._pattern || ""}
                 .configValue=${"pattern"}
-                @value-changed=${this._valueChanged}
+                @input=${this._valueChanged}
                 .label=${this.hass!.localize(
                   "ui.dialogs.helper_settings.input_text.pattern"
                 )}
-              ></paper-input>
+              ></ha-textfield>
             `
           : ""}
       </div>
@@ -164,7 +165,7 @@ class HaInputTextForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -172,7 +173,7 @@ class HaInputTextForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -189,6 +190,10 @@ class HaInputTextForm extends LitElement {
         .row {
           padding: 16px 0;
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts
index 32e1f25e7a..5d7b13cfad 100644
--- a/src/panels/config/helpers/forms/ha-timer-form.ts
+++ b/src/panels/config/helpers/forms/ha-timer-form.ts
@@ -2,6 +2,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-textfield";
 import { DurationDict, Timer } from "../../../../data/timer";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -49,10 +50,10 @@ class HaTimerForm extends LitElement {
 
     return html`
       <div class="form">
-        <paper-input
+        <ha-textfield
           .value=${this._name}
           .configValue=${"name"}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass!.localize(
             "ui.dialogs.helper_settings.generic.name"
           )}
@@ -61,7 +62,7 @@ class HaTimerForm extends LitElement {
           )}
           .invalid=${nameInvalid}
           dialogInitialFocus
-        ></paper-input>
+        ></ha-textfield>
         <ha-icon-picker
           .value=${this._icon}
           .configValue=${"icon"}
@@ -70,14 +71,14 @@ class HaTimerForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-picker>
-        <paper-input
+        <ha-textfield
           .configValue=${"duration"}
           .value=${this._duration}
-          @value-changed=${this._valueChanged}
+          @input=${this._valueChanged}
           .label=${this.hass.localize(
             "ui.dialogs.helper_settings.timer.duration"
           )}
-        ></paper-input>
+        ></ha-textfield>
       </div>
     `;
   }
@@ -88,7 +89,7 @@ class HaTimerForm extends LitElement {
     }
     ev.stopPropagation();
     const configValue = (ev.target as any).configValue;
-    const value = ev.detail.value;
+    const value = ev.detail?.value || (ev.target as any).value;
     if (this[`_${configValue}`] === value) {
       return;
     }
@@ -96,7 +97,7 @@ class HaTimerForm extends LitElement {
     if (!value) {
       delete newValue[configValue];
     } else {
-      newValue[configValue] = ev.detail.value;
+      newValue[configValue] = value;
     }
     fireEvent(this, "value-changed", {
       value: newValue,
@@ -110,6 +111,10 @@ class HaTimerForm extends LitElement {
         .form {
           color: var(--primary-text-color);
         }
+        ha-textfield {
+          display: block;
+          margin: 8px 0;
+        }
       `,
     ];
   }