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 11 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
23 changes: 19 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,32 @@
@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;
}

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

:host([layout="vertical"]) .icon--breadcrumb {
@apply ms-2;
}

:host([breadcrumb]) .content {
@apply pe-3;
}
Expand Down Expand Up @@ -151,7 +166,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 +178,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
4 changes: 2 additions & 2 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 @@ -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.dropdownAction}
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
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
63 changes: 62 additions & 1 deletion 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 @@ -53,7 +53,68 @@ 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 verticalLyoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shell-panel width-scale="l">
Copy link
Member

Choose a reason for hiding this comment

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

Nitpick: extra space before the HTML.

<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>
Copy link
Member

Choose a reason for hiding this comment

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

Nitpick: empty tags should avoid whitespace.

<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 slot="submenu-item" text="Short one">
<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"> </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"
class="calcite-mode-dark"
Expand Down
28 changes: 18 additions & 10 deletions packages/calcite-components/src/demos/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,29 +331,37 @@ <h3>
<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">
<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">
<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">
<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>
<calcite-menu-item slot="submenu-item" text="Great examples"> </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"> </calcite-menu-item>
<calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
<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>
Expand Down