Improve data table search bar style (#20271)

src/components/ha-outlined-text-field.ts

@@ -0,0 +1,38 @@
+import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
+import "element-internals-polyfill";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-outlined-text-field")
+export class HaOutlinedTextField extends MdOutlinedTextField {
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-outlined-text-field-input-text-color: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-outlined-field-outline-color: var(--outline-color);
+        --md-outlined-field-focus-outline-color: var(--primary-color);
+        --md-outlined-field-hover-outline-color: var(--outline-hover-color);
+      }
+      :host([dense]) {
+        --md-outlined-field-top-space: 5.5px;
+        --md-outlined-field-bottom-space: 5.5px;
+        --md-outlined-field-container-shape-start-start: 10px;
+        --md-outlined-field-container-shape-start-end: 10px;
+        --md-outlined-field-container-shape-end-end: 10px;
+        --md-outlined-field-container-shape-end-start: 10px;
+        --md-outlined-field-focus-outline-width: 1px;
+        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-outlined-text-field": HaOutlinedTextField;
+  }
+}

src/components/search-input-outlined.ts

@@ -1,11 +1,11 @@
-import "@material/web/textfield/outlined-text-field";
-import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
 import { mdiMagnify } from "@mdi/js";
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
+import "./ha-outlined-text-field";
+import type { HaOutlinedTextField } from "./ha-outlined-text-field";
 import "./ha-svg-icon";
 
 @customElement("search-input-outlined")
@@ -30,19 +30,22 @@ class SearchInputOutlined extends LitElement {
     this._input?.focus();
   }
 
-  @query("md-outlined-text-field", true) private _input!: MdOutlinedTextField;
+  @query("ha-outlined-text-field", true) private _input!: HaOutlinedTextField;
 
   protected render(): TemplateResult {
+    const placeholder =
+      this.placeholder || this.hass.localize("ui.common.search");
+
     return html`
-      <md-outlined-text-field
+      <ha-outlined-text-field
         .autofocus=${this.autofocus}
         .aria-label=${this.label || this.hass.localize("ui.common.search")}
-        .placeholder=${this.placeholder ||
+        .placeholder=${placeholder}
-        this.hass.localize("ui.common.search")}
         .value=${this.filter || ""}
         icon
         .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
+        dense
       >
         <slot name="prefix" slot="leading-icon">
           <ha-svg-icon
@@ -51,7 +54,7 @@ class SearchInputOutlined extends LitElement {
             .path=${mdiMagnify}
           ></ha-svg-icon>
         </slot>
-      </md-outlined-text-field>
+      </ha-outlined-text-field>
     `;
   }
 
@@ -67,40 +70,21 @@ class SearchInputOutlined extends LitElement {
     return css`
       :host {
         display: inline-flex;
+        /* For iOS */
+        z-index: 0;
       }
-      md-outlined-text-field {
+      ha-outlined-text-field {
         display: block;
         width: 100%;
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-outlined-text-field-input-text-color: var(--primary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        --md-outlined-field-top-space: 5.5px;
-        --md-outlined-field-bottom-space: 5.5px;
-        --md-outlined-field-outline-color: var(--outline-color);
-        --md-outlined-field-container-shape-start-start: 10px;
-        --md-outlined-field-container-shape-start-end: 10px;
-        --md-outlined-field-container-shape-end-end: 10px;
-        --md-outlined-field-container-shape-end-start: 10px;
-        --md-outlined-field-focus-outline-width: 1px;
-        --md-outlined-field-focus-outline-color: var(--primary-color);
       }
       ha-svg-icon,
       ha-icon-button {
         display: flex;
-        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
         color: var(--primary-text-color);
       }
       ha-svg-icon {
         outline: none;
       }
-      .clear-button {
-        --mdc-icon-size: 20px;
-      }
-      .trailing {
-        display: flex;
-        align-items: center;
-      }
     `;
   }
 }

src/resources/ha-style.ts

@@ -32,6 +32,7 @@ const mainStyles = css`
     --accent-color: ${unsafeCSS(DEFAULT_ACCENT_COLOR)};
     --divider-color: rgba(0, 0, 0, 0.12);
     --outline-color: rgba(0, 0, 0, 0.12);
+    --outline-hover-color: rgba(0, 0, 0, 0.24);
 
     --scrollbar-thumb-color: rgb(194, 194, 194);
 

src/resources/styles-data.ts

@@ -15,6 +15,7 @@ export const darkStyles = {
   "switch-unchecked-track-color": "#9b9b9b",
   "divider-color": "rgba(225, 225, 225, .12)",
   "outline-color": "rgba(225, 225, 225, .12)",
+  "outline-hover-color": "rgba(225, 225, 225, .24)",
   "mdc-ripple-color": "#AAAAAA",
   "mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)",