ha-scene-editor migrate list

src/panels/config/scene/ha-scene-editor.ts

@@ -38,8 +38,10 @@ import "../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-list";
 import "../../../components/ha-svg-icon";
+import "../../../components/item/ha-list-item-base";
+import "../../../components/item/ha-list-item-button";
+import "../../../components/list/ha-list-base";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
   fireRelatedContext,
@@ -441,7 +443,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                           @click=${this._deleteDevice}
                         ></ha-icon-button>
                       </h1>
-                      <ha-list>
+                      <ha-list-base>
                         ${device.entities.map((entityId) => {
                           const entityStateObj = this.hass.states[entityId];
                           if (!entityStateObj) {
@@ -469,48 +471,46 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                             entityId,
                             entityStateObj
                           );
-                          return html`
-                            <ha-list-item
-                              hasMeta
-                              ?twoline=${!!secondary}
-                              graphic="icon"
-                              .entityId=${entityId}
-                              @click=${
-                                this._mode === "live"
-                                  ? this._showMoreInfo
-                                  : undefined
-                              }
-                              .noninteractive=${this._mode === "review"}
-                            >
-                              ${
-                                badgeStateObj
-                                  ? html`
-                                      <state-badge
-                                        .stateObj=${badgeStateObj}
-                                        slot="graphic"
-                                      ></state-badge>
-                                    `
-                                  : nothing
-                              }
-                              ${primary}
-                              ${
-                                secondary
-                                  ? html`<span slot="secondary"
-                                      >${secondary}</span
-                                    >`
-                                  : nothing
-                              }
-                              ${
-                                integrationName
-                                  ? html`<span slot="meta" class="domain"
-                                      >${integrationName}</span
-                                    >`
-                                  : nothing
-                              }
-                            </ha-list-item>
+                          const rowContent = html`
+                            ${
+                              badgeStateObj
+                                ? html`
+                                    <state-badge
+                                      .stateObj=${badgeStateObj}
+                                      slot="start"
+                                    ></state-badge>
+                                  `
+                                : nothing
+                            }
+                            <span slot="headline">${primary}</span>
+                            ${
+                              secondary
+                                ? html`<span slot="supporting-text"
+                                    >${secondary}</span
+                                  >`
+                                : nothing
+                            }
+                            ${
+                              integrationName
+                                ? html`<span slot="end" class="domain"
+                                    >${integrationName}</span
+                                  >`
+                                : nothing
+                            }
                           `;
+                          return this._mode === "live"
+                            ? html`<ha-list-item-button
+                                class="entity"
+                                .entityId=${entityId}
+                                @click=${this._showMoreInfo}
+                              >
+                                ${rowContent}
+                              </ha-list-item-button>`
+                            : html`<ha-list-item-base class="entity">
+                                ${rowContent}
+                              </ha-list-item-base>`;
                         })}
-                      </ha-list>
+                      </ha-list-base>
                     </ha-card>
                   `
                 )}
@@ -556,7 +556,7 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                   entities.length
                     ? html`
                         <ha-card outlined class="entities">
-                          <ha-list>
+                          <ha-list-base>
                             ${entities.map((entityId) => {
                               const entityStateObj = this.hass.states[entityId];
                               if (!entityStateObj) {
@@ -583,53 +583,50 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
                                 entityId,
                                 entityStateObj
                               );
-                              return html`
-                                <ha-list-item
-                                  class="entity"
-                                  hasMeta
-                                  ?twoline=${!!secondary}
-                                  graphic="icon"
-                                  .entityId=${entityId}
-                                  @click=${
-                                    this._mode === "live"
-                                      ? this._showMoreInfo
-                                      : undefined
-                                  }
-                                  .noninteractive=${this._mode === "review"}
-                                >
-                                  ${
-                                    badgeStateObj
-                                      ? html`
-                                          <state-badge
-                                            .stateObj=${badgeStateObj}
-                                            slot="graphic"
-                                          ></state-badge>
-                                        `
-                                      : nothing
-                                  }
-                                  ${primary}
-                                  ${
-                                    secondary
-                                      ? html`<span slot="secondary"
-                                          >${secondary}</span
-                                        >`
-                                      : nothing
-                                  }
-                                  <div slot="meta">
-                                    <span class="domain">${domainName}</span>
-                                    <ha-icon-button
-                                      .path=${mdiDelete}
-                                      .entityId=${entityId}
-                                      .label=${this.hass.localize(
-                                        "ui.panel.config.scene.editor.entities.delete"
-                                      )}
-                                      @click=${this._deleteEntity}
-                                    ></ha-icon-button>
-                                  </div>
-                                </ha-list-item>
+                              const rowContent = html`
+                                ${
+                                  badgeStateObj
+                                    ? html`
+                                        <state-badge
+                                          .stateObj=${badgeStateObj}
+                                          slot="start"
+                                        ></state-badge>
+                                      `
+                                    : nothing
+                                }
+                                <span slot="headline">${primary}</span>
+                                ${
+                                  secondary
+                                    ? html`<span slot="supporting-text"
+                                        >${secondary}</span
+                                      >`
+                                    : nothing
+                                }
+                                <div slot="end">
+                                  <span class="domain">${domainName}</span>
+                                  <ha-icon-button
+                                    .path=${mdiDelete}
+                                    .entityId=${entityId}
+                                    .label=${this.hass.localize(
+                                      "ui.panel.config.scene.editor.entities.delete"
+                                    )}
+                                    @click=${this._deleteEntity}
+                                  ></ha-icon-button>
+                                </div>
                               `;
+                              return this._mode === "live"
+                                ? html`<ha-list-item-button
+                                    class="entity"
+                                    .entityId=${entityId}
+                                    @click=${this._showMoreInfo}
+                                  >
+                                    ${rowContent}
+                                  </ha-list-item-button>`
+                                : html`<ha-list-item-base class="entity">
+                                    ${rowContent}
+                                  </ha-list-item-base>`;
                             })}
-                          </ha-list>
+                          </ha-list-base>
                         </ha-card>
                       `
                     : ""
@@ -1510,19 +1507,17 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
           display: block;
           margin-top: 8px;
         }
-        div[slot="meta"] {
+        div[slot="end"] {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 8px;
         }
-        ha-list-item {
+        ha-list-item-button,
+        ha-list-item-base {
           /* let the trailing label size to its content instead of the default
              fixed meta width, which would clip it */
-          --mdc-list-item-meta-size: auto;
-        }
-        ha-list-item.entity {
-          padding-right: 28px;
+          --ha-row-item-gap: var(--ha-space-2);
         }
         .domain {
           font-size: var(--ha-font-size-s);