Using Safe triangle to improve submenu navigation #3536

ddouglasz · 2024-05-23T06:17:38Z

Summary

Using the Safe triangle pattern to improve submenu navigation

Description

Improve the submenu navigation by adding a safe area for users to smoothly navigate diagonally between the main menu and the submenu items, without awkwardly going out of focus.

Background:
https://x.com/shadeed9/status/1745707615517032449?t=XnNt9gNwPHLyfrMfHEnFuA&s=03

Before:

After (The visible triangle is only for the demo. It is not included in the PR):

vercel · 2024-05-23T06:17:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mc-app-kit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 26, 2024 0:59am
merchant-center-application-kit-components-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 26, 2024 0:59am

changeset-bot · 2024-05-23T06:17:42Z

🦋 Changeset detected

Latest commit: ac8c35c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages

Name	Type
@commercetools-frontend/application-shell	Minor
@commercetools-frontend/cypress	Minor
@commercetools-applications/merchant-center-template-starter-typescript	Minor
@commercetools-applications/merchant-center-template-starter	Minor
@commercetools-applications/merchant-center-custom-view-template-starter-typescript	Minor
@commercetools-applications/merchant-center-custom-view-template-starter	Minor
@commercetools-local/playground	Minor
@commercetools-local/visual-testing-app	Minor
@commercetools-backend/eslint-config-node	Minor
@commercetools-backend/express	Minor
@commercetools-backend/loggers	Minor
@commercetools-frontend/actions-global	Minor
@commercetools-frontend/application-components	Minor
@commercetools-frontend/application-config	Minor
@commercetools-frontend/application-shell-connectors	Minor
@commercetools-frontend/assets	Minor
@commercetools-frontend/babel-preset-mc-app	Minor
@commercetools-frontend/browser-history	Minor
@commercetools-frontend/codemod	Minor
@commercetools-frontend/constants	Minor
@commercetools-frontend/create-mc-app	Minor
@commercetools-frontend/eslint-config-mc-app	Minor
@commercetools-frontend/i18n	Minor
@commercetools-frontend/jest-preset-mc-app	Minor
@commercetools-frontend/jest-stylelint-runner	Minor
@commercetools-frontend/l10n	Minor
@commercetools-frontend/mc-dev-authentication	Minor
@commercetools-frontend/mc-html-template	Minor
@commercetools-frontend/mc-scripts	Minor
@commercetools-frontend/notifications	Minor
@commercetools-frontend/permissions	Minor
@commercetools-frontend/react-notifications	Minor
@commercetools-frontend/sdk	Minor
@commercetools-frontend/sentry	Minor
@commercetools-frontend/url-utils	Minor
@commercetools-website/components-playground	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

kark · 2024-05-23T12:48:44Z

Thank you @ddouglasz for working on this ❤️
I've briefly checked it in the playground and for the most part it works fine, when the cursor motion is steady.
However, if I stop in the middle / change the pace of the movement, then the submenu hides.

I've noticed in the screencast from the description that the safe triangle only changes when cursor moves within the menu item boundaries. If it goes beyond the menu item, the triangle is set for good.

In case of the implementation the triangle shrinks whenever cursor moves towards the submenu, so maybe this makes the behaviour not consistent

ddouglasz · 2024-05-23T13:08:21Z

Thank you Kacper 🙏🏾
I will look into it and push a fix.

ddouglasz · 2024-06-06T07:36:14Z

I've noticed in the screencast from the description that the safe triangle only changes when cursor moves within the menu item boundaries. If it goes beyond the menu item, the triangle is set for good.

@kark thanks for your feedback again, after a couple of findings, I discovered a flaw with this implementation:
When a user begins to navigate diagonally and then stops halfway to move to the next item, vertically, they are blocked because the triangle is set for good until we close the submenu.

Perhaps the current implementation that allows the the safe-start point of the triangle to move is what I see is consistent with most implementations:
If the users delays in the diagonal navigation, then it closes the submenu and focuses on the next item the cursor is hovering on.

Would be nice to know what @FilPob also thinks about this 🙏🏾

kark · 2024-06-06T07:47:26Z

I've noticed in the screencast from the description that the safe triangle only changes when cursor moves within the menu item boundaries. If it goes beyond the menu item, the triangle is set for good.

@kark thanks for your feedback again, after a couple of findings, I discovered a flaw with this implementation: When a user begins to navigate diagonally and then stops halfway to move to the next item, vertically, they are blocked because the triangle is set for good until we close the submenu.

Thanks! Perhaps we should consider adding a timeout for the triangle, similar to what we can see in your MacOS screencast. 🤔

ddouglasz · 2024-06-06T15:52:12Z

I've noticed in the screencast from the description that the safe triangle only changes when cursor moves within the menu item boundaries. If it goes beyond the menu item, the triangle is set for good.

@kark thanks for your feedback again, after a couple of findings, I discovered a flaw with this implementation: When a user begins to navigate diagonally and then stops halfway to move to the next item, vertically, they are blocked because the triangle is set for good until we close the submenu.

Thanks! Perhaps we should consider adding a timeout for the triangle, similar to what we can see in your MacOS screencast. 🤔

Updated here: 25c5b47
Thank you.

gitstream-cm · 2024-06-17T07:31:12Z

This PR is missing a Jira ticket reference in the title or description.
Please add a Jira ticket reference to the title or description of this PR.

gitstream-cm · 2024-06-17T07:31:23Z

🥷 Code experts: emmenko

emmenko has most 🧠 knowledge in the files.

See details

packages/application-shell/src/components/navbar/menu-items.styles.ts

Knowledge based on git-blame:

packages/application-shell/src/components/navbar/menu-items.tsx

Knowledge based on git-blame:
emmenko: 58%

packages/application-shell/src/components/navbar/navbar.tsx

Knowledge based on git-blame:
emmenko: 1%

packages/application-shell/src/components/navbar/use-navbar-state-manager.ts

Knowledge based on git-blame:
emmenko: 63%

To learn more about /:\ gitStream - Visit our Docs

… subnavigation

misama-ct

Thanks for being persistent and making it work 👏 .
I have only some suggestions, nothing that would block approval.

packages/application-shell/src/components/navbar/menu-items.styles.ts

packages/application-shell/src/components/navbar/menu-items.tsx

kark

Thank you, Douglas! That's a great improvement 👏. I have to admit, I'm still trying to nail down where the mouse movement speed threshold is set so that the safe triangle is applied, but overall, this looks great!

packages/application-shell/src/components/navbar/navbar.tsx

packages/application-shell/src/components/navbar/menu-items.styles.ts

kark · 2024-08-26T10:11:14Z

packages/application-shell/src/components/navbar/menu-items.styles.ts

+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: calc(100% - 16px);


I wonder, where does this 16px subtraction come from?

This 16 px will always be the padding-left of the navbar area, also the start of the navbar item, whether expanded or collapsed. That is where we want our safe-area to end. So technically, our safe area width is the width of the navbar area, less of the padding left (which is 16px)

Thanks got it 👍 Could we also add a comment here explaining that we account for the scrollable menu's padding and use the spacing30 design token?

packages/application-shell/src/components/navbar/use-navbar-state-manager.ts

packages/application-shell/src/components/navbar/navbar.tsx

kark

🙌

kark · 2024-08-26T11:16:35Z

packages/application-shell/src/components/navbar/menu-items.styles.ts

+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: calc(100% - 16px);


Thanks got it 👍 Could we also add a comment here explaining that we account for the scrollable menu's padding and use the spacing30 design token?

kark · 2024-08-26T11:30:41Z

packages/application-shell/src/components/navbar/use-navbar-state-manager.ts

@@ -256,6 +266,18 @@ const useNavbarStateManager = (props: HookProps) => {
    [state.activeItemIndex]
  );

+  const handleMouseMove = useCallback(


nit: just noticed that we have two functions named handleMouseMove that do different things. Could we rename this one to be more descriptive?

updated here: ac8c35c

kark · 2024-08-26T11:34:45Z

packages/application-shell/src/components/navbar/navbar.tsx

+  const safeAreaWidth = submenuSafeAreaRefBoundingClientRect?.width || 0;
+  const safeAreaHeight = submenuSafeAreaRefBoundingClientRect?.height || 0;
+
+  const handleMouseMove = useCallback(


Actually, let's rename this one too. To e.g. calculateSafeAreaStartPositon

updated here: ac8c35c

Thank you 🙌🏽

ddouglasz requested a review from a team as a code owner May 23, 2024 06:17

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 6, 2024 06:54 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 6, 2024 06:55 View deployment

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 6, 2024 06:56 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 6, 2024 06:57 View deployment

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 6, 2024 15:51 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 6, 2024 15:52 View deployment

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 6, 2024 15:54 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 6, 2024 15:55 View deployment

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 6, 2024 16:07 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 6, 2024 16:08 View deployment

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 7, 2024 07:14 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 7, 2024 07:14 View deployment

ddouglasz removed the request for review from a team June 7, 2024 14:50

vercel bot had a problem deploying to Preview – mc-app-kit-playground June 17, 2024 07:29 Failure

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 17, 2024 07:30 View deployment

gitstream-cm bot added the missing-jira label Jun 17, 2024

vercel bot deployed to Preview – merchant-center-application-kit-components-playground June 17, 2024 07:35 View deployment

vercel bot deployed to Preview – mc-app-kit-playground June 17, 2024 07:35 View deployment

ddouglasz force-pushed the SHIELD-1090-main-nav-sub-nav-safe-triangle branch 2 times, most recently from 96b0a8e to dcc9928 Compare June 17, 2024 07:38

vercel bot deployed to Preview – mc-app-kit-playground August 21, 2024 07:25 View deployment

Ddouglasz added 10 commits August 21, 2024 15:52

feat(safe triangle): implement safe triangle pattern into the mainnav…

88524db

… subnavigation

feat(safe triangle): define cursor positions

7445f56

feat(safe triangle): track initial safe start

0dc8489

feat(safe triangle): remove event listener from rerender

282bd21

feat(safe triangle): delay safe triangle

f3e193a

feat(safe triangle): remove debug code

3e7f649

feat(safe triangle): improve changeset description

e9fea51

feat(safe triangle): clean up

5aa720b

feat(safe triangle): remove safe triangle delay

891cb63

feat(navbar): introduce animation delay

f05a8e3

ddouglasz force-pushed the SHIELD-1090-main-nav-sub-nav-safe-triangle branch from 0ed4d53 to f05a8e3 Compare August 21, 2024 13:55

vercel bot deployed to Preview – merchant-center-application-kit-components-playground August 21, 2024 13:57 View deployment

vercel bot deployed to Preview – mc-app-kit-playground August 21, 2024 13:57 View deployment

FilPob approved these changes Aug 21, 2024

View reviewed changes

misama-ct approved these changes Aug 22, 2024

View reviewed changes

feat(navbar): remove unused type casting

4055a9c

vercel bot deployed to Preview – merchant-center-application-kit-components-playground August 22, 2024 10:25 View deployment

vercel bot deployed to Preview – mc-app-kit-playground August 22, 2024 10:25 View deployment

kark reviewed Aug 26, 2024

View reviewed changes

feat(navbar): export type and reuse

b662e8f

vercel bot deployed to Preview – merchant-center-application-kit-components-playground August 26, 2024 11:04 View deployment

vercel bot deployed to Preview – mc-app-kit-playground August 26, 2024 11:05 View deployment

kark approved these changes Aug 26, 2024

View reviewed changes

feat(navbar): distinguish function names properly

ac8c35c

vercel bot deployed to Preview – merchant-center-application-kit-components-playground August 26, 2024 12:58 View deployment

vercel bot deployed to Preview – mc-app-kit-playground August 26, 2024 12:59 View deployment

ddouglasz merged commit a452e7e into main Aug 26, 2024
19 checks passed

ddouglasz deleted the SHIELD-1090-main-nav-sub-nav-safe-triangle branch August 26, 2024 13:38

ct-changesets bot mentioned this pull request Aug 26, 2024

Version Packages #3595

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Safe triangle to improve submenu navigation #3536

Using Safe triangle to improve submenu navigation #3536

ddouglasz commented May 23, 2024 •

edited

Loading

vercel bot commented May 23, 2024 •

edited

Loading

changeset-bot bot commented May 23, 2024 •

edited

Loading

kark commented May 23, 2024 •

edited

Loading

ddouglasz commented May 23, 2024

ddouglasz commented Jun 6, 2024 •

edited

Loading

kark commented Jun 6, 2024

ddouglasz commented Jun 6, 2024 •

edited

Loading

gitstream-cm bot commented Jun 17, 2024

gitstream-cm bot commented Jun 17, 2024

misama-ct left a comment

kark left a comment •

edited

Loading

kark Aug 26, 2024 •

edited

Loading

ddouglasz Aug 26, 2024 •

edited

Loading

kark Aug 26, 2024

kark left a comment

kark Aug 26, 2024

kark Aug 26, 2024

ddouglasz Aug 26, 2024

kark Aug 26, 2024

ddouglasz Aug 26, 2024

Using Safe triangle to improve submenu navigation #3536

Using Safe triangle to improve submenu navigation #3536

Conversation

ddouglasz commented May 23, 2024 • edited Loading

Summary

Description

vercel bot commented May 23, 2024 • edited Loading

changeset-bot bot commented May 23, 2024 • edited Loading

🦋 Changeset detected

kark commented May 23, 2024 • edited Loading

ddouglasz commented May 23, 2024

ddouglasz commented Jun 6, 2024 • edited Loading

kark commented Jun 6, 2024

ddouglasz commented Jun 6, 2024 • edited Loading

gitstream-cm bot commented Jun 17, 2024

gitstream-cm bot commented Jun 17, 2024

misama-ct left a comment

Choose a reason for hiding this comment

kark left a comment • edited Loading

Choose a reason for hiding this comment

kark Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

ddouglasz Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

kark Aug 26, 2024

Choose a reason for hiding this comment

kark left a comment

Choose a reason for hiding this comment

kark Aug 26, 2024

Choose a reason for hiding this comment

kark Aug 26, 2024

Choose a reason for hiding this comment

ddouglasz Aug 26, 2024

Choose a reason for hiding this comment

kark Aug 26, 2024

Choose a reason for hiding this comment

ddouglasz Aug 26, 2024

Choose a reason for hiding this comment

ddouglasz commented May 23, 2024 •

edited

Loading

vercel bot commented May 23, 2024 •

edited

Loading

changeset-bot bot commented May 23, 2024 •

edited

Loading

kark commented May 23, 2024 •

edited

Loading

ddouglasz commented Jun 6, 2024 •

edited

Loading

ddouglasz commented Jun 6, 2024 •

edited

Loading

kark left a comment •

edited

Loading

kark Aug 26, 2024 •

edited

Loading

ddouglasz Aug 26, 2024 •

edited

Loading