Add BranchName WithTrailingAction story

[siddharthkp]

• part 1 of 2 of github/primer#6684
• My goal with this PR is to first implement it as a story and then in another PR "upstream" it into the component

Overview

Adds a feature story demonstrating the trailing action pattern (copy button) for BranchName. This story serves as a reference for the implementation work to upstream this pattern from github-ui's PullRequestBranchName.

The story demonstrates:

• Copy button with divider line
• Hover/focus states
• Copied state feedback (icon change + tooltip)
• Accessible announcements via VisuallyHidden + Announce

Changelog

New

• WithTrailingAction story in BranchName features

Changed

None

Removed

None

Rollout strategy

• None; story-only change, no component changes yet

Testing & Reviewing

View the story in Storybook: Components > BranchName > Features > With Trailing Action

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

[changeset-bot]

⚠️ No Changeset found

Latest commit: fd4ede3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[joshblack]

Just had one comment for the live region announcements but wanted to approve in advance so you didn't have to wait another day lol

[joshblack]

The announcement might be better suited in handleCopy with announce straight from @primer/live-region-element instead of rendering it, in particular if the announcement is hidden. e.g.

import { announce } from '@primer/live-region-element'

 const handleCopy = () => {
    setCopied(true)
    void navigator.clipboard.writeText(branchName)
    announce('Copied!');
    setTimeout(() => setCopied(false), 2000)
  }