feat(chip): convert chips-card to ha-card (#502)

piitaya · May 17, 2022 · 2990688 · 2990688
1 parent afd3bd2
commit 2990688
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/src/cards/chips-card/chips-card.ts b/src/cards/chips-card/chips-card.ts
@@ -80,9 +80,11 @@ export class ChipsCard extends LitElement implements LovelaceCard {
         const rtl = computeRTL(this._hass);
 
         return html`
-            <div class="chip-container ${alignment}" ?rtl=${rtl}>
-                ${this._config.chips.map((chip) => this.renderChip(chip))}
-            </div>
+            <ha-card>
+                <div class="chip-container ${alignment}" ?rtl=${rtl}>
+                    ${this._config.chips.map((chip) => this.renderChip(chip))}
+                </div>
+            </ha-card>
         `;
     }
 
@@ -100,8 +102,17 @@ export class ChipsCard extends LitElement implements LovelaceCard {
     static get styles(): CSSResultGroup {
         return [
             MushroomBaseElement.styles,
-            cardStyle,
             css`
+                ha-card {
+                    background: none;
+                    box-shadow: none;
+                    border-radius: 0;
+                }
+                :host-context(ha-card) {
+                    --ha-card-background: none;
+                    --ha-card-box-shadow: none;
+                    --chip-spacing: 0;
+                }
                 .chip-container {
                     display: flex;
                     flex-direction: row;

diff --git a/src/shared/chip.ts b/src/shared/chip.ts
@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, customElement } from "lit/decorators.js";
 
 @customElement("mushroom-chip")
-export class BadgeIcon extends LitElement {
+export class Chip extends LitElement {
     @property() public icon: string = "";
 
     @property() public label: string = "";
@@ -13,7 +13,7 @@ export class BadgeIcon extends LitElement {
 
     protected render(): TemplateResult {
         return html`
-            <ha-card class="chip">
+            <div class="chip">
                 ${this.avatar ? html` <img class="avatar" src=${this.avatar} /> ` : null}
                 ${!this.avatarOnly
                     ? html`
@@ -22,7 +22,7 @@ export class BadgeIcon extends LitElement {
                           </div>
                       `
                     : null}
-            </ha-card>
+            </div>
         `;
     }
 
@@ -42,6 +42,13 @@ export class BadgeIcon extends LitElement {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                box-shadow: var(
+                    --ha-card-box-shadow,
+                    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+                    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+                    0px 1px 3px 0px rgba(0, 0, 0, 0.12)
+                );
+                background: var(--ha-card-background, var(--card-background-color, white));
             }
             .avatar {
                 --avatar-size: calc(var(--chip-height) - 2 * var(--chip-avatar-padding));