feat(menu, menu-item): Adds menu & menu-item components.

[anveshmekala]

Related Issue: #6531

Summary

This PR adds calcite-menu & calcite-menu-item components.

Co-authored by @macandcheese
Extracted from #6829

calcite-nav-menu

Usage

Basic

<calcite-menu> <calcite-menu-item id="Nature" text="Nature"> </calcite-menu-item></calcite-menu>

Properties

Property	Attribute	Description	Type	Default
label (required)	label	Specifies accessible label for the component.	string	undefined
layout	layout	Specifies the layout of the component.	"horizontal" | "vertical"	"horizontal"
messageOverrides	--	Use this property to override individual strings used by the component.	{ more?: string; }	undefined

#Methods

setFocus() => Promise<void>

Sets focus on the component's first focusable element.

Returns

Type: Promise<void>

---

calcite-nav-menu-item

Usage

Basic

<calcite-menu> <calcite-menu-item id="Nature" text="Nature"> </calcite-menu-item></calcite-menu>

Nested-With-Href

Nested SubMenu with href.

<calcite-menu>
  <calcite-menu-item id="Nature" text="Nature" href="#">
    <calcite-menu-item id="Mountains" text="Mountains" slot="sub-menu-item"> </calcite-menu-item>
  </calcite-menu-item>
</calcite-menu>

Properties

Property	Attribute	Description	Type	Default
active	active	When true, the component is highlighted.	boolean	undefined
breadcrumb	breadcrumb	When true, the component displays a visual indication of breadcrumb	boolean	undefined
href	href	Specifies the URL destination of the component, which can be set as an absolute or relative path.	string	undefined
iconEnd	icon-end	Specifies an icon to display at the end of the component.	string	undefined
iconFlipRtl	icon-flip-rtl	Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl").	"both" | "end" | "start"	undefined
iconStart	icon-start	Specifies an icon to display at the start of the component.	string	undefined
label (required)	label	Specifices accessible name for the component.	string	undefined
open	open	When true, the menu item will display any slotted calcite-menu-item in an open overflow menu	boolean	false
rel	rel	Defines the relationship between the href value and the current document.	string	undefined
target	target	Specifies where to open the linked document defined in the href property.	string	undefined
text	text	Specifies the text to display.	string	undefined

Events

Event	Description	Type
calciteMenuItemSelect	Emits when user selects the component.	CustomEvent<void>

Methods

setFocus() => Promise<void>

Sets focus on the component.

Returns

Type: Promise<void>

---

Built with StencilJS

[driskull]

👍

[driskull]

This label string still needs to be translated.

[anveshmekala]

This label string still needs to be translated

Submitted the request for translations yesterday and also added the base translations strings in #6938 . Once the generate build is back we can add the t9n interface.

[jcfranco]

This is looking great, @anveshmekala @macandcheese! 🧑‍🍳

Only the prop reflection consistency and delegatesFocus concerns need to be addressed before merging. The rest can be tackled in follow-up PRs.

[jcfranco]

This is being caused by the click-handling element (anchor) not stretching along with its host and therefore not being in the center when the click happens (E2EElement.click() scrolls and clicks on the center of the element). If you set inline-size: 100% on the anchor, it fixes the test, but not sure if that will cause layout issues (design-wise).

[anveshmekala]

makes sense. we can mark inline-size:100% for anchor element and the design will be similar.

[jcfranco]

This is looking great, @anveshmekala @macandcheese! 🧑‍🍳

Only the prop reflection consistency and delegatesFocus concerns need to be addressed before merging. The rest can be tackled in follow-up PRs.