Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 19 commits into from
Jul 28, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
5c91981
feat(menu-item): Update spacing and icon layout
macandcheese Jul 26, 2023
833ecbf
Clean up
macandcheese Jul 26, 2023
6aae9a7
Merge branch 'main' into macandcheese/7105-menu-item-styling
macandcheese Jul 26, 2023
0510cb1
Clean up
macandcheese Jul 26, 2023
e3546f3
Add story for complex vertical menu
macandcheese Jul 26, 2023
dcfc5c9
Clean up
macandcheese Jul 26, 2023
8cdb087
Clean up style, update demo and test
macandcheese Jul 26, 2023
0c5af94
Clean up
macandcheese Jul 26, 2023
2896fee
Clean up
macandcheese Jul 26, 2023
c7f90dd
Clean up story
macandcheese Jul 26, 2023
1ac2d4c
Clean up story
macandcheese Jul 27, 2023
99bf067
Update styles and stories
macandcheese Jul 27, 2023
d9f9438
Clean up style + demo
macandcheese Jul 27, 2023
e458e34
Pr feedback
macandcheese Jul 27, 2023
58e113b
Merge branch 'main' into macandcheese/7105-menu-item-styling
macandcheese Jul 27, 2023
03c7368
Clean up
macandcheese Jul 27, 2023
8ea3c82
Update stories
macandcheese Jul 27, 2023
be9330d
Pr feedback
macandcheese Jul 27, 2023
dc18164
Merge branch 'main' into macandcheese/7105-menu-item-styling
macandcheese Jul 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions packages/calcite-components/src/components/menu-item/menu-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@
--calcite-ui-icon-color: var(--calcite-ui-brand);
}
}
:host([layout="vertical"]) .content {
@apply px-3;
}

.icon--start {
@apply me-3;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}

Expand Down
18 changes: 9 additions & 9 deletions packages/calcite-components/src/components/menu-item/menu-item.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", "")}"
Expand All @@ -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", "")}"
Expand All @@ -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", "")}"
Expand All @@ -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", "")}"
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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"
/>`;
20 changes: 13 additions & 7 deletions packages/calcite-components/src/components/menu-item/menu-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the icon scale need to adjust based on the menu item's scale?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Menu / Menu Item don't currently have scale, but when added down the road this would change.

/>
);
}

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}
Expand Down Expand Up @@ -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>
Expand Down
119 changes: 111 additions & 8 deletions packages/calcite-components/src/components/menu/menu.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand Down
Loading