feat(Timeline): add variant prop to Timeline.Badge

[hectahertz]

Closes github/primer#6465

Adds a variant prop to Timeline.Badge for built-in emphasis colors, replacing the className/sx workarounds people currently use for colored badges.

// before
<Timeline.Badge className={styles.mergedBadge}>
  <Octicon icon={GitMergeIcon} className={styles.mergedIcon} />
</Timeline.Badge>

// after
<Timeline.Badge variant="done">
  <Octicon icon={GitMergeIcon} />
</Timeline.Badge>

Available values: accent, success, attention, severe, danger, done, open, closed, sponsors. When set, the badge uses the corresponding emphasis background and switches the icon color to --fgColor-onEmphasis automatically.

Changelog

New

• Timeline.Badge variant prop

Rollout strategy

• Minor release

Testing & Reviewing

npm start and check the Badge Variants and Timeline Break stories to verify the colors and icon rendering.

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: f5d7c71

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.

[hectahertz]

cc @HiroAgustin, this addresses your requests for timeline icon color customization and one-end trimming from the thread. Would love your feedback!

[Copilot]

Pull request overview

Adds first-class styling and layout options to Timeline in @primer/react, improving ergonomics for common Timeline use cases without requiring custom CSS overrides.

Changes:

• Added Timeline.Badge variant prop for built-in emphasis color schemes.
• Extended Timeline clipSidebar to support one-sided clipping via 'start' | 'end' (while keeping true as “both ends”).
• Updated stories, docs metadata, unit tests, VRT coverage, and public type exports to reflect the new API.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/react/src/index.ts	Exports TimelineBadgeVariant from the package entrypoint.
packages/react/src/Timeline/index.ts	Re-exports TimelineBadgeVariant from the Timeline barrel.
packages/react/src/Timeline/tests/Timeline.test.tsx	Adds unit tests for `clipSidebar="start"
packages/react/src/Timeline/Timeline.tsx	Implements clipSidebar string values and introduces TimelineBadgeVariant + variant prop wiring.
packages/react/src/Timeline/Timeline.module.css	Adds CSS for one-sided clipping and badge variant styling via data-variant.
packages/react/src/Timeline/Timeline.features.stories.tsx	Adds stories for new clipSidebar modes and showcases badge variants; updates existing story to use variant="done".
packages/react/src/Timeline/Timeline.features.stories.module.css	Removes no-longer-needed workaround styles for the “done” badge background/icon color.
packages/react/src/Timeline/Timeline.docs.json	Documents the expanded clipSidebar type and the new Badge variant prop.
e2e/components/Timeline.test.ts	Adds VRT coverage for the new stories (clip start/end, badge variants).
.changeset/timeline-badge-variant-clip-sidebar.md	Declares a minor release for the new Timeline APIs.

[Copilot]

TimelineBadgeVariant includes a 'default' value, but Timeline.Badge treats 'default' the same as omitting variant (no data-variant is rendered). Consider clarifying this in the variant JSDoc (e.g., “defaults to 'default' / omit for default styling”) or, if 'default' shouldn’t be public API, remove it from the union and update docs/tests accordingly.

Suggested change

	/** The color variant of the badge */
	/**
	* The color variant of the badge.
	*
	* Defaults to the "default" styling. Omit this prop or set it to "default"
	* for the default appearance; other values render a variant-specific style.
	*/

[HiroAgustin]

Oh, FYI, my version of this Timeline edge clip was already merged #7662

I think those are the conflicting files?

[primer-integration]

⚠️ Hi from github/github-ui! The integration workflow could not find a canary version for the latest commit on this PR.

A successful canary CI run (i.e., a valid canary version published via the release.yml workflow) must exist for the latest commit before integration checks will succeed.

Note: Make sure the Canary Release label is applied to the PR — the release.yml workflow requires this label to publish a canary version.

Next steps:

1. Wait for the release.yml canary CI run to complete successfully for the latest commit on this PR.
2. Once a valid canary version exists, re-trigger the integration workflow by visiting the primer-react-pr-test workflow page, clicking Run workflow, and pasting this PR's URL.

For more details, see this workflow run.

[hectahertz]

Added this cause this one is super slow