Replace some paper-items by list-item (#19314)

* system log card

* cloud login

* cloud account

* ha config voice assistants assistants

* ha config person

* ha-device-entities-card

* cloud login

* change --paper-item-icon-color into --state-icon-color

* Apply code review

* Revert "change --paper-item-icon-color into --state-icon-color"

This reverts commit b91ef0017ea9a6faf67aac9448706efed4f2c025.

* Remove unneeded mwc-lists

src/panels/config/cloud/account/cloud-account.ts

@@ -1,6 +1,4 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
@@ -10,6 +8,7 @@ import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-tip";
+import "../../../../components/ha-list-item";
 import {
   cloudLogout,
   CloudStatusLoggedIn,
@@ -65,12 +64,12 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
               )}
             >
               <div class="account-row">
-                <paper-item-body two-line>
+                <ha-list-item twoline>
                   ${this.cloudStatus.email.replace(
                     /(\w{3})[\w.-]+@([\w.]+\w)/,
                     "$1***@$2"
                   )}
-                  <div secondary class="wrap">
+                  <span slot="secondary" class="wrap">
                     ${this._subscription
                       ? this._subscription.human_description.replace(
                           "{periodEnd}",
@@ -87,8 +86,8 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
                       : this.hass.localize(
                           "ui.panel.config.cloud.account.fetching_subscription"
                         )}
-                  </div>
-                </paper-item-body>
+                  </span>
+                </ha-list-item>
               </div>
 
               ${this.cloudStatus.cloud === "connecting" &&
@@ -103,12 +102,10 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
                 : ""}
 
               <div class="account-row">
-                <paper-item-body>
+                <ha-list-item>
                   ${this.hass.localize(
                     "ui.panel.config.cloud.account.connection_status"
-                  )}
-                </paper-item-body>
-                <div class="status">
+                  )}:
                   ${this.cloudStatus.cloud === "connected"
                     ? this.hass.localize(
                         "ui.panel.config.cloud.account.connected"
@@ -120,7 +117,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
                       : this.hass.localize(
                           "ui.panel.config.cloud.account.connecting"
                         )}
-                </div>
+                </ha-list-item>
               </div>
 
               <div class="card-actions">

src/panels/config/cloud/login/cloud-login.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -9,6 +8,7 @@ import "../../../../components/buttons/ha-progress-button";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-next";
+import "../../../../components/ha-list-item";
 import type { HaTextField } from "../../../../components/ha-textfield";
 import "../../../../components/ha-textfield";
 import { cloudLogin } from "../../../../data/cloud";
@@ -166,19 +166,19 @@ export class CloudLogin extends LitElement {
             </ha-card>
 
             <ha-card outlined>
-              <paper-item @click=${this._handleRegister}>
-                <paper-item-body two-line>
+              <mwc-list>
+                <ha-list-item @click=${this._handleRegister} twoline hasMeta>
                   ${this.hass.localize(
                     "ui.panel.config.cloud.login.start_trial"
                   )}
-                  <div secondary>
+                  <span slot="secondary">
                     ${this.hass.localize(
                       "ui.panel.config.cloud.login.trial_info"
                     )}
-                  </div>
-                </paper-item-body>
-                <ha-icon-next></ha-icon-next>
-              </paper-item>
+                  </span>
+                  <ha-icon-next slot="meta"></ha-icon-next>
+                </ha-list-item>
+              </mwc-list>
             </ha-card>
           </ha-config-section>
         </div>
@@ -293,9 +293,6 @@ export class CloudLogin extends LitElement {
         [slot="introduction"] a {
           color: var(--primary-color);
         }
-        paper-item {
-          cursor: pointer;
-        }
         ha-card {
           overflow: hidden;
         }

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -1,6 +1,4 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list";
 import {
   css,
   CSSResultGroup,
@@ -17,6 +15,7 @@ import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefi
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-list-item";
 import {
   ExtEntityRegistryEntry,
   getExtendedEntityRegistryEntry,
@@ -91,11 +90,13 @@ export class HaDeviceEntitiesCard extends LitElement {
     return html`
       <ha-card outlined .header=${this.header}>
         <div id="entities">
-          ${shownEntities.map((entry) =>
-            this.hass.states[entry.entity_id]
-              ? this._renderEntity(entry)
-              : this._renderEntry(entry)
-          )}
+          <mwc-list>
+            ${shownEntities.map((entry) =>
+              this.hass.states[entry.entity_id]
+                ? this._renderEntity(entry)
+                : this._renderEntry(entry)
+            )}
+          </mwc-list>
         </div>
         ${hiddenEntities.length
           ? !this.showHidden
@@ -108,7 +109,9 @@ export class HaDeviceEntitiesCard extends LitElement {
                 </button>
               `
             : html`
-                ${hiddenEntities.map((entry) => this._renderEntry(entry))}
+                <mwc-list>
+                  ${hiddenEntities.map((entry) => this._renderEntry(entry))}
+                </mwc-list>
                 <button class="show-more" @click=${this._toggleShowHidden}>
                   ${this.hass.localize(
                     "ui.panel.config.devices.entities.show_less"
@@ -197,26 +200,23 @@ export class HaDeviceEntitiesCard extends LitElement {
       (entry as ExtEntityRegistryEntry).original_name;
 
     return html`
-      <paper-icon-item
+      <ha-list-item
+        graphic="icon"
         class="disabled-entry"
         .entry=${entry}
         @click=${this._openEditEntry}
       >
         <ha-svg-icon
-          slot="item-icon"
+          slot="graphic"
           .path=${domainIcon(computeDomain(entry.entity_id))}
         ></ha-svg-icon>
-        <paper-item-body>
-          <div class="name">
-            ${name
-              ? stripPrefixFromEntityName(
-                  name,
-                  this.deviceName.toLowerCase()
-                ) || name
-              : entry.entity_id}
-          </div>
-        </paper-item-body>
-      </paper-icon-item>
+        <div class="name">
+          ${name
+            ? stripPrefixFromEntityName(name, this.deviceName.toLowerCase()) ||
+              name
+            : entry.entity_id}
+        </div>
+      </ha-list-item>
     `;
   }
 

src/panels/config/logs/system-log-card.ts

@@ -1,6 +1,5 @@
 import { mdiRefresh } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -10,6 +9,7 @@ import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import { domainToName } from "../../../data/integration";
 import {
   fetchSystemLog,
@@ -122,12 +122,16 @@ export class SystemLogCard extends LitElement {
                           { term: this.filter }
                         )}
                       </div>`
-                    : filteredItems.map(
-                        (item, idx) => html`
-                          <paper-item @click=${this._openLog} .logItem=${item}>
-                            <paper-item-body two-line>
-                              <div class="row">${item.message[0]}</div>
-                              <div class="row-secondary" secondary>
+                    : html`<mwc-list
+                        >${filteredItems.map(
+                          (item, idx) => html`
+                            <ha-list-item
+                              @click=${this._openLog}
+                              .logItem=${item}
+                              twoline
+                            >
+                              ${item.message[0]}
+                              <span slot="secondary" class="secondary">
                                 ${this._timestamp(item)} –
                                 ${html`(<span class=${item.level}
                                     >${this.hass.localize(
@@ -149,11 +153,11 @@ export class SystemLogCard extends LitElement {
                                 ${item.count > 1
                                   ? html` - ${this._multipleMessages(item)} `
                                   : nothing}
-                              </div>
-                            </paper-item-body>
-                          </paper-item>
-                        `
-                      )}
+                              </span>
+                            </ha-list-item>
+                          `
+                        )}</mwc-list
+                      >`}
 
                 <div class="card-actions">
                   <ha-call-service-button
@@ -219,10 +223,6 @@ export class SystemLogCard extends LitElement {
         font-weight: normal;
       }
 
-      paper-item {
-        cursor: pointer;
-      }
-
       .system-log-intro {
         margin: 16px;
       }

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

@@ -1,12 +1,12 @@
 import { mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-list-item";
 import "../../../components/user/ha-person-badge";
 import {
   createPerson,
@@ -90,17 +90,24 @@ export class HaConfigPerson extends LitElement {
           </span>
 
           <ha-card outlined class="storage">
-            ${this._storageItems.map(
-              (entry) => html`
-                <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
-                  <ha-person-badge
-                    slot="item-icon"
-                    .person=${entry}
-                  ></ha-person-badge>
-                  <paper-item-body> ${entry.name} </paper-item-body>
-                </paper-icon-item>
-              `
-            )}
+            <mwc-list>
+              ${this._storageItems.map(
+                (entry) => html`
+                  <ha-list-item
+                    graphic="avatar"
+                    @click=${this._openEditEntry}
+                    .entry=${entry}
+                  >
+                    <ha-person-badge
+                      .hass=${this.hass}
+                      .person=${entry}
+                      slot="graphic"
+                    ></ha-person-badge>
+                    <span>${entry.name}</span>
+                  </ha-list-item>
+                `
+              )}
+            </mwc-list>
             ${this._storageItems.length === 0
               ? html`
                   <div class="empty">
@@ -119,20 +126,23 @@ export class HaConfigPerson extends LitElement {
           ${this._configItems.length > 0
             ? html`
                 <ha-card outlined header="Configuration.yaml persons">
-                  ${this._configItems.map(
-                    (entry) => html`
-                      <paper-icon-item>
-                        <ha-person-badge
-                          slot="item-icon"
-                          .person=${entry}
-                        ></ha-person-badge>
-                        <paper-item-body> ${entry.name} </paper-item-body>
-                      </paper-icon-item>
-                    `
-                  )}
+                  <mwc-list>
+                    ${this._configItems.map(
+                      (entry) => html`
+                        <ha-list-item graphic="avatar">
+                          <ha-person-badge
+                            .hass=${this.hass}
+                            .person=${entry}
+                            slot="graphic"
+                          ></ha-person-badge>
+                          <span>${entry.name}</span>
+                        </ha-list-item>
+                      `
+                    )}
+                  </mwc-list>
                 </ha-card>
               `
-            : ""}
+            : nothing}
         </ha-config-section>
         <ha-fab
           slot="fab"
@@ -282,13 +292,6 @@ export class HaConfigPerson extends LitElement {
         align-items: center;
         justify-content: space-around;
       }
-      paper-icon-item {
-        padding-top: 4px;
-        padding-bottom: 4px;
-      }
-      ha-card.storage paper-icon-item {
-        cursor: pointer;
-      }
     `;
   }
 }

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -1,5 +1,3 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";