onboarding-location migrate list

src/onboarding/onboarding-location.ts

@@ -8,6 +8,7 @@ import {
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
@@ -18,11 +19,12 @@ import {
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
 import "../components/ha-button";
-import "../components/ha-list";
-import "../components/ha-list-item";
 import "../components/ha-spinner";
 import "../components/input/ha-input";
 import type { HaInput } from "../components/input/ha-input";
+import "../components/item/ha-list-item-base";
+import "../components/item/ha-list-item-button";
+import "../components/list/ha-list-base";
 import "../components/map/ha-locations-editor";
 import type {
   HaLocationsEditor,
@@ -141,7 +143,7 @@ class OnboardingLocation extends LitElement {
         ${
           this._places !== undefined
             ? html`
-                <ha-list activatable>
+                <ha-list-base>
                   ${
                     this._places?.length
                       ? this._places.map((place) => {
@@ -164,26 +166,27 @@ class OnboardingLocation extends LitElement {
                           ]
                             .filter(Boolean)
                             .join(", ");
-                          return html`<ha-list-item
+                          return html`<ha-list-item-button
                             @click=${this._itemClicked}
                             .placeId=${place.place_id}
-                            .selected=${this._highlightedMarker === place.place_id}
-                            .activated=${this._highlightedMarker === place.place_id}
-                            .twoline=${primary && secondary}
+                            class=${classMap({
+                              selected:
+                                this._highlightedMarker === place.place_id,
+                            })}
                           >
-                            ${primary || secondary}
-                            <span slot="secondary"
+                            <span slot="headline">${primary || secondary}</span>
+                            <span slot="supporting-text"
                               >${primary ? secondary : ""}</span
                             >
-                          </ha-list-item>`;
+                          </ha-list-item-button>`;
                         })
-                      : html`<ha-list-item noninteractive
-                          >${
-                            this._places === null ? "" : "No results"
-                          }</ha-list-item
-                        >`
+                      : html`<ha-list-item-base>
+                          <span slot="headline"
+                            >${this._places === null ? "" : "No results"}</span
+                          >
+                        </ha-list-item-base>`
                   }
-                </ha-list>
+                </ha-list-base>
               `
             : nothing
         }
@@ -505,17 +508,18 @@ class OnboardingLocation extends LitElement {
           border-radius: var(--mdc-shape-large, 16px);
           overflow: hidden;
         }
-        ha-list {
+        ha-list-base {
           width: 100%;
           border: 1px solid var(--divider-color);
           box-sizing: border-box;
           border-top-width: 0;
           border-bottom-left-radius: var(--mdc-shape-small, 4px);
           border-bottom-right-radius: var(--mdc-shape-small, 4px);
-          --mdc-list-vertical-padding: 0;
+          overflow: hidden;
+          --ha-row-item-min-height: 72px;
         }
-        ha-list-item {
-          height: 72px;
+        ha-list-item-button.selected::part(base) {
+          background-color: var(--ha-color-fill-neutral-quiet-hover);
         }
         .attribution {
           /* input helper style */