feat(menu-item): Update spacing and icon layout (#7381)

**Related Issue:** #7105 ## Summary Updates Menu Item to reflect Figma designs for complex combinations of props: <img width="330" alt="Screenshot 2023-07-26 at 3 22 06 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/9a5da692-7698-4739-b984-e61409521eb4">
Esri · Aug 3, 2023 · 1b19ce9 · 1b19ce9
1 parent 3dae8dc
commit 1b19ce9
Show file tree

Hide file tree

Showing 5 changed files with 208 additions and 61 deletions.
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -68,6 +68,9 @@
     --calcite-ui-icon-color: var(--calcite-ui-brand);
   }
 }
+:host([layout="vertical"]) .content {
+  @apply px-3;
+}
 
 .icon--start {
   @apply me-3;
@@ -77,20 +80,47 @@
   @apply ms-3;
 }
 
+:host([layout="vertical"]) .icon--end {
+  @apply ms-auto ps-3;
+}
+
 .icon--dropdown {
   @apply ms-auto me-0 ps-2 relative;
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
 }
 
-:host([layout="vertical"]) .icon--dropdown {
-  inset-inline-start: theme("spacing.1");
+:host([layout="vertical"]) .icon--end ~ .icon--dropdown {
+  @apply ms-3;
+}
+
+:host([layout="vertical"]) .hover-href-icon {
+  @apply ps-2;
+}
+:host([layout="vertical"]) .hover-href-icon ~ .icon--end {
+  @apply ms-2;
+}
+
+:host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
+  @apply ms-3;
 }
 
 .icon--breadcrumb {
   @apply ps-2 me-0;
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
 }
 
+:host([layout="vertical"]) .icon--breadcrumb {
+  @apply ms-auto;
+}
+
+:host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
+  @apply ms-2;
+}
+
+:host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
+  @apply ms-2;
+}
+
 :host([breadcrumb]) .content {
   @apply pe-3;
 }
@@ -151,7 +181,7 @@ calcite-action {
 }
 
 :host([slot="submenu-item"]) .parent--vertical {
-  padding-inline-start: theme("spacing.7");
+  @apply ps-6;
 }
 
 .dropdown-menu-items.nested.calcite--rtl {
@@ -163,7 +193,7 @@ calcite-action {
 }
 
 .hover-href-icon {
-  @apply ps-8 ms-auto relative end-1 opacity-0;
+  @apply ms-auto relative end-1 opacity-0;
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
 

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
@@ -11,7 +11,7 @@ export default {
   ...storyFilters(),
 };
 
-export const simple = (): string => html` <calcite-menu>
+export const simple = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -24,7 +24,7 @@ export const simple = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconStart = (): string => html` <calcite-menu>
+export const iconStart = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -38,7 +38,7 @@ export const iconStart = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconEnd = (): string => html` <calcite-menu>
+export const iconEnd = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -52,7 +52,7 @@ export const iconEnd = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconsBoth = (): string => html` <calcite-menu>
+export const iconsBoth = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -67,11 +67,11 @@ export const iconsBoth = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const allIconsAndSubMenu_TestOnly = (): string => html` <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 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>
@@ -83,7 +83,7 @@ export const allIconsAndSubMenuVertical_TestOnly = (): string => html`<calcite-m
   <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 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>
@@ -97,6 +97,6 @@ export const darkModeRTL_TestOnly = (): string =>
     active
     dir="rtl"
     class="calcite-mode-dark"
-    icon-start="Layers"
-    icon-end="Layers"
+    icon-start="layer"
+    icon-end="layer"
   />`;
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -437,13 +437,26 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
     );
   }
 
+  renderHrefIcon(dir: Direction): VNode {
+    return (
+      <calcite-icon
+        class={CSS.hoverHrefIcon}
+        icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
+        key={CSS.hoverHrefIcon}
+        scale="s"
+      />
+    );
+  }
+
   renderItemContent(dir: Direction): VNode {
+    const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
     return (
       <Fragment>
         {this.iconStart && this.renderIconStart()}
         <div class={CSS.textContainer}>
           <span>{this.text}</span>
         </div>
+        {hasHref && this.renderHrefIcon(dir)}
         {this.iconEnd && this.renderIconEnd()}
         {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
         {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}
@@ -480,13 +493,6 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
               ref={(el) => (this.anchorEl = el)}
             >
               {this.renderItemContent(dir)}
-              {this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
-                <calcite-icon
-                  class={CSS.hoverHrefIcon}
-                  icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
-                  scale="s"
-                />
-              ) : null}
             </a>
             {this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}
           </div>

diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -11,40 +11,82 @@ export default {
   ...storyFilters(),
 };
 
-export const simple = (): string => html` <calcite-menu
+export const simple = (): string => html`<calcite-menu
   layout="${select("layout", ["horizontal", "vertical"], "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></calcite-menu-item>
 </calcite-menu>`;
 
+export const iconsAndBreadcrumb = (): string => html`<calcite-menu>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 1"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 2"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
+export const iconsAndBreadcrumbVertical_TestOnly = (): string => html`<calcite-menu layout="vertical">
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 1"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 2"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
 export const withNesting = (): string => html`<calcite-panel>
   <calcite-menu layout="${select("layout", ["horizontal", "vertical"], "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>
-      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item text="Example item 3" text-enabled open>
+      <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 slot="submenu-item" text="Example submenu item 2" text-enabled></calcite-menu-item>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
       </calcite-menu-item>
-      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" 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 text="Example item 4" text-enabled></calcite-menu-item></calcite-menu
 ></calcite-panel>`;
 
 export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
   <calcite-menu-item text="Item" href="#item" open>
-    <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
   </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
 </calcite-menu>`;
 
-export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html` <calcite-menu layout="vertical">
+export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html`<calcite-menu layout="vertical">
   <calcite-menu-item text="Item" href="#item" open>
-    <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
   </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
 </calcite-menu>`;
 
 export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" class="calcite-mode-dark">
@@ -53,6 +95,67 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
+export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell-panel width-scale="l">
+  <calcite-panel heading="Extreme nested vertical menu">
+    <calcite-menu layout="vertical">
+      <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"></calcite-menu-item>
+      <calcite-menu-item
+        icon-start="layer"
+        icon-end="layer"
+        href="#"
+        text="Example nested"
+        icon-start="layer"
+        breadcrumb
+      >
+        <calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
+        </calcite-menu-item>
+        <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" breadcrumb open>
+        <calcite-menu-item slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Capabilities" open>
+            <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"></calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Something else"></calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Another thing">
+            <calcite-menu-item slot="submenu-item" text="Great examples">
+              <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb></calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+            </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+        <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
+          <calcite-menu-item slot="submenu-item" text="Very nice example"></calcite-menu-item>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Short one" open>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Another thing" open>
+              <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" open>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+              </calcite-menu-item>
+            </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
+      <calcite-menu-item text="Reference" active></calcite-menu-item>
+      <calcite-menu-item text="Reference"></calcite-menu-item>
+      <calcite-menu-item text="Reference"></calcite-menu-item>
+    </calcite-menu>
+  </calcite-panel>
+</calcite-shell-panel>`;
+
 export const verticalLayoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
   layout="vertical"
   dir="rtl"