Fix selected icon of picker elements (#9606)

src/components/device/ha-area-devices-picker.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -52,20 +52,27 @@ interface AreaDevices {
 
 const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
     paper-item {
-      width: 100%;
-      margin: -10px 0;
       padding: 0;
+      margin: -10px;
+      margin-left: 0;
     }
-    mwc-icon-button {
-      float: right;
+    #content {
+      display: flex;
+      align-items: center;
     }
-    .devices {
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
       display: none;
     }
-    .devices.visible {
-      display: block;
+    :host([selected]) paper-item {
+      margin-left: 10px;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-item>
     <paper-item-body two-line="">
       <div class="name">${item.name}</div>

src/components/device/ha-device-picker.ts

@@ -12,6 +12,7 @@ import {
 import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { mdiCheck } from "@mdi/js";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { compare } from "../../common/string/compare";
@@ -47,10 +48,27 @@ export type HaDevicePickerDeviceFilterFunc = (
 
 const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
     paper-item {
-      margin: -10px 0;
       padding: 0;
+      margin: -10px;
+      margin-left: 0;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-item>
     <paper-item-body two-line>
       ${item.name}

src/components/entity/ha-entity-attribute-picker.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
@@ -25,10 +25,27 @@ export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
     paper-item {
-      margin: -5px -10px;
       padding: 0;
+      margin: -10px;
+      margin-left: 0;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-item>${formatAttributeName(item)}</paper-item>`;
 
 @customElement("ha-entity-attribute-picker")

src/components/entity/ha-entity-picker.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -28,10 +28,25 @@ export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
     paper-icon-item {
-      margin: -10px;
       padding: 0;
+      margin: -8px;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-icon-item>
     <state-badge slot="item-icon" .stateObj=${item}></state-badge>
     <paper-item-body two-line="">

src/components/entity/ha-statistic-picker.ts

@@ -27,6 +27,8 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-svg-icon";
 import "./state-badge";
 
+// vaadin-combo-box-item
+
 const rowRenderer: ComboBoxLitRenderer<{
   id: string;
   name: string;
@@ -34,23 +36,22 @@ const rowRenderer: ComboBoxLitRenderer<{
 }> = (item) => html`<style>
     paper-icon-item {
       padding: 0;
-      margin: -10px;
+      margin: -8px;
     }
     #content {
       display: flex;
       align-items: center;
     }
-    :host([selected]) paper-icon-item {
-      margin-left: 0;
-    }
     ha-svg-icon {
       padding-left: 2px;
-      margin-right: -2px;
       color: var(--secondary-text-color);
     }
     :host(:not([selected])) ha-svg-icon {
       display: none;
     }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
+    }
   </style>
   <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-icon-item>

src/components/ha-addon-picker.ts

@@ -1,6 +1,7 @@
+import { mdiCheck } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { compare } from "../common/string/compare";
@@ -13,10 +14,30 @@ import { HaComboBox } from "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
     paper-item {
-      margin: -10px 0;
       padding: 0;
+      margin: -10px;
+      margin-left: 0px;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    :host([selected]) paper-item {
+      margin-left: 0;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-item>
     <paper-item-body two-line>
       ${item.name}

src/components/ha-area-picker.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -48,13 +48,27 @@ const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
   item
 ) => html`<style>
     paper-item {
-      margin: -10px 0;
       padding: 0;
+      margin: -10px;
+      margin-left: 0;
     }
-    paper-item.add-new {
-      font-weight: 500;
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
     <paper-item-body two-line>${item.name}</paper-item-body>
   </paper-item>`;

src/components/ha-service-picker.ts

@@ -1,3 +1,4 @@
+import { mdiCheck } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { property, state } from "lit/decorators";
@@ -12,10 +13,30 @@ const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
 ) => html`<style>
     paper-item {
-      margin: -10px 0;
       padding: 0;
+      margin: -10px;
+      margin-left: 0px;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
     }
   </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
   <paper-item>
     <paper-item-body two-line>
       ${item.name}