UnderlineNav with updated design for states and counter

[broccolinisoup]

Closes#1240

UnderlineNav has updated design and this PR is for the updated states (default, selected, hover and focus state) as well as adding counter as a prop.

Screenshots

Screen Recording

UnderlineNav.focus._.hover._.selected.states.mp4

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: 0699ae0

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	76.29 KB (0%)
dist/browser.umd.js	76.9 KB (0%)

[pksjce]

This would be a breaking change wrt to the old UnderlineNav. We will need to mention it in the changelog.

[pksjce]

The focus rings work so well! 💯

I can see two things out of place.

1. The underline from the nav seems to have gone away.
2. The selected underline seems a bit longer on both sides compared to the Item.

Also I'm sceptical about the name change from UnderlineNav.Link to UnderlineNav.Item. It would break existing API. Though, I agree its a change that makes full sense. Not sure how to proceed with it honestly.

[broccolinisoup]

Thanks for the review @pksjce !

The underline from the nav seems to have gone away.

I used the states reference from Figma and there is no underline there so I though this line must have been removed with the updated design but for all the other references in Figma, the line is there! I added it back ✨ Sorry for the confusion!

The selected underline seems a bit longer on both sides compared to the Item.

Yes, you are right! I might have missed that. I also realised there was way too much margin between the li items. So all together, I re-styled them and this is for the reference to compare before and after. (I updated the PR description as well with the new screenshots)

Before

After

And the design

Also I'm sceptical about the name change from UnderlineNav.Link to UnderlineNav.Item. It would break existing API. Though, I agree its a change that makes full sense. Not sure how to proceed with it honestly.

Yeah I agree. It makes sense to me too and I see other "new" components such as ActionList uses Item too so it is good to be consistent. I guess we can discuss with others as well and find the best strategy to move forward with the major release.

[danielguillan]

Sorry for the confusion about the removal of the underline.

I initially intentionally removed it so that with the removal of actions, consumers could still easily build a custom UnderlineNav + actions horizontal layout and only deal with the bottom border on the parent container. I also did so to support the use case in the code clone dropdown where we don't use a border at all.

But now that we have a clearer idea of what needs to be supported (and not) and how we'll move forward in the mid-long term, we should bring the underline back.

[danielguillan]

I think the name change from UnderlineNav.Link to UnderlineNav.Item makes sense. Please feel free to point anyone interested in this discussion to the design API proposal: https://github.com/github/primer/pull/1239

[broccolinisoup]

to fix extra margin around the button on safari

[pksjce]

wow, can you add a comment here about this?

[pksjce]

@danielguillan - Wondering if we are going to support loading state for counters.

[broccolinisoup]

Just making a comment here for the types. I added the counter prop with only number type just to make the Counter component redundant. We can add another type for the loading state if we are going to support 😊

[danielguillan]

Yes, we are going to support loading states. We can add support incrementally in another PR if that makes things easier.

[pksjce]

I don't think this should be a major change yet. We'll kind of block ourselves doing that. Once we make all the changes, we can graduate from drafts to main folder with a major change. Could you do that before merging?