From 966abb44cbd455f227c3d7a017cd37ed107e6224 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 2 Jun 2023 09:59:41 -0700
Subject: [PATCH 1/3] fix(menu-item): Ensure correct order of rendered icons

---
 src/components/menu-item/menu-item.stories.ts | 26 +++++++++++++++++++
 src/components/menu-item/menu-item.tsx        |  4 +--
 src/demos/menu.html                           |  4 +--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/menu-item/menu-item.stories.ts b/src/components/menu-item/menu-item.stories.ts
index ef60689cfaf..19e9701a1a0 100644
--- a/src/components/menu-item/menu-item.stories.ts
+++ b/src/components/menu-item/menu-item.stories.ts
@@ -67,6 +67,32 @@ export const iconsBoth = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
+export const allIconsAndSubMenu_TestOnly = (): string => html` <calcite-menu>
+  <calcite-menu layout="horizontal">
+    <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
+></calcite-menu>`;
+
+export const allIconsAndSubMenuVertical_TestOnly = (): string => html` <calcite-menu>
+  <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
+></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..d397001b9a2 100644
--- a/src/demos/menu.html
+++ b/src/demos/menu.html
@@ -342,8 +342,8 @@ <h3>
                 </calcite-menu-item>
               </calcite-menu-item>
             </calcite-menu-item>
-            <calcite-menu-item text="Example nested" icon-start="layer">
-              <calcite-menu-item slot="submenu-item" title text="ArcGIS Online">
+            <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">
                   <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>

From 79c806d940adcb8dc4c5da4ab5b8c6ee7dd4c406 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 2 Jun 2023 10:13:14 -0700
Subject: [PATCH 2/3] Update screenshot tests

---
 src/components/menu-item/menu-item.stories.ts | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/menu-item/menu-item.stories.ts b/src/components/menu-item/menu-item.stories.ts
index 19e9701a1a0..1ec9a0c1842 100644
--- a/src/components/menu-item/menu-item.stories.ts
+++ b/src/components/menu-item/menu-item.stories.ts
@@ -68,30 +68,28 @@ export const iconsBoth = (): string => html` <calcite-menu>
 </calcite-menu>`;
 
 export const allIconsAndSubMenu_TestOnly = (): string => html` <calcite-menu>
-  <calcite-menu layout="horizontal">
-    <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 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 text="Example item 4" text-enabled></calcite-menu-item> </calcite-menu
+  </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>
-  <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>
+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 text="Example item 4" text-enabled></calcite-menu-item> </calcite-menu
-></calcite-menu>`;
+  </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

From 7c9dc432a8a7dba4d8d91496128c6eae7719f4f7 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 2 Jun 2023 10:19:42 -0700
Subject: [PATCH 3/3] Clean up

---
 src/demos/menu.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/demos/menu.html b/src/demos/menu.html
index d397001b9a2..27d497e1f41 100644
--- a/src/demos/menu.html
+++ b/src/demos/menu.html
@@ -343,7 +343,7 @@ <h3>
               </calcite-menu-item>
             </calcite-menu-item>
             <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" title text="ArcGIS Online">
                 <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Capabilities">
                   <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>