feat(Timeline): add badge variant prop and one-end clipSidebar

[hectahertz]

Closes github/primer#6465

Two features for Timeline:

1. Badge color variants (Timeline.Badge variant prop)

Adds a variant prop to Timeline.Badge for built-in color schemes, replacing the need for custom classNames or the deprecated sx prop to colorize timeline icons.

// Before: custom className workaround
<Timeline.Badge className={styles.BadgeWithDoneBackground}>
  <Octicon icon={GitMergeIcon} className={styles.GitMergeIcon} />
</Timeline.Badge>

// After: first-class variant prop
<Timeline.Badge variant="done">
  <Octicon icon={GitMergeIcon} />
</Timeline.Badge>

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

2. One-end sidebar clipping (clipSidebar prop extension)

Extends clipSidebar to accept 'start' or 'end' in addition to true (which still clips both ends, preserving backward compatibility).

<Timeline clipSidebar="start">  {/* clips only the top */}
<Timeline clipSidebar="end">    {/* clips only the bottom */}
<Timeline clipSidebar>          {/* clips both, same as before */}

Changelog

New

• Timeline.Badge: variant prop with values 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'open' | 'closed' | 'sponsors'
• Timeline: clipSidebar now accepts 'start' or 'end' for one-sided trimming

Changed

• N/A

Removed

• N/A

Rollout strategy

• Minor release

Testing & Reviewing

1. npm start and check the Timeline stories:
   • Badge Variants: all 9 color variants rendering with correct emphasis backgrounds
   • Clip Sidebar Start / Clip Sidebar End: one-sided trimming
   • Clip Sidebar: unchanged behavior (both ends clipped)
   • Timeline Break: now uses variant="done" instead of className workaround
2. Unit tests cover the new clipSidebar values and badge variant prop

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 (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 0807a2b

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.
	*/