rename file

src/components/ha-chip.ts

@@ -9,6 +9,7 @@ import {
   unsafeCSS,
 } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 
 @customElement("ha-chip")
 export class HaChip extends LitElement {
@@ -18,9 +19,17 @@ export class HaChip extends LitElement {
 
   @property({ type: Boolean }) public noText = false;
 
+  @property({ type: Boolean }) public outline = false;
+
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip ${this.noText ? "no-text" : ""}">
+      <div
+        class=${classMap({
+          "mdc-chip": true,
+          "no-text": this.noText,
+          outline: this.outline,
+        })}
+      >
         ${this.hasIcon
           ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
               <slot name="icon"></slot>
@@ -81,6 +90,11 @@ export class HaChip extends LitElement {
       :host {
         outline: none;
       }
+
+      .mdc-chip.outline {
+        background: none;
+        border: 1px solid rgba(var(--rgb-primary-text-color), 0.5);
+      }
     `;
   }
 }

src/dialogs/more-info/ha-more-info-device-entities-shortcuts.ts

@@ -11,16 +11,17 @@ import { stateIconPath } from "../../common/entity/state_icon_path";
 import "../../components/ha-chip";
 import "../../components/ha-chip-set";
 import "../../components/ha-icon";
+import "../../components/ha-svg-icon";
 import { HomeAssistant } from "../../types";
 
 declare global {
   interface HASSDomEvents {
-    "related-entity": { entityId: string };
+    "shortcut-clicked": { entityId: string };
   }
 }
 
-@customElement("more-info-related-info")
+@customElement("ha-more-info-device-entities-shortcuts")
-class MoreInfoContent extends LitElement {
+class MoreInfoDevicesEntitiesShortcuts extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
@@ -37,9 +38,15 @@ class MoreInfoContent extends LitElement {
     );
   });
 
-  private _handleChipClick(ev: Event) {
+  private _handleChipClick(ev) {
+    if (ev.defaultPrevented) {
+      return;
+    }
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
     const entityId = (ev.target as any).entityId as string;
-    fireEvent(this, "related-entity", { entityId });
+    fireEvent(this, "shortcut-clicked", { entityId });
   }
 
   protected render(): TemplateResult | null {
@@ -72,6 +79,7 @@ class MoreInfoContent extends LitElement {
 
           const icon = stateObj.attributes.icon;
           const iconPath = stateIconPath(stateObj);
+
           const state = computeStateDisplay(
             this.hass!.localize,
             stateObj,
@@ -82,7 +90,7 @@ class MoreInfoContent extends LitElement {
           const active = stateActive(stateObj);
 
           const iconStyle = styleMap({
-            "--icon-color":
+            "--ha-chip-icon-color":
               color && active
                 ? `rgb(var(--rgb-state-${color}-color))`
                 : undefined,
@@ -91,14 +99,17 @@ class MoreInfoContent extends LitElement {
           const name = stateObj.attributes.friendly_name ?? "";
 
           return html`
-            <button
+            <ha-chip
+              outline
+              role="button"
               type="button"
-              class="chip"
               @click=${this._handleChipClick}
+              @keydown=${this._handleChipClick}
               .entityId=${stateObj.entity_id}
               aria-label=${name}
               .title=${name}
               style=${iconStyle}
+              hasIcon
             >
               ${icon
                 ? html`<ha-icon slot="icon" .icon=${icon}></ha-icon>`
@@ -106,7 +117,7 @@ class MoreInfoContent extends LitElement {
                     <ha-svg-icon slot="icon" .path=${iconPath}></ha-svg-icon>
                   `}
               ${state}
-            </button>
+            </ha-chip>
           `;
         })}
       </div>
@@ -126,24 +137,13 @@ class MoreInfoContent extends LitElement {
       .container > * {
         margin: 4px;
       }
-      .chip {
+      ha-chip {
-        border: 1px solid var(--secondary-text-color);
-        border-radius: 8px;
         cursor: pointer;
-        background: none;
+        --ha-chip-icon-color: rgb(var(--rgb-state-default-color));
-        color: var(--primary-text-color);
-        padding: 6px 16px 6px 8px;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        --icon-color: rgb(var(--rgb-state-default-color));
       }
-      .chip ha-icon,
+      ha-chip ha-icon,
-      .chip ha-svg-icon {
+      ha-chip ha-svg-icon {
-        color: var(--icon-color);
         pointer-events: none;
-        --mdc-icon-size: 18px;
-        color: var(--icon-color);
       }
     `;
   }
@@ -151,6 +151,6 @@ class MoreInfoContent extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "more-info-related-info": MoreInfoContent;
+    "ha-more-info-device-entities-shortcuts": MoreInfoDevicesEntitiesShortcuts;
   }
 }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -62,7 +62,7 @@ export class MoreInfoDialog extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  private _relatedEntityClicked(ev: CustomEvent) {
+  private _entityShortcutClicked(ev: CustomEvent) {
     ev.stopPropagation();
     this._entityId = ev.detail.entityId;
   }
@@ -165,7 +165,7 @@ export class MoreInfoDialog extends LitElement {
                   <ha-more-info-info
                     .hass=${this.hass}
                     .entityId=${this._entityId}
-                    @related-entity=${this._relatedEntityClicked}
+                    @shortcut-clicked=${this._entityShortcutClicked}
                   ></ha-more-info-info>
                 `
               : this._currTab === "history"

src/dialogs/more-info/ha-more-info-info.ts

@@ -13,9 +13,9 @@ import {
   DOMAINS_NO_INFO,
   DOMAINS_WITH_MORE_INFO,
 } from "./const";
+import "./ha-more-info-device-entities-shortcuts";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
-import "./more-info-related-info";
 
 @customElement("ha-more-info-info")
 export class MoreInfoInfo extends LitElement {
@@ -71,10 +71,10 @@ export class MoreInfoInfo extends LitElement {
             .hass=${this.hass}
             .entityId=${this.entityId}
           ></ha-more-info-logbook>`}
-      <more-info-content
+      <ha-more-info-device-entities-shortcuts
         .stateObj=${stateObj}
         .hass=${this.hass}
-      ></more-info-content>
+      ></ha-more-info-device-entities-shortcuts>
       <more-info-related-info .stateObj=${stateObj} .hass=${this.hass}>
       </more-info-related-info>
     `;