Migrate search bar to mwc (#11637)

src/common/search/search-input.ts

@@ -1,17 +1,10 @@
 import { mdiClose, mdiMagnify } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../components/ha-icon-button";
 import "../../components/ha-svg-icon";
+import "../../components/ha-textfield";
+import type { HaTextField } from "../../components/ha-textfield";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../dom/fire_event";
 
@@ -21,12 +14,6 @@ class SearchInput extends LitElement {
 
   @property() public filter?: string;
 
-  @property({ type: Boolean, attribute: "no-label-float" })
-  public noLabelFloat? = false;
-
-  @property({ type: Boolean, attribute: "no-underline" })
-  public noUnderline = false;
-
   @property({ type: Boolean })
   public autofocus = false;
 
@@ -34,49 +21,42 @@ class SearchInput extends LitElement {
   public label?: string;
 
   public focus() {
-    this.shadowRoot!.querySelector("paper-input")!.focus();
+    this._input?.focus();
   }
 
-  @query("paper-input", true) private _input!: PaperInputElement;
+  @query("ha-textfield", true) private _input!: HaTextField;
 
   protected render(): TemplateResult {
     return html`
-      <paper-input
+      <ha-textfield
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
-        .value=${this.filter}
-        @value-changed=${this._filterInputChanged}
-        .noLabelFloat=${this.noLabelFloat}
+        .value=${this.filter || ""}
+        .icon=${true}
+        .iconTrailing=${this.filter}
+        @input=${this._filterInputChanged}
       >
-        <slot name="prefix" slot="prefix">
-          <ha-svg-icon class="prefix" .path=${mdiMagnify}></ha-svg-icon>
+        <slot name="prefix" slot="leadingIcon">
+          <ha-svg-icon
+            tabindex="-1"
+            class="prefix"
+            .path=${mdiMagnify}
+          ></ha-svg-icon>
         </slot>
         ${this.filter &&
         html`
           <ha-icon-button
-            slot="suffix"
+            slot="trailingIcon"
             @click=${this._clearSearch}
             .label=${this.hass.localize("ui.common.clear")}
             .path=${mdiClose}
+            class="clear-button"
           ></ha-icon-button>
         `}
-      </paper-input>
+      </ha-textfield>
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
-    if (
-      changedProps.has("noUnderline") &&
-      (this.noUnderline || changedProps.get("noUnderline") !== undefined)
-    ) {
-      (
-        this._input.inputElement!.parentElement!.shadowRoot!.querySelector(
-          "div.unfocused-line"
-        ) as HTMLElement
-      ).style.display = this.noUnderline ? "none" : "block";
-    }
-  }
-
   private async _filterChanged(value: string) {
     fireEvent(this, "value-changed", { value: String(value) });
   }
@@ -91,15 +71,24 @@ class SearchInput extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: inline-flex;
+      }
       ha-svg-icon,
       ha-icon-button {
         color: var(--primary-text-color);
       }
+      ha-svg-icon {
+        outline: none;
+      }
       ha-icon-button {
         --mdc-icon-button-size: 24px;
       }
-      ha-svg-icon.prefix {
-        margin: 8px;
+      .clear-button {
+        --mdc-icon-size: 20px;
+      }
+      ha-textfield {
+        display: inherit;
       }
     `;
   }

src/components/data-table/ha-data-table.ts

@@ -928,11 +928,10 @@ export class HaDataTable extends LitElement {
         }
         .table-header {
           border-bottom: 1px solid var(--divider-color);
-          padding: 0 16px;
         }
         search-input {
-          position: relative;
-          top: 2px;
+          display: block;
+          flex: 1;
         }
         slot[name="header"] {
           display: block;

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -24,7 +24,6 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { navigate } from "../../common/navigate";
-import "../../common/search/search-input";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import {
   fuzzyFilterSort,

src/layouts/hass-tabs-subpage-data-table.ts

@@ -159,28 +159,28 @@ export class HaTabsSubpageDataTable extends LitElement {
     const headerToolbar = html`<search-input
         .hass=${this.hass}
         .filter=${this.filter}
-        no-label-float
-        no-underline
         @value-changed=${this._handleSearchChange}
         .label=${this.searchLabel ||
         this.hass.localize("ui.components.data-table.search")}
       >
-      </search-input
-      >${filterInfo
-        ? html`<div class="active-filters">
-            ${this.narrow
-              ? html`<div>
-                  <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-                  <paper-tooltip animation-delay="0" position="left">
-                    ${filterInfo}
-                  </paper-tooltip>
-                </div>`
-              : filterInfo}
-            <mwc-button @click=${this._clearFilter}>
-              ${this.hass.localize("ui.components.data-table.clear")}
-            </mwc-button>
-          </div>`
-        : ""}<slot name="filter-menu"></slot>`;
+      </search-input>
+      <div class="filters">
+        ${filterInfo
+          ? html`<div class="active-filters">
+              ${this.narrow
+                ? html`<div>
+                    <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
+                    <paper-tooltip animation-delay="0" position="left">
+                      ${filterInfo}
+                    </paper-tooltip>
+                  </div>`
+                : filterInfo}
+              <mwc-button @click=${this._clearFilter}>
+                ${this.hass.localize("ui.components.data-table.clear")}
+              </mwc-button>
+            </div>`
+          : ""}<slot name="filter-menu"></slot>
+      </div>`;
 
     return html`
       <hass-tabs-subpage
@@ -257,23 +257,35 @@ export class HaTabsSubpageDataTable extends LitElement {
         display: block;
       }
       .table-header {
-        border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
-        padding: 0 16px;
         display: flex;
         align-items: center;
+        --mdc-shape-small: 0;
+        height: 56px;
       }
       .search-toolbar {
         display: flex;
         align-items: center;
         color: var(--secondary-text-color);
       }
-      search-input {
-        position: relative;
-        top: 2px;
-        flex-grow: 1;
+      .table-header search-input {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
       }
-      search-input.header {
-        left: -8px;
+      .search-toolbar search-input {
+        display: block;
+        color: var(--secondary-text-color);
+        --mdc-text-field-fill-color: transparant;
+        --mdc-text-field-idle-line-color: var(--divider-color);
+        --mdc-ripple-color: transparant;
+      }
+      .filters {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        margin-right: 8px;
       }
       .active-filters {
         color: var(--primary-text-color);

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -521,7 +521,7 @@ export class HaConfigDeviceDashboard extends LitElement {
     return [
       css`
         ha-button-menu {
-          margin: 0 -8px 0 8px;
+          margin-left: 8px;
         }
       `,
       haStyle,

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

@@ -20,7 +20,6 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
-import "../../../common/search/search-input";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import type {
@@ -863,8 +862,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          height: 58px;
-          border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+          height: 56px;
+          background-color: var(--mdc-text-field-fill-color, whitesmoke);
+          border-bottom: 1px solid
+            var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
+          box-sizing: border-box;
         }
         .header-toolbar {
           display: flex;
@@ -892,7 +894,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           margin: 8px;
         }
         ha-button-menu {
-          margin: 0 -8px 0 8px;
+          margin-left: 8px;
         }
       `,
     ];

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

@@ -6,7 +6,6 @@ import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
-import "../../../common/search/search-input";
 import {
   DataTableColumnContainer,
   RowClickedEvent,

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

@@ -663,7 +663,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       haStyle,
       css`
         ha-button-menu {
-          margin: 0 -8px 0 8px;
+          margin-left: 8px;
         }
         .container {
           display: grid;
@@ -686,31 +686,36 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
 
         search-input.header {
           display: block;
-          position: relative;
-          left: -8px;
           color: var(--secondary-text-color);
-          margin-left: 16px;
+          margin-left: 8px;
+          --mdc-text-field-fill-color: transparant;
+          --mdc-text-field-idle-line-color: var(--divider-color);
+          --mdc-ripple-color: transparant;
         }
         .search {
           display: flex;
+          justify-content: flex-end;
+          width: 100%;
+          margin-right: 8px;
           align-items: center;
-          padding: 0 16px;
-          background: var(--sidebar-background-color);
-          border-bottom: 1px solid var(--divider-color);
+          height: 56px;
+          position: sticky;
+          top: 0;
+          z-index: 2;
         }
         .search search-input {
-          flex: 1;
-          position: relative;
-          top: 2px;
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          left: 0;
         }
-
         .active-filters {
           color: var(--primary-text-color);
           position: relative;
           display: flex;
           align-items: center;
           padding: 2px 2px 2px 8px;
-          margin-left: 4px;
           font-size: 14px;
         }
         .active-filters mwc-button {

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

@@ -98,18 +98,19 @@ export class HaConfigLogs extends LitElement {
           -webkit-user-select: initial;
           -moz-user-select: initial;
         }
-
         .search {
-          padding: 0 16px;
-          background: var(--sidebar-background-color);
-          border-bottom: 1px solid var(--divider-color);
+          position: sticky;
+          top: 0;
+          z-index: 2;
         }
-
-        .search search-input {
-          position: relative;
-          top: 2px;
+        search-input {
+          display: block;
+        }
+        search-input.header {
+          --mdc-text-field-fill-color: transparant;
+          --mdc-text-field-idle-line-color: var(--divider-color);
+          --mdc-ripple-color: transparant;
         }
-
         .content {
           direction: ltr;
         }

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -100,7 +100,6 @@ export class HuiCardPicker extends LitElement {
       <search-input
         .hass=${this.hass}
         .filter=${this._filter}
-        no-label-float
         @value-changed=${this._handleSearchChange}
         .label=${this.hass.localize(
           "ui.panel.lovelace.editor.edit_card.search_cards"
@@ -337,7 +336,8 @@ export class HuiCardPicker extends LitElement {
       css`
         search-input {
           display: block;
-          margin: 0 -8px;
+          --mdc-shape-small: var(--card-picker-search-shape);
+          margin: var(--card-picker-search-margin);
         }
 
         .cards-container {

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -195,9 +195,14 @@ export class HuiCreateDialogCard
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
+        hui-card-picker {
+          --card-picker-search-shape: 0;
+          --card-picker-search-margin: -2px -24px 0;
+        }
         hui-entity-picker-table {
           display: block;
           height: calc(100vh - 198px);
+          --mdc-shape-small: 0;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           hui-entity-picker-table {

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -168,7 +168,6 @@ export class HuiUnusedEntities extends LitElement {
       }
       hui-entity-picker-table {
         flex-grow: 1;
-        margin-top: -20px;
       }
       .fab {
         position: sticky;