From fdeca9521522b5009874e8de241cc8129166beab Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Dec 2025 11:55:15 +0000
Subject: [PATCH] Migrate ha-button-menu to ha-dropdown in devices dashboard

Co-authored-by: wendevlin <12148533+wendevlin@users.noreply.github.com>
---
 .../devices/ha-config-devices-dashboard.ts    | 118 ++++++++----------
 1 file changed, 54 insertions(+), 64 deletions(-)

diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index cf913876ac..249e8f3e3b 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -47,12 +47,14 @@ import "../../../components/ha-check-list-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
+import "@home-assistant/webawesome/dist/components/divider/divider";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
 import "../../../components/ha-filter-integrations";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-states";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-md-divider";
-import "../../../components/ha-md-menu-item";
+import "../../../components/ha-md-menu";
 import "../../../components/ha-sub-menu";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
 import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
@@ -720,34 +722,30 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
 
     const areaItems = html`${Object.values(this.hass.areas).map(
         (area) =>
-          html`<ha-md-menu-item
+          html`<ha-dropdown-item
             .value=${area.area_id}
             .clickAction=${this._handleBulkArea}
           >
             ${area.icon
-              ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
+              ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
               : html`<ha-svg-icon
-                  slot="start"
+                  slot="icon"
                   .path=${mdiTextureBox}
                 ></ha-svg-icon>`}
-            <div slot="headline">${area.name}</div>
-          </ha-md-menu-item>`
+            ${area.name}
+          </ha-dropdown-item>`
       )}
-      <ha-md-menu-item .value=${null} .clickAction=${this._handleBulkArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.no_area"
-          )}
-        </div>
-      </ha-md-menu-item>
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateArea}>
-        <div slot="headline">
-          ${this.hass.localize(
-            "ui.panel.config.devices.picker.bulk_actions.add_area"
-          )}
-        </div>
-      </ha-md-menu-item>`;
+      <ha-dropdown-item .value=${null} .clickAction=${this._handleBulkArea}>
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.no_area"
+        )}
+      </ha-dropdown-item>
+      <wa-divider></wa-divider>
+      <ha-dropdown-item .clickAction=${this._bulkCreateArea}>
+        ${this.hass.localize(
+          "ui.panel.config.devices.picker.bulk_actions.add_area"
+        )}
+      </ha-dropdown-item>`;
 
     const labelItems = html`${this._labels?.map((label) => {
         const color = label.color ? computeCssColor(label.color) : undefined;
@@ -759,14 +757,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
           this._selected.some((deviceId) =>
             this.hass.devices[deviceId]?.labels.includes(label.label_id)
           );
-        return html`<ha-md-menu-item
+        return html`<ha-dropdown-item
           .value=${label.label_id}
           .action=${selected ? "remove" : "add"}
           @click=${this._handleBulkLabel}
           keep-open
         >
           <ha-checkbox
-            slot="start"
+            slot="icon"
             .checked=${selected}
             .indeterminate=${partial}
             reducedTouchTarget
@@ -780,14 +778,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               : nothing}
             ${label.name}
           </ha-label>
-        </ha-md-menu-item>`;
+        </ha-dropdown-item>`;
       })}
-      <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-      <ha-md-menu-item .clickAction=${this._bulkCreateLabel}>
-        <div slot="headline">
-          ${this.hass.localize("ui.panel.config.labels.add_label")}
-        </div></ha-md-menu-item
-      >`;
+      <wa-divider></wa-divider>
+      <ha-dropdown-item .clickAction=${this._bulkCreateLabel}>
+        ${this.hass.localize("ui.panel.config.labels.add_label")}
+      </ha-dropdown-item>`;
 
     return html`
       <hass-tabs-subpage-data-table
@@ -906,7 +902,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         ></ha-filter-labels>
 
         ${!this.narrow
-          ? html`<ha-md-button-menu slot="selection-bar">
+          ? html`<ha-dropdown slot="selection-bar">
                 <ha-assist-chip
                   slot="trigger"
                   .label=${this.hass.localize(
@@ -919,11 +915,11 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-assist-chip>
                 ${labelItems}
-              </ha-md-button-menu>
+              </ha-dropdown>
 
               ${areasInOverflow
                 ? nothing
-                : html`<ha-md-button-menu slot="selection-bar">
+                : html`<ha-dropdown slot="selection-bar">
                     <ha-assist-chip
                       slot="trigger"
                       .label=${this.hass.localize(
@@ -936,9 +932,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                       ></ha-svg-icon>
                     </ha-assist-chip>
                     ${areaItems}
-                  </ha-md-button-menu>`}`
+                  </ha-dropdown>`}`
           : nothing}
-        <ha-md-button-menu has-overflow slot="selection-bar">
+        <ha-dropdown has-overflow slot="selection-bar">
           ${this.narrow
             ? html`<ha-assist-chip
                 .label=${this.hass.localize(
@@ -960,50 +956,44 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               ></ha-icon-button>`}
           ${this.narrow
             ? html` <ha-sub-menu>
-                <ha-md-menu-item slot="item">
-                  <div slot="headline">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_actions.add_label"
-                    )}
-                  </div>
+                <ha-dropdown-item slot="item">
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.picker.bulk_actions.add_label"
+                  )}
                   <ha-svg-icon
-                    slot="end"
+                    slot="details"
                     .path=${mdiChevronRight}
                   ></ha-svg-icon>
-                </ha-md-menu-item>
+                </ha-dropdown-item>
                 <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
               </ha-sub-menu>`
             : nothing}
           ${areasInOverflow
             ? html`<ha-sub-menu>
-                  <ha-md-menu-item slot="item">
-                    <div slot="headline">
-                      ${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
-                    </div>
+                  <ha-dropdown-item slot="item">
+                    ${this.hass.localize(
+                      "ui.panel.config.devices.picker.bulk_actions.move_area"
+                    )}
                     <ha-svg-icon
-                      slot="end"
+                      slot="details"
                       .path=${mdiChevronRight}
                     ></ha-svg-icon>
-                  </ha-md-menu-item>
+                  </ha-dropdown-item>
                   <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
                 </ha-sub-menu>
-                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
+                <wa-divider></wa-divider>`
             : nothing}
-          <ha-md-menu-item
+          <ha-dropdown-item
             .clickAction=${this._deleteSelected}
             .disabled=${!this._selectedCanDelete.length}
-            class="warning"
+            variant="danger"
           >
-            <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-            <div slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
-              )}
-            </div>
-          </ha-md-menu-item>
-        </ha-md-button-menu>
+            <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
+            )}
+          </ha-dropdown-item>
+        </ha-dropdown>
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -1277,7 +1267,7 @@ ${rejected
         ha-assist-chip {
           --ha-assist-chip-container-shape: 10px;
         }
-        ha-md-button-menu ha-assist-chip {
+        ha-dropdown ha-assist-chip {
           --md-assist-chip-trailing-space: 8px;
         }
         ha-label {