Add separator option to overflow icon menu (#13627)

src/components/ha-icon-overflow-menu.ts

@@ -19,6 +19,7 @@ export interface IconOverflowMenuItem {
   tooltip?: string;
   action: () => any;
   warning?: boolean;
+  divider?: boolean;
 }
 
 @customElement("ha-icon-overflow-menu")
@@ -46,9 +47,10 @@ export class HaIconOverflowMenu extends LitElement {
                 slot="trigger"
               ></ha-icon-button>
 
-              ${this.items.map(
+              ${this.items.map((item) =>
-                (item) => html`
+                item.divider
-                  <mwc-list-item
+                  ? html`<li divider role="separator"></li>`
+                  : html`<mwc-list-item
                       graphic="icon"
                       ?disabled=${item.disabled}
                       @click=${item.action}
@@ -61,8 +63,7 @@ export class HaIconOverflowMenu extends LitElement {
                         ></ha-svg-icon>
                       </div>
                       ${item.label}
-                  </mwc-list-item>
+                    </mwc-list-item> `
-                `
               )}
             </ha-button-menu>`
         : html`
@@ -70,6 +71,8 @@ export class HaIconOverflowMenu extends LitElement {
             ${this.items.map((item) =>
               item.narrowOnly
                 ? ""
+                : item.divider
+                ? html`<div role="separator"></div>`
                 : html`<div>
                     ${item.tooltip
                       ? html`<paper-tooltip animation-delay="0" position="left">
@@ -114,6 +117,13 @@ export class HaIconOverflowMenu extends LitElement {
           display: flex;
           justify-content: flex-end;
         }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
+        div[role="separator"] {
+          border-right: 1px solid var(--divider-color);
+          width: 1px;
+        }
       `,
     ];
   }

src/panels/config/automation/ha-automation-picker.ts

@@ -212,6 +212,9 @@ class HaAutomationPicker extends LitElement {
                   ),
                   action: () => this._showTrace(automation),
                 },
+                {
+                  divider: true,
+                },
                 {
                   path: mdiContentDuplicate,
                   label: this.hass.localize(

src/panels/config/scene/ha-scene-dashboard.ts

@@ -157,6 +157,9 @@ class HaSceneDashboard extends LitElement {
                   ),
                   action: () => this._activateScene(scene),
                 },
+                {
+                  divider: true,
+                },
                 {
                   path: mdiContentDuplicate,
                   label: this.hass.localize(

src/panels/config/script/ha-script-picker.ts

@@ -155,6 +155,9 @@ class HaScriptPicker extends LitElement {
                 ),
                 action: () => this._showTrace(script),
               },
+              {
+                divider: true,
+              },
               {
                 path: mdiContentDuplicate,
                 label: this.hass.localize(