Improve search and filters on mobile + fix close button in search field (#11662)

Co-authored-by: Zack <zackbarett@hey.com>

src/common/search/search-input.ts

@@ -14,6 +14,9 @@ class SearchInput extends LitElement {
 
   @property() public filter?: string;
 
+  @property({ type: Boolean })
+  public suffix = false;
+
   @property({ type: Boolean })
   public autofocus = false;
 
@@ -33,7 +36,7 @@ class SearchInput extends LitElement {
         .label=${this.label || "Search"}
         .value=${this.filter || ""}
         .icon=${true}
-        .iconTrailing=${this.filter}
+        .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
       >
         <slot name="prefix" slot="leadingIcon">
@@ -43,16 +46,18 @@ class SearchInput extends LitElement {
             .path=${mdiMagnify}
           ></ha-svg-icon>
         </slot>
+        <div class="trailing" slot="trailingIcon">
           ${this.filter &&
           html`
             <ha-icon-button
-            slot="trailingIcon"
               @click=${this._clearSearch}
               .label=${this.hass.localize("ui.common.clear")}
               .path=${mdiClose}
               class="clear-button"
             ></ha-icon-button>
           `}
+          <slot name="suffix"></slot>
+        </div>
       </ha-textfield>
     `;
   }
@@ -81,15 +86,16 @@ class SearchInput extends LitElement {
       ha-svg-icon {
         outline: none;
       }
-      ha-icon-button {
-        --mdc-icon-button-size: 24px;
-      }
       .clear-button {
         --mdc-icon-size: 20px;
       }
       ha-textfield {
         display: inherit;
       }
+      .trailing {
+        display: flex;
+        align-items: center;
+      }
     `;
   }
 }

src/components/ha-button-related-filter-menu.ts

@@ -73,6 +73,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .hass=${this.hass}
           .value=${this.value?.area}
           no-add
+          .excludeDomains=${this.excludeDomains}
           @value-changed=${this._areaPicked}
         ></ha-area-picker>
         <ha-device-picker
@@ -81,6 +82,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           )}
           .hass=${this.hass}
           .value=${this.value?.device}
+          .excludeDomains=${this.excludeDomains}
           @value-changed=${this._devicePicked}
         ></ha-device-picker>
         <ha-entity-picker
@@ -103,7 +105,8 @@ export class HaRelatedFilterButtonMenu extends LitElement {
     this._open = true;
   }
 
-  private _onClosed(): void {
+  private _onClosed(ev): void {
+    ev.stopPropagation();
     this._open = false;
   }
 
@@ -173,9 +176,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
       :host {
         display: inline-block;
         position: relative;
-      }
-      :host([narrow]) {
-        position: static;
+        --mdc-menu-min-width: 200px;
       }
       ha-area-picker,
       ha-device-picker,
@@ -186,7 +187,8 @@ export class HaRelatedFilterButtonMenu extends LitElement {
         box-sizing: border-box;
       }
       :host([narrow]) ha-area-picker,
-      :host([narrow]) ha-device-picker {
+      :host([narrow]) ha-device-picker,
+      :host([narrow]) ha-entity-picker {
         width: 100%;
       }
     `;

src/components/ha-textfield.ts

@@ -68,6 +68,14 @@ export class HaTextField extends TextFieldBase {
       :host([no-spinner]) input[type="number"] {
         -moz-appearance: textfield;
       }
+
+      .mdc-text-field__ripple {
+        overflow: hidden;
+      }
+
+      .mdc-text-field {
+        overflow: var(--text-field-overflow);
+      }
     `,
   ];
 }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import { mdiFilterVariant } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
@@ -159,28 +158,25 @@ export class HaTabsSubpageDataTable extends LitElement {
     const headerToolbar = html`<search-input
       .hass=${this.hass}
       .filter=${this.filter}
+      .suffix=${!this.narrow}
       @value-changed=${this._handleSearchChange}
       .label=${this.searchLabel ||
       this.hass.localize("ui.components.data-table.search")}
     >
-      </search-input>
-      <div class="filters">
+      ${!this.narrow
+        ? html`<div class="filters" slot="suffix">
             ${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>`;
+              : ""}
+            <slot name="filter-menu"></slot>
+          </div>`
+        : ""}
+    </search-input>`;
 
     return html`
       <hass-tabs-subpage
@@ -195,7 +191,16 @@ export class HaTabsSubpageDataTable extends LitElement {
         .mainPage=${this.mainPage}
         .supervisor=${this.supervisor}
       >
-        <div slot="toolbar-icon"><slot name="toolbar-icon"></slot></div>
+        <div slot="toolbar-icon">
+          ${this.narrow
+            ? html`<div class="filter-menu">
+                <slot name="filter-menu"></slot>${this.numHidden ||
+                this.activeFilters
+                  ? html`<span class="badge">${this.numHidden || "!"}</span>`
+                  : ""}
+              </div>`
+            : ""}<slot name="toolbar-icon"></slot>
+        </div>
         ${this.narrow
           ? html`
               <div slot="header">
@@ -267,6 +272,12 @@ export class HaTabsSubpageDataTable extends LitElement {
         align-items: center;
         color: var(--secondary-text-color);
       }
+      search-input {
+        --mdc-text-field-fill-color: var(--sidebar-background-color);
+        --mdc-text-field-idle-line-color: var(--divider-color);
+        --text-field-overflow: visible;
+        z-index: 5;
+      }
       .table-header search-input {
         display: block;
         position: absolute;
@@ -276,15 +287,16 @@ export class HaTabsSubpageDataTable extends LitElement {
       }
       .search-toolbar search-input {
         display: block;
+        width: 100%;
         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 {
+        --mdc-text-field-fill-color: initial;
+        --mdc-text-field-idle-line-color: initial;
+        --text-field-overflow: initial;
         display: flex;
         justify-content: flex-end;
-        width: 100%;
         margin-right: 8px;
       }
       .active-filters {
@@ -295,6 +307,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         padding: 2px 2px 2px 8px;
         margin-left: 4px;
         font-size: 14px;
+        width: max-content;
       }
       .active-filters ha-svg-icon {
         color: var(--primary-color);
@@ -313,6 +326,24 @@ export class HaTabsSubpageDataTable extends LitElement {
         left: 0;
         content: "";
       }
+      .badge {
+        min-width: 20px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        font-weight: 400;
+        background-color: var(--primary-color);
+        line-height: 20px;
+        text-align: center;
+        padding: 0px 4px;
+        color: var(--text-primary-color);
+        position: absolute;
+        right: 0;
+        top: 4px;
+        font-size: 0.65em;
+      }
+      .filter-menu {
+        position: relative;
+      }
     `;
   }
 }

src/layouts/hass-tabs-subpage.ts

@@ -272,6 +272,7 @@ class HassTabsSubpage extends LitElement {
       ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
+        display: flex;
         flex-shrink: 0;
         pointer-events: auto;
         color: var(--sidebar-icon-color);

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

@@ -297,10 +297,12 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       this._filter
     );
 
-    const filterMenu = html`<ha-button-menu
+    const filterMenu = html`<div
+      slot=${ifDefined(this.narrow ? "toolbar-icon" : "suffix")}
+    >
+      <ha-button-menu
         corner="BOTTOM_START"
         multi
-      slot=${ifDefined(this.narrow ? "toolbar-icon" : undefined)}
         @action=${this._handleMenuAction}
       >
         <ha-icon-button
@@ -319,7 +321,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
             "ui.panel.config.integrations.disable.show_disabled"
           )}
         </ha-check-list-item>
-    </ha-button-menu>`;
+      </ha-button-menu>
+      ${!this._showDisabled && this.narrow && disabledCount
+        ? html`<span class="badge">${disabledCount}</span>`
+        : ""}
+    </div>`;
 
     return html`
       <hass-tabs-subpage
@@ -336,8 +342,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                   .hass=${this.hass}
                   .filter=${this._filter}
                   class="header"
-                  no-label-float
-                  no-underline
                   @value-changed=${this._handleSearchChange}
                   .label=${this.hass.localize(
                     "ui.panel.config.integrations.search"
@@ -350,16 +354,15 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
               <div class="search">
                 <search-input
                   .hass=${this.hass}
-                  no-label-float
-                  no-underline
+                  suffix
                   .filter=${this._filter}
                   @value-changed=${this._handleSearchChange}
                   .label=${this.hass.localize(
                     "ui.panel.config.integrations.search"
                   )}
-                ></search-input>
+                >
                   ${!this._showDisabled && disabledCount
-                  ? html`<div class="active-filters">
+                    ? html`<div class="active-filters" slot="suffix">
                         ${this.hass.localize(
                           "ui.panel.config.integrations.disable.disabled_integrations",
                           { number: disabledCount }
@@ -373,6 +376,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                       </div>`
                     : ""}
                   ${filterMenu}
+                </search-input>
               </div>
             `}
 
@@ -683,13 +687,15 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         .empty-message h1 {
           margin-bottom: 0;
         }
-
+        search-input {
+          --mdc-text-field-fill-color: var(--sidebar-background-color);
+          --mdc-text-field-idle-line-color: var(--divider-color);
+          --text-field-overflow: visible;
+        }
         search-input.header {
           display: block;
           color: var(--secondary-text-color);
           margin-left: 8px;
-          --mdc-text-field-fill-color: transparant;
-          --mdc-text-field-idle-line-color: var(--divider-color);
           --mdc-ripple-color: transparant;
         }
         .search {
@@ -717,6 +723,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           align-items: center;
           padding: 2px 2px 2px 8px;
           font-size: 14px;
+          width: max-content;
         }
         .active-filters mwc-button {
           margin-left: 8px;
@@ -732,6 +739,21 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           left: 0;
           content: "";
         }
+        .badge {
+          min-width: 20px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 400;
+          background-color: var(--primary-color);
+          line-height: 20px;
+          text-align: center;
+          padding: 0px 4px;
+          color: var(--text-primary-color);
+          position: absolute;
+          right: 14px;
+          top: 8px;
+          font-size: 0.65em;
+        }
       `,
     ];
   }

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

@@ -105,10 +105,10 @@ export class HaConfigLogs extends LitElement {
         }
         search-input {
           display: block;
+          --mdc-text-field-fill-color: var(--sidebar-background-color);
+          --mdc-text-field-idle-line-color: var(--divider-color);
         }
         search-input.header {
-          --mdc-text-field-fill-color: transparant;
-          --mdc-text-field-idle-line-color: var(--divider-color);
           --mdc-ripple-color: transparant;
         }
         .content {