Add Timeline.Actions sub-component

[janmaarten-a11y]

Closes github/primer#6678

Timeline event rows frequently render content floated to the right of the event summary: revert buttons after a merge, view-details toggles on Merge Queue, commit SHA links with verification badges and CI state icons, cross-reference state labels with optional lock icons for private references, and so on. Today there is no built-in slot for any of that — anything floated right has to be crammed inside Timeline.Body with story-local CSS, which is exactly the kind of one-off hack that compounds into tech debt across consumers.

This PR adds Timeline.Actions, a sibling sub-component of Timeline.Body that takes any React children and lays them out as a horizontal flex row on the right edge of the surrounding Timeline.Item. It works for every right-side pattern we've inventoried so far: a single button, two buttons, a commit row with multiple inline elements (icon + SHA link + verified label), and a cross-reference row (lock icon + reference link + state label).

This is the second of two Phase 1 follow-ups (paired with Timeline.Avatar in #7885). Both ship as standalone APIs; migrating the in-flight Custom Event playground (#7836) to use them is a follow-up once that PR lands on main.

Changelog

New

• Timeline.Actions sub-component: a children-based slot that lays out arbitrary children (buttons, links, badges, icons, plain text) as a horizontal flex row pushed to the right edge of a Timeline.Item.
• New TimelineActionsProps type exported from @primer/react.
• New feature story: Timeline/Features → WithActions, demonstrating common right-side action patterns across five realistic timeline items.

Changed

• None.

Removed

• None.

Design notes

• API shape — children-based. Matches the Timeline.Avatar precedent and the issue's preferred option. Consumers compose freely (<Button>, <ButtonGroup>, <Link>, <Label>, <Octicon>, plain text), and Timeline.Actions just handles the row layout.
• Layout — flex sibling, not absolute. Unlike Timeline.Avatar (which is absolutely positioned in the gutter outside the item), Timeline.Actions is a flex item inside the item, pushed right with margin-left: auto. This keeps Timeline.Body shrinkable: when content is long, Body wraps first (flex-shrink: 0 on Actions) and the layout degrades gracefully.
• Vertical centering.min-height: var(--base-size-32) matches the badge wrapper height (which is 32px in both default and condensed item modes thanks to the existing condensed margin rules). Combined with align-items: center and align-self: flex-start, contents vertically center against the badge in both geometries — no condensed override needed.
• Default gap.gap: var(--base-size-8) is set on the Actions row so multi-child layouts (button + button, icon + SHA + label, etc.) get GitHub's standard 8px spacing out of the box without consumer styling. Single-child layouts are unaffected.

Known limitation / future work

• Responsive wrap behavior on narrow viewports. When both Body and Actions have substantial content and the Timeline container is narrow, Body text wraps aggressively while Actions keeps the right edge. Resolving this is intentionally out of scope here and tracked separately in github/primer#6693 (Phase 4) so it can be resolved with design input.
• Custom gap. A gap prop or CSS custom property could be added if non-default spacing becomes a recurring need.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Open Timeline/Features → WithActions in Storybook. The story renders five timeline items inside a 1012px max-width wrapper (matching GitHub's product width). All links use preventDefault so clicking them won't navigate.

Verify each item:

1. Merge-queue — "merged via the queue into main…" with a checks-passed subline. Two buttons on the right: View details + Revert. Uses BranchName for the branch chip and a 12px monospace semibold SHA.
2. Force-push — "force-pushed the main branch from … to …" with a timestamp. Single Compare button on the right. Uses RepoPushIcon for the badge.
3. Verified commit (condensed) — commit message link on the left. On the right: "Verified" label (muted border, green text), green check icon, 12px monospace underlined SHA link.
4. Unverified commit (condensed) — same layout as above but with "Unverified" label, red X icon.
5. Cross-reference — 20px inline avatar + "Monalisa mentioned this pull request just now". Below: issue title (16px semibold) + PR number (muted, underlined) as a single link, with a "17 tasks" sub-line. Lock icon + StateLabel ("Open", medium, pullOpened) are vertically centered in the card row — these are intentionally in the body content, not in Timeline.Actions, because that's how GitHub renders cross-references.

• Resize the viewport and confirm Body wraps before Actions is squeezed.
• Unit tests cover className propagation, child rendering, and prop forwarding.

Note for reviewers

This PR is built on main. Because it touches several of the same files as the in-flight Timeline.Avatar PR (#7885), the second of the two to land will need a rebase — straightforward 3-way merges on the Object.assign(Timeline, …) block, the type export list, the subcomponents block in the stories metas, the __tests__/Timeline.test.tsx describe blocks, and the Timeline.docs.json subcomponent list. No semantic conflict.

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
• (GitHub staff only) Integration tests pass at github/github-ui

[changeset-bot]

🦋 Changeset detected

Latest commit: 2651fe8

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]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.