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.
Esri · Jun 2, 2023 · fd344e9 · fd344e9
1 parent e8d9e05
commit fd344e9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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">