From fd344e91fb02b5dcb3e7ef6565fc679935c078c2 Mon Sep 17 00:00:00 2001
From: Adam Tirella <macandcheese@users.noreply.github.com>
Date: Fri, 2 Jun 2023 11:33:15 -0700
Subject: [PATCH] fix(menu-item): Ensure correct order of rendered icons
 (#7098)

**Related Issue:** #7097

## Summary
Updates the rendered order of icons, updates local demo, adds screenshot
test.
---
 src/components/menu-item/menu-item.stories.ts | 24 +++++++++++++++++++
 src/components/menu-item/menu-item.tsx        |  4 ++--
 src/demos/menu.html                           |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/menu-item/menu-item.stories.ts b/src/components/menu-item/menu-item.stories.ts
index ef60689cfaf..1ec9a0c1842 100644
--- a/src/components/menu-item/menu-item.stories.ts
+++ b/src/components/menu-item/menu-item.stories.ts
@@ -67,6 +67,30 @@ export const iconsBoth = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
+export const allIconsAndSubMenu_TestOnly = (): string => html` <calcite-menu>
+  <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+  <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+    </calcite-menu-item>
+  </calcite-menu-item>
+  <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item
+></calcite-menu>`;
+
+export const allIconsAndSubMenuVertical_TestOnly = (): string => html`<calcite-menu layout="vertical">
+  <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+  <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+  <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+    </calcite-menu-item>
+  </calcite-menu-item>
+  <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
 export const darkModeRTL_TestOnly = (): string =>
   html`<calcite-menu-item
     text="Menu item"
diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx
index 1ff5fda606b..4715b4b7aca 100644
--- a/src/components/menu-item/menu-item.tsx
+++ b/src/components/menu-item/menu-item.tsx
@@ -444,9 +444,9 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
         <div class={CSS.textContainer}>
           <span>{this.text}</span>
         </div>
-        {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}
-        {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
         {this.iconEnd && this.renderIconEnd()}
+        {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
+        {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}
       </Fragment>
     );
   }
diff --git a/src/demos/menu.html b/src/demos/menu.html
index 380fa7d21e5..27d497e1f41 100644
--- a/src/demos/menu.html
+++ b/src/demos/menu.html
@@ -342,7 +342,7 @@ <h3>
                 </calcite-menu-item>
               </calcite-menu-item>
             </calcite-menu-item>
-            <calcite-menu-item text="Example nested" icon-start="layer">
+            <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer">
               <calcite-menu-item slot="submenu-item" title text="ArcGIS Online">
                 <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Capabilities">