feat(nav, menu): Add Nav, Nav Logo, Nav User, Menu, Menu Item components #6829
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
enhancement
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
…6855) **Related Issue:** # ## Summary - Adds selectEvent in menu-item, nav-logo, nav-user - Renames textEnabled to hideText in nav-user. Text will be displayed by default in nav-user component. - Added E2E tests for Events - refactor
|
Closing in favor of #6873 and other upcoming PR. |
anveshmekala
added a commit
that referenced
this pull request
May 12, 2023
**Related Issue:** #6531 ## Summary This PR adds `calcite-menu` & `calcite-menu-item` components. Co-authored by @macandcheese Extracted from #6829 ## calcite-nav-menu <!-- Auto Generated Below --> ### Usage #### Basic ```html <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 <!-- Auto Generated Below --> ### Usage #### Basic ```html <calcite-menu> <calcite-menu-item id="Nature" text="Nature"> </calcite-menu-item></calcite-menu> ``` #### Nested-With-Href Nested SubMenu with href. ```html <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](https://stenciljs.com/)* --------- Co-authored-by: Adam <adam@tirel.la>
anveshmekala
added a commit
that referenced
this pull request
May 22, 2023
…avigation-logo & navigation-user components. (#6873) **Related Issue:** #6531 ## Summary This PR adds the following components: - calcite-navigation - calcite-navigation-user - calcite-navigation-logo Co-authored by @macandcheese Extracted from #6829 ## calcite-navigation <!-- Auto Generated Below --> ### Usage #### Basic ```html <calcite-shell> <calcite-navigation slot="header"> <calcite-chip-group slot="content-center"> <calcite-chip>nav item 1</calcite-chip> <calcite-chip>nav item 2</calcite-chip> <calcite-chip>nav item 3</calcite-chip> </calcite-chip-group> </calcite-navigation> </calcite-shell> ``` ### Properties | Property | Attribute | Description | Type | Default | | -------------------- | ------------------- | -------------------------------------------------------------------------------------------------------- | --------- | ----------- | | `label` _(required)_ | `label` | When `navigationAction` is `true`, specifies the label of the `calcite-action`. | `string` | `undefined` | | `navigationAction` | `navigation-action` | When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change. | `boolean` | `false` | ### Events | Event | Description | Type | | ------------------------------- | ----------------------------------------------------------------------------------- | ------------------- | | `calciteNavigationActionSelect` | When `navigationAction` is true, emits when the displayed action selection changes. | `CustomEvent<void>` | ### Methods #### `setFocus() => Promise<void>` When `navigation-action` is `true`, sets focus on the component's action element. ##### Returns Type: `Promise<void>` ### CSS Custom Properties | Name | Description | | ----------------------------------- | ---------------------------------------------------- | | `--calcite-navigation-background` | Specifies the background color of the component. | | `--calcite-navigation-border-color` | Specifies the border color of the component. | | `--calcite-navigation-width` | Specifies the width of the component's content area. | ### Dependencies #### Depends on - [calcite-action](../action) ---------------------------------------------- ## calcite-navigation-logo <!-- Auto Generated Below --> ### Usage #### Basic ```html <calcite-navigation-logo active thumbnail="./_assets/images/esri-logo.svg"></calcite-navigation-user> ``` ### Properties | Property | Attribute | Description | Type | Default | | ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | | `active` | `active` | When true, the component is highlighted. | `boolean` | `undefined` | | `description` | `description` | A description for the component, which displays below the `heading`. | `string` | `undefined` | | `heading` | `heading` | Specifies heading text for the component, such as a product or organization name. | `string` | `undefined` | | `href` | `href` | Specifies the URL destination of the component, which can be set as an absolute or relative path. | `string` | `undefined` | | `label` | `label` | Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | | `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` | | `thumbnail` | `thumbnail` | Specifies the `src` to an image. | `string` | `undefined` | ### Methods #### `setFocus() => Promise<void>` Sets focus on the component. ##### Returns Type: `Promise<void>` ---------------------------------------------- ## calcite-navigation-user <!-- Auto Generated Below --> ### Usage #### Basic ```html <calcite-navigation-user full-name="Jhon Doe" user-id="Jhon123" active></calcite-navigation-user> ``` ### Properties | Property | Attribute | Description | Type | Default | | -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- | | `active` | `active` | When true, the component is highlighted. | `boolean` | `undefined` | | `fullName` | `full-name` | Specifies the full name of the user. | `string` | `undefined` | | `label` | `label` | Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. | `string` | `undefined` | | `textDisabled` | `text-disabled` | When `true`, hides the `fullName` and `username` contents. | `boolean` | `false` | | `thumbnail` | `thumbnail` | Specifies the`src` to an image (remember to add a token if the user is private). | `string` | `undefined` | | `userId` | `user-id` | Specifies the unique id of the user. | `string` | `undefined` | | `username` | `username` | Specifies the username of the user. | `string` | `undefined` | ### Methods #### `setFocus() => Promise<void>` Sets focus on the component. ##### Returns Type: `Promise<void>` ### Dependencies #### Depends on - [calcite-avatar](../avatar) --------- Co-authored-by: Adam <adam@tirel.la> Co-authored-by: Adam Tirella <macandcheese@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue: #6531
Summary
Adds initial implementation of these features. Future enhancements and items pushed from this MVP release can be found here: #6606