Update dashboard button chips

home-assistant · Nov 9, 2023 · 54b3b0d · 54b3b0d
1 parent 93b0432
commit 54b3b0d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts
@@ -23,6 +23,7 @@ export class HaAssistChip extends MdAssistChip {
         --md-sys-color-on-surface: var(--primary-text-color);
         --md-assist-chip-container-shape: 16px;
         --md-assist-chip-outline-color: var(--outline-color);
+        --md-assist-chip-label-text-weight: 400;
       }
       /** Material 3 doesn't have a filled chip, so we have to make our own using elevated variant **/
       :host([filled]) {

diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/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/chips/ha-assist-chip";
+import "../../../components/chips/ha-chip-set";
 import "../../../components/ha-chip";
 import { haStyleScrollbar } from "../../../resources/styles";
 
@@ -20,7 +22,7 @@ export class HuiButtonsBase extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="ha-scrollbar">
+      <ha-chip-set class="ha-scrollbar">
         ${(this.configEntities || []).map((entityConf) => {
           const stateObj = this.hass.states[entityConf.entity];
 
@@ -31,16 +33,16 @@ export class HuiButtonsBase extends LitElement {
               : "";
 
           return html`
-            <ha-chip
+            <ha-assist-chip
+              filled
               @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}
+              .label=${name}
             >
               ${entityConf.show_icon !== false
                 ? html`
@@ -56,11 +58,10 @@ export class HuiButtonsBase extends LitElement {
                     ></state-badge>
                   `
                 : ""}
-              ${name}
-            </ha-chip>
+            </ha-assist-chip>
           `;
         })}
-      </div>
+      </ha-chip-set>
     `;
   }
 
@@ -74,7 +75,7 @@ export class HuiButtonsBase extends LitElement {
       haStyleScrollbar,
       css`
         .ha-scrollbar {
-          padding: 8px;
+          padding: 12px;
           padding-top: var(--padding-top, 8px);
           padding-bottom: var(--padding-bottom, 8px);
           width: 100%;
@@ -102,8 +103,9 @@ export class HuiButtonsBase extends LitElement {
           margin-left: -3px;
           margin-top: -3px;
         }
-        ha-chip {
-          padding: 4px;
+        ha-assist-chip state-badge {
+          margin-right: -4px;
+          --mdc-icon-size: 18px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           .ha-scrollbar {