Migrate all paper checkbox elements to mwc (#10329)

package.json

@@ -75,7 +75,6 @@
     "@polymer/iron-input": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.3",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
     "@polymer/paper-dialog-scrollable": "^3.0.1",

src/components/ha-form/ha-form-boolean.ts

@@ -20,7 +20,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("paper-checkbox", true) private _input?: HTMLElement;
+  @query("ha-checkbox", true) private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {

src/dialogs/more-info/controls/more-info-camera.ts

@@ -1,5 +1,3 @@
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import {
   css,
   CSSResultGroup,
@@ -12,6 +10,7 @@ import { property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-camera-stream";
+import { HaCheckbox } from "../../../components/ha-checkbox";
 import {
   CameraEntity,
   CameraPreferences,
@@ -25,7 +24,7 @@ import type { HomeAssistant } from "../../../types";
 class MoreInfoCamera extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public stateObj?: CameraEntity;
+  @property({ attribute: false }) public stateObj?: CameraEntity;
 
   @state() private _cameraPrefs?: CameraPreferences;
 
@@ -55,12 +54,14 @@ class MoreInfoCamera extends LitElement {
       ></ha-camera-stream>
       ${this._cameraPrefs
         ? html`
-            <paper-checkbox
+            <ha-formfield>
+              <ha-checkbox
                 .checked=${this._cameraPrefs.preload_stream}
                 @change=${this._handleCheckboxChanged}
               >
                 Preload stream
-            </paper-checkbox>
+              </ha-checkbox>
+            </ha-formfield>
           `
         : undefined}
     `;
@@ -101,7 +102,7 @@ class MoreInfoCamera extends LitElement {
   }
 
   private async _handleCheckboxChanged(ev) {
-    const checkbox = ev.currentTarget as PaperCheckboxElement;
+    const checkbox = ev.currentTarget as HaCheckbox;
     try {
       this._cameraPrefs = await updateCameraPrefs(
         this.hass!,
@@ -122,7 +123,7 @@ class MoreInfoCamera extends LitElement {
         display: block;
         position: relative;
       }
-      paper-checkbox {
+      ha-checkbox {
         position: absolute;
         top: 0;
         right: 0;
@@ -135,3 +136,9 @@ class MoreInfoCamera extends LitElement {
 }
 
 customElements.define("more-info-camera", MoreInfoCamera);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-camera": MoreInfoCamera;
+  }
+}

src/panels/config/customize/types/ha-customize-boolean.js

@@ -1,14 +1,20 @@
-import "@polymer/paper-checkbox/paper-checkbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../../../components/ha-checkbox";
+import "../../../../components/ha-formfield";
 
 class HaCustomizeBoolean extends PolymerElement {
   static get template() {
     return html`
-      <paper-checkbox disabled="[[item.secondary]]" checked="{{item.value}}">
+      <ha-formfield label="[[item.description]]">
-        [[item.description]]
+        <ha-checkbox
-      </paper-checkbox>
+          disabled="[[item.secondary]]"
+          checked="[[item.value]]"
+          on-change="checkedChanged"
+        >
+        </ha-checkbox
+      ></ha-formfield>
     `;
   }
 
@@ -20,5 +26,9 @@ class HaCustomizeBoolean extends PolymerElement {
       },
     };
   }
+
+  checkedChanged(ev) {
+    this.item.value = ev.target.checked;
+  }
 }
 customElements.define("ha-customize-boolean", HaCustomizeBoolean);

src/panels/config/entities/ha-config-entities.ts

@@ -7,7 +7,6 @@ import {
   mdiPlus,
   mdiUndo,
 } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";

src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js

@@ -3,7 +3,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
@@ -308,12 +307,16 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                   >
                 </div>
                 <div class="form-group">
-                  <paper-checkbox
+                  <ha-formfield
-                    checked="{{entityIgnored}}"
+                    label="[[localize('ui.panel.config.zwave.node_management.exclude_entity')]]"
-                    class="form-control"
                   >
-                    [[localize('ui.panel.config.zwave.node_management.exclude_entity')]]
+                    <ha-checkbox
-                  </paper-checkbox>
+                      checked="[[entityIgnored]]"
+                      class="form-control"
+                      on-change="entityIgnoredChanged"
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
                   <paper-input
                     disabled="{{entityIgnored}}"
                     label="[[localize('ui.panel.config.zwave.node_management.pooling_intensity')]]"
@@ -706,6 +709,10 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
   _backTapped() {
     history.back();
   }
+
+  entityIgnoredChanged(ev) {
+    this.entityIgnored = ev.target.checked;
+  }
 }
 
 customElements.define("ha-config-zwave", HaConfigZwave);

src/panels/developer-tools/state/developer-tools-state.js

@@ -4,7 +4,6 @@ import {
   mdiInformationOutline,
   mdiRefresh,
 } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
@@ -18,6 +17,7 @@ import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-code-editor";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-checkbox";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
@@ -68,6 +68,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           );
         }
 
+        th.attributes {
+          position: relative;
+        }
+
+        th.attributes ha-checkbox {
+          position: absolute;
+          bottom: -8px;
+        }
+
         :host([rtl]) .entities th {
           text-align: right;
         }
@@ -197,12 +206,13 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           <tr>
             <th>[[localize('ui.panel.developer-tools.tabs.states.entity')]]</th>
             <th>[[localize('ui.panel.developer-tools.tabs.states.state')]]</th>
-            <th hidden$="[[narrow]]">
+            <th hidden$="[[narrow]]" class="attributes">
               [[localize('ui.panel.developer-tools.tabs.states.attributes')]]
-              <paper-checkbox
+              <ha-checkbox
-                checked="{{_showAttributes}}"
+                checked="[[_showAttributes]]"
                 on-change="saveAttributeCheckboxState"
-              ></paper-checkbox>
+                reducedTouchTarget
+              ></ha-checkbox>
             </th>
           </tr>
           <tr>
@@ -545,6 +555,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   saveAttributeCheckboxState(ev) {
+    this._showAttributes = ev.target.checked;
     try {
       localStorage.setItem("devToolsShowAttributes", ev.target.checked);
     } catch (e) {

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -1,5 +1,4 @@
 import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
@@ -17,6 +16,7 @@ import { repeat } from "lit/directives/repeat";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import "../../../components/ha-checkbox";
 import {
   addItem,
   clearItems,
@@ -178,12 +178,12 @@ class HuiShoppingListCard
                 (item) =>
                   html`
                     <div class="editRow">
-                      <paper-checkbox
+                      <ha-checkbox
                         tabindex="0"
-                        ?checked=${item.complete}
+                        .checked=${item.complete}
                         .itemId=${item.id}
-                        @click=${this._completeItem}
+                        @change=${this._completeItem}
-                      ></paper-checkbox>
+                      ></ha-checkbox>
                       <paper-input
                         no-label-float
                         .value=${item.name}
@@ -207,12 +207,12 @@ class HuiShoppingListCard
         (item) =>
           html`
             <div class="editRow" item-id=${item.id}>
-              <paper-checkbox
+              <ha-checkbox
                 tabindex="0"
-                ?checked=${item.complete}
+                .checked=${item.complete}
                 .itemId=${item.id}
-                @click=${this._completeItem}
+                @change=${this._completeItem}
-              ></paper-checkbox>
+              ></ha-checkbox>
               <paper-input
                 no-label-float
                 .value=${item.name}
@@ -381,10 +381,8 @@ class HuiShoppingListCard
         cursor: pointer;
       }
 
-      paper-checkbox {
+      ha-checkbox {
-        padding-left: 4px;
+        margin-left: -12px;
-        padding-right: 20px;
-        --paper-checkbox-label-spacing: 0px;
       }
 
       paper-input {

yarn.lock

@@ -3246,20 +3246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-checkbox@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@polymer/paper-checkbox@npm:3.1.0"
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
-    "@polymer/iron-checked-element-behavior": ^3.0.0-pre.26
-    "@polymer/paper-behaviors": ^3.0.0-pre.27
-    "@polymer/paper-ripple": ^3.0.0-pre.26
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 95c0341387adf2033b7e1423a87230cadfae6e9459eb555c75e937c9b7886ea10e7b5a4033b2401883a9336531c4c47b61dabbca49d556dee81fa73d5faafbeb
-  languageName: node
-  linkType: hard
-
 "@polymer/paper-dialog-behavior@npm:^3.0.0-pre.26, @polymer/paper-dialog-behavior@npm:^3.0.1":
   version: 3.0.1
   resolution: "@polymer/paper-dialog-behavior@npm:3.0.1"
@@ -9109,7 +9095,6 @@ fsevents@^1.2.7:
     "@polymer/iron-input": ^3.0.1
     "@polymer/iron-overlay-behavior": ^3.0.3
     "@polymer/iron-resizable-behavior": ^3.0.1
-    "@polymer/paper-checkbox": ^3.1.0
     "@polymer/paper-dialog": ^3.0.1
     "@polymer/paper-dialog-behavior": ^3.0.1
     "@polymer/paper-dialog-scrollable": ^3.0.1