From d2dd1a43ddf311e64ab84a29aed83ab00dd5ae83 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Thu, 15 Oct 2020 14:56:10 +0200
Subject: [PATCH] Fix attribute picker suffix (#7348)

---
 .../entity/ha-entity-attribute-picker.ts      | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts
index b8265961ce..e9c3b52e0f 100644
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -1,3 +1,4 @@
+import { 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";
@@ -16,8 +17,9 @@ import {
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
 import "./state-badge";
+import "@material/mwc-icon-button/mwc-icon-button";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -98,33 +100,35 @@ class HaEntityAttributePicker extends LitElement {
           autocorrect="off"
           spellcheck="false"
         >
-          ${this.value
-            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
-                    "ui.components.entity.entity-picker.clear"
-                  )}
-                  slot="suffix"
-                  class="clear-button"
-                  icon="hass:close"
-                  @click=${this._clearValue}
-                  no-ripple
-                >
-                  Clear
-                </ha-icon-button>
-              `
-            : ""}
+          <div class="suffix" slot="suffix">
+            ${this.value
+              ? html`
+                  <mwc-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.entity.entity-picker.clear"
+                    )}
+                    class="clear-button"
+                    tabindex="-1"
+                    @click=${this._clearValue}
+                    no-ripple
+                  >
+                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
 
-          <ha-icon-button
-            aria-label=${this.hass.localize(
-              "ui.components.entity.entity-attribute-picker.show_attributes"
-            )}
-            slot="suffix"
-            class="toggle-button"
-            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-          >
-            Toggle
-          </ha-icon-button>
+            <mwc-icon-button
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-attribute-picker.show_attributes"
+              )}
+              class="toggle-button"
+              tabindex="-1"
+            >
+              <ha-svg-icon
+                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+              ></ha-svg-icon>
+            </mwc-icon-button>
+          </div>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -160,7 +164,10 @@ class HaEntityAttributePicker extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-input > ha-icon-button {
+      .suffix {
+        display: flex;
+      }
+      mwc-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);