Unify breadcrumbs

[tbenning]

What are you trying to accomplish?

Update hover styles on breadcrumb view component to be consistent with React implementation.

Closes this issue
https://github.com/github/primer/issues/3069

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• 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: bed0f0b

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

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

[langermank]

Niiiice

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

[jonrohan]

Screen.Recording.2024-02-27.at.10.00.38.AM.mov

Not sure if this was just me, but kinda weird? The cursor turns into a pointer on the edge of the item but back into an arrow. http://primer-view-components-preview-2642.eastus.azurecontainer.io/view-components/lookbook/inspect/primer/beta/breadcrumbs/playground

[tbenning]

Not sure if this was just me, but kinda weird? The cursor turns into a pointer on the edge of the item but back into an arrow.

@jonrohan I'm definitely getting this too :/. I'm not sure what's going on nor how to remediate this actually 🤔 I'm not sure if this has something to do with how we're overriding the default behavior on the Link component or not

[tbenning]

Feels like there are 3 paths:

• A) Figure out this weird browser rendering bug
• B) Keep cursor:pointer on current page items and update React to match — this is ok, but still feels a bit funny IMO. The W3 example does this, but i'm still not 100% convinced yet.
• C) Remove the <a> entirely and render it as text. The w3 guideline say this is ok I think but I sort of like how it announces the current item for screen reader users. Feels like a heavier lift as well.

Ideally go with A, but will settle for B.