Use chips for button rows (#10770)

src/components/ha-chip.ts

@@ -14,11 +14,17 @@ import { customElement, property } from "lit/decorators";
 export class HaChip extends LitElement {
   @property({ type: Boolean }) public hasIcon = false;
 
+  @property({ type: Boolean }) public noText = false;
+
   protected render(): TemplateResult {
     return html`
       <div class="mdc-chip">
         ${this.hasIcon
-          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
+          ? html`<div
+              class="mdc-chip__icon mdc-chip__icon--leading ${this.noText
+                ? "no-text"
+                : ""}"
+            >
               <slot name="icon"></slot>
             </div>`
           : null}
@@ -51,6 +57,10 @@ export class HaChip extends LitElement {
         --mdc-icon-size: 20px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
+      .mdc-chip
+        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden).no-text {
+        margin-right: -4px;
+      }
     `;
   }
 }

src/panels/lovelace/cards/hui-entities-card.ts

@@ -134,7 +134,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
 
     if (this._config.header) {
-      this._headerElement = createHeaderFooterElement(this._config.header);
+      this._headerElement = createHeaderFooterElement(
+        this._config.header
+      ) as LovelaceHeaderFooter;
+      this._headerElement.type = "header";
       if (this._hass) {
         this._headerElement.hass = this._hass;
       }
@@ -143,7 +146,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
 
     if (this._config.footer) {
-      this._footerElement = createHeaderFooterElement(this._config.footer);
+      this._footerElement = createHeaderFooterElement(
+        this._config.footer
+      ) as LovelaceHeaderFooter;
+      this._footerElement.type = "footer";
       if (this._hass) {
         this._footerElement.hass = this._hass;
       }

src/panels/lovelace/components/hui-buttons-base.ts

@@ -9,6 +9,8 @@ import { computeTooltip } from "../common/compute-tooltip";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
+import "../../../components/ha-chip";
+import { haStyleScrollbar } from "../../../resources/styles";
 
 @customElement("hui-buttons-base")
 export class HuiButtonsBase extends LitElement {
@@ -18,40 +20,46 @@ export class HuiButtonsBase extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${(this.configEntities || []).map((entityConf) => {
-        const stateObj = this.hass.states[entityConf.entity];
+      <div class="ha-scrollbar">
+        ${(this.configEntities || []).map((entityConf) => {
+          const stateObj = this.hass.states[entityConf.entity];
 
-        return html`
-          <div
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(entityConf.hold_action),
-              hasDoubleClick: hasAction(entityConf.double_tap_action),
-            })}
-            .config=${entityConf}
-            tabindex="0"
-          >
-            ${entityConf.show_icon !== false
-              ? html`
-                  <state-badge
-                    title=${computeTooltip(this.hass, entityConf)}
-                    .hass=${this.hass}
-                    .stateObj=${stateObj}
-                    .overrideIcon=${entityConf.icon}
-                    .overrideImage=${entityConf.image}
-                    stateColor
-                  ></state-badge>
-                `
-              : ""}
-            <span>
-              ${(entityConf.show_name && stateObj) ||
-              (entityConf.name && entityConf.show_name !== false)
-                ? entityConf.name || computeStateName(stateObj)
+          const name =
+            (entityConf.show_name && stateObj) ||
+            (entityConf.name && entityConf.show_name !== false)
+              ? entityConf.name || computeStateName(stateObj)
+              : "";
+
+          return html`
+            <ha-chip
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(entityConf.hold_action),
+                hasDoubleClick: hasAction(entityConf.double_tap_action),
+              })}
+              .config=${entityConf}
+              tabindex="0"
+              .hasIcon=${entityConf.show_icon !== false}
+              .noText=${!name}
+            >
+              ${entityConf.show_icon !== false
+                ? html`
+                    <state-badge
+                      title=${computeTooltip(this.hass, entityConf)}
+                      .hass=${this.hass}
+                      .stateObj=${stateObj}
+                      .overrideIcon=${entityConf.icon}
+                      .overrideImage=${entityConf.image}
+                      stateColor
+                      slot="icon"
+                    ></state-badge>
+                  `
                 : ""}
-            </span>
-          </div>
-        `;
-      })}
+              ${name}
+            </ha-chip>
+          `;
+        })}
+      </div>
     `;
   }
 
@@ -61,20 +69,36 @@ export class HuiButtonsBase extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        padding: 0 8px;
-      }
-      div {
-        cursor: pointer;
-        align-items: center;
-        display: inline-flex;
-        outline: none;
-      }
-    `;
+    return [
+      haStyleScrollbar,
+      css`
+        .ha-scrollbar {
+          padding: 8px;
+          padding-top: var(--padding-top, 8px);
+          padding-bottom: var(--padding-bottom, 8px);
+          width: 100%;
+          overflow-x: auto;
+          overflow-y: hidden;
+          white-space: nowrap;
+          box-sizing: border-box;
+          display: flex;
+          flex-wrap: wrap;
+        }
+        state-badge {
+          line-height: inherit;
+          text-align: start;
+          color: var(--secondary-text-color);
+        }
+        ha-chip {
+          padding: 4px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          .ha-scrollbar {
+            flex-wrap: nowrap;
+          }
+        }
+      `,
+    ];
   }
 }
 

src/panels/lovelace/header-footer/hui-buttons-header-footer.ts

@@ -1,4 +1,5 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { classMap } from "lit/directives/class-map";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { HomeAssistant } from "../../../types";
@@ -19,6 +20,8 @@ export class HuiButtonsHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public type!: "header" | "footer";
+
   @state() private _configEntities?: EntityConfig[];
 
   public getCardSize(): number {
@@ -47,12 +50,43 @@ export class HuiButtonsHeaderFooter
 
   protected render(): TemplateResult | void {
     return html`
+      ${this.type === "footer"
+        ? html`<li class="divider footer" role="separator"></li>`
+        : ""}
       <hui-buttons-base
         .hass=${this.hass}
         .configEntities=${this._configEntities}
+        class=${classMap({
+          footer: this.type === "footer",
+          header: this.type === "header",
+        })}
       ></hui-buttons-base>
+      ${this.type === "header"
+        ? html`<li class="divider header" role="separator"></li>`
+        : ""}
     `;
   }
+
+  static styles = css`
+    .divider {
+      height: 0;
+      margin: 16px 0;
+      list-style-type: none;
+      border: none;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-bottom-color: var(--divider-color);
+    }
+    .divider.header {
+      margin-top: 0;
+    }
+    hui-buttons-base.footer {
+      --padding-bottom: 16px;
+    }
+    hui-buttons-base.header {
+      --padding-top: 16px;
+    }
+  `;
 }
 
 declare global {

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -60,6 +60,8 @@ export class HuiGraphHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public type!: "header" | "footer";
+
   @property() protected _config?: GraphHeaderFooterConfig;
 
   @state() private _coordinates?: number[][];

src/panels/lovelace/header-footer/hui-picture-header-footer.ts

@@ -34,6 +34,8 @@ export class HuiPictureHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public type!: "header" | "footer";
+
   @property() protected _config?: PictureHeaderFooterConfig;
 
   public getCardSize(): number {

src/panels/lovelace/types.ts

@@ -68,6 +68,7 @@ export interface LovelaceRowConstructor extends Constructor<LovelaceRow> {
 
 export interface LovelaceHeaderFooter extends HTMLElement {
   hass?: HomeAssistant;
+  type: "header" | "footer";
   getCardSize(): number | Promise<number>;
   setConfig(config: LovelaceHeaderFooterConfig): void;
 }