Skip to content

Commit 5659671

Browse files
macandcheesemacandcheese
authored
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">
1 parent 99f7e32 commit 5659671

File tree

5 files changed

+208
-61
lines changed

5 files changed

+208
-61
lines changed

‎packages/calcite-components/src/components/menu-item/menu-item.scss

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@
6868
--calcite-ui-icon-color: var(--calcite-ui-brand);
6969
}
7070
}
71+
:host([layout="vertical"]) .content {
72+
@apply px-3;
73+
}
7174

7275
.icon--start {
7376
@apply me-3;
@@ -77,20 +80,47 @@
7780
@apply ms-3;
7881
}
7982

83+
:host([layout="vertical"]) .icon--end {
84+
@apply ms-auto ps-3;
85+
}
86+
8087
.icon--dropdown {
8188
@apply ms-auto me-0 ps-2 relative;
8289
--calcite-ui-icon-color: var(--calcite-ui-text-3);
8390
}
8491

85-
:host([layout="vertical"]) .icon--dropdown {
86-
inset-inline-start: theme("spacing.1");
92+
:host([layout="vertical"]) .icon--end ~ .icon--dropdown {
93+
@apply ms-3;
94+
}
95+
96+
:host([layout="vertical"]) .hover-href-icon {
97+
@apply ps-2;
98+
}
99+
:host([layout="vertical"]) .hover-href-icon ~ .icon--end {
100+
@apply ms-2;
101+
}
102+
103+
:host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
104+
@apply ms-3;
87105
}
88106

89107
.icon--breadcrumb {
90108
@apply ps-2 me-0;
91109
--calcite-ui-icon-color: var(--calcite-ui-text-3);
92110
}
93111

112+
:host([layout="vertical"]) .icon--breadcrumb {
113+
@apply ms-auto;
114+
}
115+
116+
:host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
117+
@apply ms-2;
118+
}
119+
120+
:host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
121+
@apply ms-2;
122+
}
123+
94124
:host([breadcrumb]) .content {
95125
@apply pe-3;
96126
}
@@ -151,7 +181,7 @@ calcite-action {
151181
}
152182

153183
:host([slot="submenu-item"]) .parent--vertical {
154-
padding-inline-start: theme("spacing.7");
184+
@apply ps-6;
155185
}
156186

157187
.dropdown-menu-items.nested.calcite--rtl {
@@ -163,7 +193,7 @@ calcite-action {
163193
}
164194

165195
.hover-href-icon {
166-
@apply ps-8 ms-auto relative end-1 opacity-0;
196+
@apply ms-auto relative end-1 opacity-0;
167197
transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
168198
}
169199

‎packages/calcite-components/src/components/menu-item/menu-item.stories.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default {
1111
...storyFilters(),
1212
};
1313

14-
export const simple = (): string => html` <calcite-menu>
14+
export const simple = (): string => html`<calcite-menu>
1515
<calcite-menu-item
1616
text="${text("text", "Menu item")}"
1717
src="${text("src", "")}"
@@ -24,7 +24,7 @@ export const simple = (): string => html` <calcite-menu>
2424
/>
2525
</calcite-menu>`;
2626

27-
export const iconStart = (): string => html` <calcite-menu>
27+
export const iconStart = (): string => html`<calcite-menu>
2828
<calcite-menu-item
2929
text="${text("text", "Menu item")}"
3030
src="${text("src", "")}"
@@ -38,7 +38,7 @@ export const iconStart = (): string => html` <calcite-menu>
3838
/>
3939
</calcite-menu>`;
4040

41-
export const iconEnd = (): string => html` <calcite-menu>
41+
export const iconEnd = (): string => html`<calcite-menu>
4242
<calcite-menu-item
4343
text="${text("text", "Menu item")}"
4444
src="${text("src", "")}"
@@ -52,7 +52,7 @@ export const iconEnd = (): string => html` <calcite-menu>
5252
/>
5353
</calcite-menu>`;
5454

55-
export const iconsBoth = (): string => html` <calcite-menu>
55+
export const iconsBoth = (): string => html`<calcite-menu>
5656
<calcite-menu-item
5757
text="${text("text", "Menu item")}"
5858
src="${text("src", "")}"
@@ -67,11 +67,11 @@ export const iconsBoth = (): string => html` <calcite-menu>
6767
/>
6868
</calcite-menu>`;
6969

70-
export const allIconsAndSubMenu_TestOnly = (): string => html` <calcite-menu>
70+
export const allIconsAndSubMenu_TestOnly = (): string => html`<calcite-menu>
7171
<calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
7272
<calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
7373
<calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
74-
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
74+
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
7575
<calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
7676
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
7777
</calcite-menu-item>
@@ -83,7 +83,7 @@ export const allIconsAndSubMenuVertical_TestOnly = (): string => html`<calcite-m
8383
<calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
8484
<calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
8585
<calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
86-
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
86+
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
8787
<calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
8888
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
8989
</calcite-menu-item>
@@ -97,6 +97,6 @@ export const darkModeRTL_TestOnly = (): string =>
9797
active
9898
dir="rtl"
9999
class="calcite-mode-dark"
100-
icon-start="Layers"
101-
icon-end="Layers"
100+
icon-start="layer"
101+
icon-end="layer"
102102
/>`;

‎packages/calcite-components/src/components/menu-item/menu-item.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -437,13 +437,26 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
437437
);
438438
}
439439

440+
renderHrefIcon(dir: Direction): VNode {
441+
return (
442+
<calcite-icon
443+
class={CSS.hoverHrefIcon}
444+
icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
445+
key={CSS.hoverHrefIcon}
446+
scale="s"
447+
/>
448+
);
449+
}
450+
440451
renderItemContent(dir: Direction): VNode {
452+
const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
441453
return (
442454
<Fragment>
443455
{this.iconStart && this.renderIconStart()}
444456
<div class={CSS.textContainer}>
445457
<span>{this.text}</span>
446458
</div>
459+
{hasHref && this.renderHrefIcon(dir)}
447460
{this.iconEnd && this.renderIconEnd()}
448461
{this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
449462
{!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}
@@ -480,13 +493,6 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
480493
ref={(el) => (this.anchorEl = el)}
481494
>
482495
{this.renderItemContent(dir)}
483-
{this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
484-
<calcite-icon
485-
class={CSS.hoverHrefIcon}
486-
icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
487-
scale="s"
488-
/>
489-
) : null}
490496
</a>
491497
{this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}
492498
</div>

‎packages/calcite-components/src/components/menu/menu.stories.ts

Lines changed: 111 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,40 +11,82 @@ export default {
1111
...storyFilters(),
1212
};
1313

14-
export const simple = (): string => html` <calcite-menu
14+
export const simple = (): string => html`<calcite-menu
1515
layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
1616
>
1717
<calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
1818
<calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
1919
<calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
2020
</calcite-menu>`;
2121

22+
export const iconsAndBreadcrumb = (): string => html`<calcite-menu>
23+
<calcite-menu-item
24+
icon-start="layer"
25+
breadcrumb
26+
icon-end="layer"
27+
text="Example item 1"
28+
text-enabled
29+
></calcite-menu-item>
30+
<calcite-menu-item
31+
icon-start="layer"
32+
breadcrumb
33+
icon-end="layer"
34+
text="Example item 2"
35+
text-enabled
36+
></calcite-menu-item>
37+
<calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
38+
</calcite-menu>`;
39+
40+
export const iconsAndBreadcrumbVertical_TestOnly = (): string => html`<calcite-menu layout="vertical">
41+
<calcite-menu-item
42+
icon-start="layer"
43+
breadcrumb
44+
icon-end="layer"
45+
text="Example item 1"
46+
text-enabled
47+
></calcite-menu-item>
48+
<calcite-menu-item
49+
icon-start="layer"
50+
breadcrumb
51+
icon-end="layer"
52+
text="Example item 2"
53+
text-enabled
54+
></calcite-menu-item>
55+
<calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
56+
</calcite-menu>`;
57+
2258
export const withNesting = (): string => html`<calcite-panel>
2359
<calcite-menu layout="${select("layout", ["horizontal", "vertical"], "horizontal")}">
2460
<calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
2561
<calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
26-
<calcite-menu-item text="Example item 3" text-enabled>
27-
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
62+
<calcite-menu-item text="Example item 3" text-enabled open>
63+
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
2864
<calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
2965
<calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
3066
<calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled></calcite-menu-item>
3167
<calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
3268
</calcite-menu-item>
33-
<calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled> </calcite-menu-item>
69+
<calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
3470
</calcite-menu-item>
35-
<calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item> </calcite-menu
71+
<calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item></calcite-menu
3672
></calcite-panel>`;
3773

3874
export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
3975
<calcite-menu-item text="Item" href="#item" open>
40-
<calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
76+
<calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
77+
<calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
4178
</calcite-menu-item>
79+
<calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
80+
<calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
4281
</calcite-menu>`;
4382

44-
export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html` <calcite-menu layout="vertical">
83+
export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html`<calcite-menu layout="vertical">
4584
<calcite-menu-item text="Item" href="#item" open>
46-
<calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
85+
<calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
86+
<calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
4787
</calcite-menu-item>
88+
<calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
89+
<calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
4890
</calcite-menu>`;
4991

5092
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
5395
<calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
5496
</calcite-menu>`;
5597

98+
export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell-panel width-scale="l">
99+
<calcite-panel heading="Extreme nested vertical menu">
100+
<calcite-menu layout="vertical">
101+
<calcite-menu-item icon-start="layer" icon-end="layer" text="Home"></calcite-menu-item>
102+
<calcite-menu-item
103+
icon-start="layer"
104+
icon-end="layer"
105+
href="#"
106+
text="Example nested"
107+
icon-start="layer"
108+
breadcrumb
109+
>
110+
<calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
111+
</calcite-menu-item>
112+
<calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
113+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
114+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
115+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
116+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
117+
</calcite-menu-item>
118+
</calcite-menu-item>
119+
</calcite-menu-item>
120+
<calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" breadcrumb open>
121+
<calcite-menu-item slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
122+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
123+
</calcite-menu-item>
124+
<calcite-menu-item slot="submenu-item" text="Capabilities" open>
125+
<calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"></calcite-menu-item>
126+
<calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
127+
</calcite-menu-item>
128+
<calcite-menu-item slot="submenu-item" text="Something else"></calcite-menu-item>
129+
<calcite-menu-item slot="submenu-item" text="Another thing">
130+
<calcite-menu-item slot="submenu-item" text="Great examples">
131+
<calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb></calcite-menu-item>
132+
<calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
133+
<calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
134+
</calcite-menu-item>
135+
</calcite-menu-item>
136+
</calcite-menu-item>
137+
<calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
138+
<calcite-menu-item slot="submenu-item" text="Very nice example"></calcite-menu-item>
139+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Short one" open>
140+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Another thing" open>
141+
<calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" open>
142+
<calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
143+
<calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
144+
<calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
145+
</calcite-menu-item>
146+
</calcite-menu-item>
147+
</calcite-menu-item>
148+
</calcite-menu-item>
149+
<calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
150+
</calcite-menu-item>
151+
<calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
152+
<calcite-menu-item text="Reference" active></calcite-menu-item>
153+
<calcite-menu-item text="Reference"></calcite-menu-item>
154+
<calcite-menu-item text="Reference"></calcite-menu-item>
155+
</calcite-menu>
156+
</calcite-panel>
157+
</calcite-shell-panel>`;
158+
56159
export const verticalLayoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
57160
layout="vertical"
58161
dir="rtl"

0 commit comments

Comments
 (0)