Navigation Component #6531

yelenakreyndel · 2023-02-27T18:09:16Z

Description

Implement Navigation component per design prototype: http://calcite-dev.esri.com:3001/demos/nav.html and spec: https://www.figma.com/file/6GrtrMONiH13kk9DeJtIMd/Design-Specs?node-id=157%3A2032&t=nLLbnXFvznVkZnqR-1

User Stories

High priority for March

Acceptance Criteria

Design specifications and interaction behavior demonstrated in a prototype are followed

Relevant Info

For questions about Navigation component interaction behavior, contact @macandcheese. For Figma spec questions, please contact @ashetland.

Helpful Details

No response

Esri team

Calcite (dev)

github-actions · 2023-02-27T18:09:43Z

cc @ashetland, @yelenakreyndel, @SkyeSeitz

yelenakreyndel · 2023-02-27T18:11:39Z

New issue is created and assigned to @anveshmekala. Cc'ing @jcfranco, @geospatialem, @macandcheese

anveshmekala · 2023-02-28T21:52:33Z

the Figma link attached in the issue is broken. @yelenakreyndel can you update it, Thanks.

yelenakreyndel · 2023-03-01T16:53:39Z

@anveshmekala I invited you to the file. Try accessing from email link if this one doesn't work: https://www.figma.com/file/6GrtrMONiH13kk9DeJtIMd/Design-Specs?node-id=157%3A2032&t=nLLbnXFvznVkZnqR-1 (I updated the url in the description as well).

geospatialem · 2023-03-27T22:19:21Z

Reallocated to the April milestone.

**Related Issue:** #6531 ## Summary Refactors keyboard navigation and cleanup

…cal layout (#6827) **Related Issue:** #6531 ## Summary Add's e2e test for keyboard support in menu for both horizontal and vertical layout

geospatialem · 2023-04-24T22:07:40Z

Migrating to the May milestone for additional testing.

**Related Issue:** #6531 ## Summary This will add base message bundles to enable translations build process.

@macandcheese

**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 ```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  ### 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>

@macandcheese

…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  ### 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  ### 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  ### 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>

github-actions · 2023-05-22T19:09:28Z

Installed and assigned for verification.

geospatialem · 2023-05-22T19:27:37Z

Verified on master with nav-logo, nav-user, menu and menu-item.

cc @ashetland @SkyeSeitz for Figma changes.

yelenakreyndel added new component Issues tied to a new component. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Feb 27, 2023

yelenakreyndel added this to the 2023 March Priorities - No breaking changes milestone Feb 27, 2023

github-actions bot added the Calcite (dev) Issues logged by Calcite developers. label Feb 27, 2023

yelenakreyndel assigned anveshmekala Feb 27, 2023

yelenakreyndel added p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed needs triage Planning workflow - pending design/dev review. Calcite (dev) Issues logged by Calcite developers. labels Feb 27, 2023

brittneytewks added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Feb 27, 2023

alisonailea added the airtable label Feb 27, 2023

github-actions bot added the Calcite (dev) Issues logged by Calcite developers. label Mar 1, 2023

alisonailea changed the title ~~Navigation Component~~ Navigation Component Mar 1, 2023

alisonailea removed the airtable label Mar 1, 2023

brittneytewks added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Mar 15, 2023

geospatialem added the milestone adjusted label Mar 27, 2023

geospatialem modified the milestones: 2023 March Priorities - No breaking changes , 2023 April Priorities - No breaking changes Mar 27, 2023

anveshmekala mentioned this issue Apr 3, 2023

feat(nav): navigation component #6583

Merged

This was referenced Apr 20, 2023

feat(navigation): remove prefix nav for menu and menu-item #6774

Merged

refactor(menu-item,menu): keyboard interaction #6819

Merged

anveshmekala added a commit that referenced this issue Apr 20, 2023

refactor(menu-item,menu): keyboard interaction (#6819)

0c81cc9

**Related Issue:** #6531 ## Summary Refactors keyboard navigation and cleanup

anveshmekala mentioned this issue Apr 21, 2023

test(menu): add e2e tests for keyboard support for horizontal & vertical layout #6827

Merged

macandcheese pushed a commit that referenced this issue Apr 21, 2023

test(menu): add e2e tests for keyboard support for horizontal & verti…

6daadc7

…cal layout (#6827) **Related Issue:** #6531 ## Summary Add's e2e test for keyboard support in menu for both horizontal and vertical layout

macandcheese mentioned this issue Apr 22, 2023

feat(nav, menu): Add Nav, Nav Logo, Nav User, Menu, Menu Item components #6829

Closed

geospatialem modified the milestones: 2023 April Priorities - No breaking changes , 2023 May Priorities Apr 24, 2023

This was referenced Apr 27, 2023

feat(navigation, navigation-logo, navigation-user): Add navigation, navigation-logo & navigation-user components. #6873

Merged

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

Merged

geospatialem added figma changes Issues that require additions or updates to the Figma UI Kit ready for dev Issues ready for development implementation. labels May 5, 2023

anveshmekala mentioned this issue May 8, 2023

chore(menu-item): adds base message bundles. #6938

Merged

anveshmekala added a commit that referenced this issue May 8, 2023

chore(menu-item): adds base message bundles. (#6938)

305f4c5

**Related Issue:** #6531 ## Summary This will add base message bundles to enable translations build process.

anveshmekala added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels May 22, 2023

github-actions bot assigned geospatialem, ashetland, yelenakreyndel and SkyeSeitz and unassigned anveshmekala May 22, 2023

geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels May 22, 2023

geospatialem closed this as completed May 22, 2023

SkyeSeitz removed the figma changes Issues that require additions or updates to the Figma UI Kit label Oct 27, 2023

brittneytewks added the design Issues that need design consultation prior to development. label Dec 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigation Component #6531

Navigation Component #6531

yelenakreyndel commented Feb 27, 2023 •

edited by alisonailea

github-actions bot commented Feb 27, 2023

yelenakreyndel commented Feb 27, 2023

anveshmekala commented Feb 28, 2023

yelenakreyndel commented Mar 1, 2023

geospatialem commented Mar 27, 2023

geospatialem commented Apr 24, 2023

github-actions bot commented May 22, 2023

geospatialem commented May 22, 2023

Navigation Component #6531

Navigation Component #6531

Comments

yelenakreyndel commented Feb 27, 2023 • edited by alisonailea

Description

User Stories

Acceptance Criteria

Relevant Info

Helpful Details

Esri team

github-actions bot commented Feb 27, 2023

yelenakreyndel commented Feb 27, 2023

anveshmekala commented Feb 28, 2023

yelenakreyndel commented Mar 1, 2023

geospatialem commented Mar 27, 2023

geospatialem commented Apr 24, 2023

github-actions bot commented May 22, 2023

geospatialem commented May 22, 2023

yelenakreyndel commented Feb 27, 2023 •

edited by alisonailea