Migrate area card

home-assistant · Jan 29, 2024 · 15a47c2 · 15a47c2
1 parent df17fef
commit 15a47c2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 124 deletions.
diff --git a/src/common/entity/binary_sensor_icon.ts b/src/common/entity/binary_sensor_icon.ts
diff --git a/src/components/ha-domain-icon.ts b/src/components/ha-domain-icon.ts
@@ -13,6 +13,8 @@ export class HaDomainIcon extends LitElement {
 
   @property() public domain?: string;
 
+  @property() public deviceClass?: string;
+
   @property() public icon?: string;
 
   @property({ type: Boolean }) public brandFallback?: boolean;
@@ -30,12 +32,14 @@ export class HaDomainIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = domainIcon(this.hass, this.domain).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
+    const icon = domainIcon(this.hass, this.domain, this.deviceClass).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
       }
-      return this._renderFallback();
-    });
+    );
 
     return html`${until(icon)}`;
   }

diff --git a/src/data/icons.ts b/src/data/icons.ts
@@ -248,11 +248,15 @@ export const serviceIcon = async (
 
 export const domainIcon = async (
   hass: HomeAssistant,
-  domain: string
+  domain: string,
+  deviceClass?: string
 ): Promise<string | undefined> => {
   const entityComponentIcons = await getComponentIcons(hass, domain);
   if (entityComponentIcons) {
-    return entityComponentIcons._?.default;
+    const translations =
+      (deviceClass && entityComponentIcons[deviceClass]) ||
+      entityComponentIcons._;
+    return translations?.default;
   }
   return undefined;
 };
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
@@ -25,7 +25,6 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { FIXED_DEVICE_CLASS_ICONS, STATES_OFF } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import { binarySensorIcon } from "../../../common/entity/binary_sensor_icon";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { navigate } from "../../../common/navigate";
 import {
@@ -36,6 +35,7 @@ import { blankBeforeUnit } from "../../../common/translations/blank_before_unit"
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import { subscribeOne } from "../../../common/util/subscribe-one";
 import "../../../components/ha-card";
+import "../../../components/ha-domain-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import {
@@ -391,7 +391,15 @@ export class HuiAreaCard
           const icon = FIXED_DEVICE_CLASS_ICONS[deviceClass];
           sensors.push(
             html`<div class="sensor">
-              ${icon ? html`<ha-svg-icon .path=${icon}></ha-svg-icon>` : ""}
+              ${icon
+                ? html`
+                    <ha-domain-icon
+                      .hass=${this.hass}
+                      domain="sensor"
+                      .deviceClass=${deviceClass}
+                    ></ha-domain-icon>
+                  `
+                : nothing}
               ${this._average(domain, deviceClass)}
             </div> `
           );
@@ -434,16 +442,18 @@ export class HuiAreaCard
           <div class="alerts">
             ${ALERT_DOMAINS.map((domain) => {
               if (!(domain in entitiesByDomain)) {
-                return "";
+                return nothing;
               }
               return this._deviceClasses[domain].map((deviceClass) => {
                 const entity = this._isOn(domain, deviceClass);
                 return entity
-                  ? html`<ha-svg-icon
-                      class="alert"
-                      .path=${DOMAIN_ICONS[domain][deviceClass] ||
-                      binarySensorIcon(entity.state, entity)}
-                    ></ha-svg-icon>`
+                  ? html`
+                      <ha-state-icon
+                        class="alert"
+                        .hass=${this.hass}
+                        .stateObj=${entity}
+                      ></ha-state-icon>
+                    `
                   : nothing;
               });
             })}
@@ -572,7 +582,14 @@ export class HuiAreaCard
         padding: 16px;
       }
 
-      .alerts ha-svg-icon {
+      ha-state-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+
+      .alerts ha-state-icon {
         background: var(--accent-color);
         color: var(--text-accent-color, var(--text-primary-color));
         padding: 8px;