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,23 +47,23 @@ 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>`
-                    graphic="icon"
+                  : html`<mwc-list-item
-                    ?disabled=${item.disabled}
+                      graphic="icon"
-                    @click=${item.action}
+                      ?disabled=${item.disabled}
-                    class=${classMap({ warning: Boolean(item.warning) })}
+                      @click=${item.action}
-                  >
+                      class=${classMap({ warning: Boolean(item.warning) })}
-                    <div slot="graphic">
+                    >
-                      <ha-svg-icon
+                      <div slot="graphic">
-                        class=${classMap({ warning: Boolean(item.warning) })}
+                        <ha-svg-icon
-                        .path=${item.path}
+                          class=${classMap({ warning: Boolean(item.warning) })}
-                      ></ha-svg-icon>
+                          .path=${item.path}
-                    </div>
+                        ></ha-svg-icon>
-                    ${item.label}
+                      </div>
-                  </mwc-list-item>
+                      ${item.label}
-                `
+                    </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(