Use ha-label for some chips

home-assistant · Nov 9, 2023 · 8eb8111 · 8eb8111
1 parent 7908404
commit 8eb8111
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 122 deletions.
diff --git a/gallery/src/pages/components/ha-chips.ts b/gallery/src/pages/components/ha-chips.ts
@@ -108,9 +108,6 @@ export class DemoHaChips extends LitElement {
         max-width: 600px;
         margin: 24px auto;
       }
-      ha-chip {
-        margin-bottom: 4px;
-      }
       .card-content {
         display: flex;
         flex-direction: column;

diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts
@@ -10,7 +10,6 @@ import { computeStateDisplay } from "../../../../src/common/entity/compute_state
 import "../../../../src/components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
 import "../../../../src/components/entity/state-badge";
-import "../../../../src/components/ha-chip";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
 

diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -31,7 +31,6 @@ import { navigate } from "../../../../src/common/navigate";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-chip";
 import "../../../../src/components/chips/ha-chip-set";
 import "../../../../src/components/chips/ha-assist-chip";
 import "../../../../src/components/ha-markdown";
@@ -1323,9 +1322,6 @@ class HassioAddonInfo extends LitElement {
         }
 
         @media (max-width: 720px) {
-          ha-chip {
-            line-height: 36px;
-          }
           .addon-options {
             max-width: 100%;
           }

diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
diff --git a/src/components/ha-label.ts b/src/components/ha-label.ts
@@ -0,0 +1,60 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-label")
+class HaLabel extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+        <span class="label">
+            <slot name="icon"></slot>
+            <slot></slot>
+        </div>
+      `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        :host {
+          --ha-label-text-color: var(--primary-text-color);
+          --ha-label-icon-color: var(--primary-text-color);
+          --ha-label-background-color: rgba(
+            var(--rgb-primary-text-color),
+            0.15
+          );
+        }
+        .label {
+          display: inline-flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 16px;
+          letter-spacing: 0.1px;
+          vertical-align: middle;
+          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;
+        }
+        ::slotted([slot="icon"]) {
+          margin-right: 8px;
+          margin-left: -8px;
+          display: flex;
+          color: var(--ha-label-icon-color);
+        }
+        span {
+          display: inline-flex;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-label": HaLabel;
+  }
+}
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -27,7 +27,7 @@ import {
   fuzzyFilterSort,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
-import "../../components/ha-chip";
+import "../../components/ha-label";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon-button";
 import "../../components/ha-list-item";
@@ -326,19 +326,17 @@ export class QuickBar extends LitElement {
         hasMeta
       >
         <span>
-          <ha-chip
+          <ha-label
             .label=${item.categoryText}
-            hasIcon
             class="command-category ${item.categoryKey}"
           >
             ${item.iconPath
-              ? html`<ha-svg-icon
-                  .path=${item.iconPath}
-                  slot="icon"
-                ></ha-svg-icon>`
-              : ""}
-            ${item.categoryText}</ha-chip
-          >
+              ? html`
+                  <ha-svg-icon .path=${item.iconPath} slot="icon"></ha-svg-icon>
+                `
+              : nothing}
+            ${item.categoryText}
+          </ha-label>
         </span>
 
         <span class="command-text">${item.primaryText}</span>
@@ -815,20 +813,20 @@ export class QuickBar extends LitElement {
         }
 
         .command-category {
-          --ha-chip-icon-color: #585858;
-          --ha-chip-text-color: #212121;
+          --ha-label-icon-color: #585858;
+          --ha-label-text-color: #212121;
         }
 
         .command-category.reload {
-          --ha-chip-background-color: #cddc39;
+          --ha-label-background-color: #cddc39;
         }
 
         .command-category.navigation {
-          --ha-chip-background-color: var(--light-primary-color);
+          --ha-label-background-color: var(--light-primary-color);
         }
 
         .command-category.server_control {
-          --ha-chip-background-color: var(--warning-color);
+          --ha-label-background-color: var(--warning-color);
         }
 
         span.command-text {

diff --git a/src/panels/calendar/ha-recurrence-rule-editor.ts b/src/panels/calendar/ha-recurrence-rule-editor.ts
@@ -513,11 +513,6 @@ export class RecurrenceRuleEditor extends LitElement {
     .weekdays:last-child {
       margin-bottom: 0;
     }
-
-    .active {
-      --ha-chip-background-color: var(--primary-color);
-      --ha-chip-text-color: var(--text-primary-color);
-    }
   `;
 }
 

diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
@@ -27,7 +27,7 @@ import type {
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
-import "../../../components/ha-chip";
+import "../../../components/ha-label";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-overflow-menu";
@@ -202,11 +202,11 @@ class HaAutomationPicker extends LitElement {
             template: (automation) =>
               automation.disabled
                 ? html`
-                    <ha-chip>
+                    <ha-label>
                       ${this.hass.localize(
                         "ui.panel.config.automation.picker.disabled"
                       )}
-                    </ha-chip>
+                    </ha-label>
                   `
                 : "",
           };

diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
@@ -129,7 +129,10 @@ export abstract class HaDeviceAutomationCard<
         color: var(--primary-text-color);
       }
       .secondary {
-        --ha-chip-background-color: rgba(var(--rgb-primary-text-color), 0.07);
+        --ha-assist-chip-filled-container-color: rgba(
+          var(--rgb-primary-text-color),
+          0.07
+        );
       }
       button.link {
         color: var(--primary-color);

diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
@@ -1,13 +1,13 @@
-import "@material/mwc-button";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
+import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
-import "../../../components/ha-chip";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-help-tooltip";
+import "../../../components/ha-label";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import "../../../components/ha-textfield";
@@ -78,10 +78,10 @@ class DialogUserDetail extends LitElement {
                 <div class="badge-container">
                   ${badges.map(
                     ([icon, label]) => html`
-                      <ha-chip hasIcon>
+                      <ha-label>
                         <ha-svg-icon slot="icon" .path=${icon}></ha-svg-icon>
                         ${label}
-                      </ha-chip>
+                      </ha-label>
                     `
                   )}
                 </div>

diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts
@@ -11,7 +11,6 @@ import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/chips/ha-chip-set";
-import "../../../components/ha-chip";
 import { haStyleScrollbar } from "../../../resources/styles";
 
 @customElement("hui-buttons-base")