[UnderlineNav] : Keep selected item always visible

[broccolinisoup]

Closes #1296

Storybook link: https://primer-1475f2ddc1-13348165.drafts.github.io/storybook/?path=/story/components-underlinenav

This PR is for keeping UnderlineNav's selected link always visible. This means;

• If an item selected and the window is resized or a when a page is loaded and the selected item stays out of the viewport, component always make sure to keep this item on the list and not be pulled in to the dropdown menu. It does it by interrupting the natural order of the list and appending this selected item to the list as the last item.
• If an item from the dropdown menu is selected, component moves this item out of the menu, appends it to the list and pulls as many item as required into the menu to make room for the selected item. (Natural order is interrupted here as well)

Screen Recordings

Screen.Recording.2022-09-30.at.10.44.04.pm.mov

Please provide before/after screenshots for any visual changes

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 043dbe3

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	77.19 KB (+0.01% 🔺)
dist/browser.umd.js	77.81 KB (+0.01% 🔺)

[broccolinisoup]

Hi @danielguillan 👋🏼 Keeping the selected item visible is ready for you to review 😊 This PR includes both overflow behaviour as well as the loading counter states. Feel free to review and test them as well here.
Please see the storybook link here and on the description as well and I'll update the docs next week 📝 Looking forward to hearing your thought!

[siddharthkp]

yay ssr friendly hack 👍

[danielguillan]

This looks great!

My only feedback is that we should persist the item order when selecting visible items. That is, when we swap a selected item to make it visible and the user then selects an already visible item, we should keep the current (updated) item order instead of restoring the original one. This is to prevent the visual change that happens away from the user's cursor which can be confusing.

Always.visible.item.swap.mp4

In the recording above, when we click "Actions", the "Insights" item shouldn't be swapped back with "Projects". "Insights" should still be the last item. Same for when we click "Pull requests", the "Settings" item shouldn't be swapped back with "Projects".

[broccolinisoup]

This looks great!

My only feedback is that we should persist the item order when selecting visible items. That is, when we swap a selected item to make it visible and the user then selects an already visible item, we should keep the current (updated) item order instead of restoring the original one. This is to prevent the visual change that happens away from the user's cursor which can be confusing.

Always.visible.item.swap.mp4
In the recording above, when we click "Actions", the "Insights" item shouldn't be swapped back with "Projects". "Insights" should still be the last item. Same for when we click "Pull requests", the "Settings" item shouldn't be swapped back with "Projects".

👋🏼 @danielguillan Thanks so much for your review! No worries, I wasn't sure about that ordering behaviour and it makes sense to reduce the layout shifts. I'll revert it now

[pksjce]

Lets go!