From 980156d23acd07b94963895b1033ee90c137f510 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Wed, 7 Sep 2022 15:56:18 +0200
Subject: [PATCH] Add separator option to overflow icon menu (#13627)

---
 src/components/ha-icon-overflow-menu.ts       | 44 ++++++++++++-------
 .../config/automation/ha-automation-picker.ts |  3 ++
 src/panels/config/scene/ha-scene-dashboard.ts |  3 ++
 src/panels/config/script/ha-script-picker.ts  |  3 ++
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/ha-icon-overflow-menu.ts b/src/components/ha-icon-overflow-menu.ts
index a124813373..2ec0093232 100644
--- a/src/components/ha-icon-overflow-menu.ts
+++ b/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(
-                (item) => html`
-                  <mwc-list-item
-                    graphic="icon"
-                    ?disabled=${item.disabled}
-                    @click=${item.action}
-                    class=${classMap({ warning: Boolean(item.warning) })}
-                  >
-                    <div slot="graphic">
-                      <ha-svg-icon
-                        class=${classMap({ warning: Boolean(item.warning) })}
-                        .path=${item.path}
-                      ></ha-svg-icon>
-                    </div>
-                    ${item.label}
-                  </mwc-list-item>
-                `
+              ${this.items.map((item) =>
+                item.divider
+                  ? html`<li divider role="separator"></li>`
+                  : html`<mwc-list-item
+                      graphic="icon"
+                      ?disabled=${item.disabled}
+                      @click=${item.action}
+                      class=${classMap({ warning: Boolean(item.warning) })}
+                    >
+                      <div slot="graphic">
+                        <ha-svg-icon
+                          class=${classMap({ warning: Boolean(item.warning) })}
+                          .path=${item.path}
+                        ></ha-svg-icon>
+                      </div>
+                      ${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;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 63c91c3561..dc395aefaf 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/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(
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index 1c6bf75e40..cd31e69268 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/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(
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index 223a58ccf2..da705e7ef4 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/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(