Remove border from chip and use ha-label for label (#20205)

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

@@ -1,10 +1,10 @@
 import { css, html, LitElement, nothing, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../chips/ha-assist-chip";
 import { repeat } from "lit/directives/repeat";
 import { LabelRegistryEntry } from "../../data/label_registry";
 import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-label";
 
 @customElement("ha-data-table-labels")
 class HaDataTableLabels extends LitElement {
@@ -21,23 +21,22 @@ class HaDataTableLabels extends LitElement {
         ${this.labels.length > 2
           ? html`<ha-button-menu
               absolute
+              role="button"
+              tabindex="0"
               @click=${this._handleIconOverflowMenuOpened}
               @closed=${this._handleIconOverflowMenuClosed}
             >
-              <ha-assist-chip
+              <ha-label slot="trigger" class="plus" dense>
-                slot="trigger"
+                +${this.labels.length - 2}
-                .label=${`+${this.labels.length - 2}`}
+              </ha-label>
-              ></ha-assist-chip>
               ${repeat(
                 this.labels.slice(2),
                 (label) => label.label_id,
-                (label) =>
+                (label) => html`
-                  html`<ha-list-item
+                  <ha-list-item @click=${this._labelClicked} .item=${label}>
-                    @click=${this._labelClicked}
-                    .item=${label}
-                  >
                     ${this._renderLabel(label, false)}
-                  </ha-list-item>`
+                  </ha-list-item>
+                `
               )}
             </ha-button-menu>`
           : nothing}
@@ -47,20 +46,29 @@ class HaDataTableLabels extends LitElement {
 
   private _renderLabel(label: LabelRegistryEntry, clickAction: boolean) {
     const color = label?.color ? computeCssColor(label.color) : undefined;
-    return html`<ha-assist-chip
+    return html`
-      .item=${label}
+      <ha-label
-      @click=${clickAction ? this._labelClicked : undefined}
+        dense
-      .label=${label?.name}
+        role="button"
-      active
+        tabindex="0"
-      style=${color ? `--color: ${color}` : ""}
+        .item=${label}
-    >
+        @click=${clickAction ? this._labelClicked : undefined}
-      ${label?.icon
+        @keydown=${clickAction ? this._labelClicked : undefined}
-        ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
+        style=${color ? `--color: ${color}` : ""}
-        : nothing}
+      >
-    </ha-assist-chip>`;
+        ${label?.icon
+          ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
+          : nothing}
+        ${label.name}
+      </ha-label>
+    `;
   }
 
-  private _labelClicked(ev: Event) {
+  private _labelClicked(ev) {
+    ev.stopPropagation();
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
     const label = (ev.currentTarget as any).item as LabelRegistryEntry;
     fireEvent(this, "label-clicked", { label });
   }
@@ -95,14 +103,15 @@ class HaDataTableLabels extends LitElement {
         position: fixed;
         flex-wrap: nowrap;
       }
-      ha-assist-chip {
+      ha-label {
-        border: 1px solid var(--color);
+        --ha-label-background-color: var(--color);
-        --md-assist-chip-icon-size: 16px;
+        --ha-label-background-opacity: 0.5;
-        --md-assist-chip-container-height: 20px;
+      }
-        --md-assist-chip-leading-space: 12px;
+      ha-button-menu {
-        --md-assist-chip-trailing-space: 12px;
+        border-radius: 10px;
-        --ha-assist-chip-active-container-color: var(--color);
+      }
-        --ha-assist-chip-active-container-opacity: 0.3;
+      .plus {
+        border: 1px solid var(--divider-color);
       }
     `;
   }

src/components/ha-filter-labels.ts

@@ -12,10 +12,10 @@ import {
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import "./chips/ha-assist-chip";
+import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./ha-icon";
-import "./ha-check-list-item";
+import "./ha-label";
 
 @customElement("ha-filter-labels")
 export class HaFilterLabels extends SubscribeMixin(LitElement) {
@@ -69,18 +69,15 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
                     .selected=${this.value?.includes(label.label_id)}
                     hasMeta
                   >
-                    <ha-assist-chip
+                    <ha-label style=${color ? `--color: ${color}` : ""}>
-                      .label=${label.name}
-                      active
-                      style=${color ? `--color: ${color}` : ""}
-                    >
                       ${label.icon
                         ? html`<ha-icon
                             slot="icon"
                             .icon=${label.icon}
                           ></ha-icon>`
                         : nothing}
-                    </ha-assist-chip>
+                      ${label.name}
+                    </ha-label>
                   </ha-check-list-item>`;
                 })}
               </mwc-list>
@@ -170,13 +167,9 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
         .warning {
           color: var(--error-color);
         }
-        ha-assist-chip {
+        ha-label {
-          border: 1px solid var(--color);
+          --ha-label-background-color: var(--color);
-          --md-assist-chip-icon-size: 16px;
+          --ha-label-background-opacity: 0.5;
-          --md-assist-chip-leading-space: 12px;
-          --md-assist-chip-trailing-space: 12px;
-          --ha-assist-chip-active-container-color: var(--color);
-          --ha-assist-chip-active-container-opacity: 0.3;
         }
       `,
     ];

src/components/ha-label.ts

@@ -1,13 +1,17 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import "@material/web/ripple/ripple";
 
 @customElement("ha-label")
 class HaLabel extends LitElement {
+  @property({ type: Boolean, reflect: true }) dense = false;
+
   protected render(): TemplateResult {
     return html`
-      <span class="label">
+      <span class="content">
         <slot name="icon"></slot>
         <slot></slot>
+        <md-ripple></md-ripple>
       </span>
     `;
   }
@@ -22,8 +26,10 @@ class HaLabel extends LitElement {
             var(--rgb-primary-text-color),
             0.15
           );
-        }
+          --ha-label-background-opacity: 1;
-        .label {
+
+          position: relative;
+          box-sizing: border-box;
           display: inline-flex;
           flex-direction: row;
           align-items: center;
@@ -35,9 +41,22 @@ class HaLabel extends LitElement {
           height: 32px;
           padding: 0 16px;
           border-radius: 18px;
-          background-color: var(--ha-label-background-color);
           color: var(--ha-label-text-color);
-          --mdc-icon-size: 18px;
+          --mdc-icon-size: 12px;
+        }
+        .content > * {
+          position: relative;
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        :host:before {
+          position: absolute;
+          content: "";
+          inset: 0;
+          border-radius: inherit;
+          background-color: var(--ha-label-background-color);
+          opacity: var(--ha-label-background-opacity);
         }
         ::slotted([slot="icon"]) {
           margin-right: 8px;
@@ -45,11 +64,23 @@ class HaLabel extends LitElement {
           margin-inline-start: -8px;
           margin-inline-end: 8px;
           display: flex;
-          color: var(--ha-label-icon-color);
         }
+
         span {
           display: inline-flex;
         }
+
+        :host([dense]) {
+          height: 20px;
+          padding: 0 12px;
+          border-radius: 10px;
+        }
+        :host([dense]) ::slotted([slot="icon"]) {
+          margin-right: 4px;
+          margin-left: -4px;
+          margin-inline-start: -4px;
+          margin-inline-end: 4px;
+        }
       `,
     ];
   }

src/components/ha-labels-picker.ts

@@ -199,9 +199,8 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
       margin-bottom: 8px;
     }
     ha-input-chip {
-      border: 1px solid var(--color);
       --md-input-chip-selected-container-color: var(--color);
-      --ha-input-chip-selected-container-opacity: 0.3;
+      --ha-input-chip-selected-container-opacity: 0.5;
     }
   `;
 }