Adjust chip usage

hacs · Jan 11, 2024 · bb78b75 · bb78b75
1 parent b1b01bc
commit bb78b75
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/src/dashboards/hacs-repository-dashboard.ts b/src/dashboards/hacs-repository-dashboard.ts
@@ -13,7 +13,8 @@ import memoizeOne from "memoize-one";
 import { mainWindow } from "../../homeassistant-frontend/src/common/dom/get_main_window";
 import { extractSearchParamsObject } from "../../homeassistant-frontend/src/common/url/search-params";
 import "../../homeassistant-frontend/src/components/ha-card";
-import "../../homeassistant-frontend/src/components/chips/ha-filter-chip";
+import "../../homeassistant-frontend/src/components/chips/ha-chip-set";
+import "../../homeassistant-frontend/src/components/chips/ha-assist-chip";
 import "../../homeassistant-frontend/src/components/ha-fab";
 import "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
 import "../../homeassistant-frontend/src/components/ha-markdown";
@@ -195,16 +196,15 @@ export class HacsRepositoryDashboard extends LitElement {
         </ha-icon-overflow-menu>
         <div class="content">
           <ha-card>
-            <div class="chips">
+            <ha-chip-set>
               ${this._repository.installed
                 ? html`
-                    <ha-filter-chip
+                    <ha-assist-chip
+                      .label=${this._repository.installed_version}
                       title="${this.hacs.localize("dialog_info.version_installed")}"
-                      hasIcon
                     >
                       <ha-svg-icon slot="icon" .path=${mdiCube}></ha-svg-icon>
-                      ${this._repository.installed_version}
-                    </ha-filter-chip>
+                    </ha-assist-chip>
                   `
                 : ""}
               ${authors
@@ -215,37 +215,45 @@ export class HacsRepositoryDashboard extends LitElement {
                         target="_blank"
                         rel="noreferrer noopener"
                       >
-                        <ha-filter-chip title="${this.hacs.localize("dialog_info.author")}" hasIcon>
+                        <ha-assist-chip
+                          .label=${author}
+                          title="${this.hacs.localize("dialog_info.author")}"
+                        >
                           <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
                           @${author}
-                        </ha-filter-chip>
+                        </ha-assist-chip>
                       </a>`,
                   )
                 : ""}
               ${this._repository.downloads
-                ? html` <ha-filter-chip
-                    hasIcon
+                ? html` <ha-assist-chip
                     title="${this.hacs.localize("dialog_info.downloads")}"
+                    .label=${String(this._repository.downloads)}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiArrowDownBold}></ha-svg-icon>
-                    ${this._repository.downloads}
-                  </ha-filter-chip>`
+                  </ha-assist-chip>`
                 : ""}
-              <ha-filter-chip title="${this.hacs.localize("dialog_info.stars")}" hasIcon>
+              <ha-assist-chip
+                .label=${String(this._repository.stars)}
+                title="${this.hacs.localize("dialog_info.stars")}"
+              >
                 <ha-svg-icon slot="icon" .path=${mdiStar}></ha-svg-icon>
                 ${this._repository.stars}
-              </ha-filter-chip>
+              </ha-assist-chip>
               <a
                 href="https://github.com/${this._repository.full_name}/issues"
                 target="_blank"
                 rel="noreferrer noopener"
               >
-                <ha-filter-chip title="${this.hacs.localize("dialog_info.open_issues")}" hasIcon>
+                <ha-assist-chip
+                  .label=${String(this._repository.issues)}
+                  title="${this.hacs.localize("dialog_info.open_issues")}"
+                >
                   <ha-svg-icon slot="icon" .path=${mdiExclamationThick}></ha-svg-icon>
                   ${this._repository.issues}
-                </ha-filter-chip>
+                </ha-assist-chip>
               </a>
-            </div>
+            </ha-chip-set>
             <ha-markdown
               .content=${markdownWithRepositoryContext(
                 this._repository.additional_info,
@@ -319,11 +327,8 @@ export class HacsRepositoryDashboard extends LitElement {
           max-width: 1536px;
         }
 
-        .chips {
-          display: flex;
-          flex-wrap: wrap;
+        ha-chip-set {
           padding-bottom: 8px;
-          gap: 4px;
         }
 
         @media all and (max-width: 500px) {