Fix test only and icon only badge

piitaya · Jul 22, 2024 · 1432131 · 1432131
1 parent a37b8a0
commit 1432131
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/badges/template/template-badge.ts b/src/badges/template/template-badge.ts
@@ -8,6 +8,7 @@ import {
   PropertyValues,
 } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 import {
@@ -211,7 +212,10 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
     return html`
       <div
         style=${styleMap(style)}
-        class="badge"
+        class="badge ${classMap({
+          "text-only": (!icon && !picture && content) ?? false,
+          "icon-only": (!content && (icon || picture)) ?? false,
+        })}"
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),
@@ -339,14 +343,20 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge {
         object-fit: cover;
         overflow: hidden;
       }
-      .badge.minimal {
+      .badge.icon-only {
         padding: 0;
       }
-      .badge:not(.minimal) img {
+      .badge:not(.icon-only) img {
         margin-left: -6px;
         margin-inline-start: -6px;
         margin-inline-end: initial;
       }
+      .badge.text-only .content {
+        padding-right: 4px;
+        padding-left: 4px;
+        padding-inline-end: 4px;
+        padding-inline-start: 4px;
+      }
     `;
   }
 }