Add Timeline Issues Features stories (Phase 2 Issues surface) by janmaarten-a11y · Pull Request #8070 · primer/react

janmaarten-a11y · 2026-06-28T03:08:48Z

Summary

Adds Storybook Features stories that recreate GitHub's live Issue timeline events using the Primer React Timeline component and its compositional slots. This is the Issues surface of Phase 2 of the Timeline events effort (github/primer#6663). The Pull Request, Shared, and Dependabot surfaces follow separately (Dependabot is in #8071).

All examples live in a single new file, Timeline.issues.features.stories.tsx (+ a .module.css), exported under the title Components/Timeline/Events/Issues — one story export per event group.

The 9 event groups (59 variants total)

Group	Story export	Variants
Closed	`EventClosed`	7
State	`EventState`	6
References	`EventReferences`	4
Duplicates	`EventDuplicates`	4
Moderation	`EventModeration`	4
Issue Types	`EventIssueTypes`	3
Issue Hierarchy	`EventIssueHierarchy`	8
Dependencies	`EventDependencies`	8
Issue Fields	`EventIssueFields`	15

Source of truth

Each event was recreated from the live github-ui React implementation (packages/timeline-items) as the canonical source, cross-checked against the Figma timeline audit and verified visually against the Figma components. Where the audit and live code disagreed — for example the Closed-event badge icons (CheckCircle/CircleSlash, not the audit's IssueClosed/Skip) and the Unlinked-PR badge icon — live code won. In each case we confirmed the live render path is actually reached (present in the timeline item map, not feature-flagged-off or superseded by a newer component) before trusting it.

Slots used (Phase 1 slots)

Inline actor avatar in Timeline.Body — a 20px avatar + bold link, matching how the live github-ui events render the actor. These badge-row events deliberately do not use the Timeline.Avatar gutter slot (github/primer#6677); that 40px gutter slot is reserved for comment-style events, which aren't part of this Issue-only set.
Timeline.Actions (right-controls slot, github/primer#6678) for the Duplicates "Undo" button — the only right-aligned control in the Issue event set. Everything else (inline commit SHAs, PR-state icons, #numbers) is part of the sentence body text in the live render, so it correctly stays inline in Timeline.Body, not in Timeline.Actions.

Scope & conventions

Every story is wrapped in a file-scoped FeatureFlags decorator enabling primer_react_timeline_list_semantics (the future-state <ol>/<li> DOM, so the stories won't need re-authoring when that flag becomes the default; refs Timeline: Use list semantics for screen reader navigation #7910).
Storybook-only by design. These are intentionally not wired into components-json / the primer.style docs page (not added to Timeline.docs.json or build.ts) — individual timeline events are not consumer-facing components, and the primer.style Timeline page reflects the base Timeline component's own stories. Any docs-site representation is a Phase 3 consideration.
The future event-category data-* filtering taxonomy (github/primer#6663) is intentionally deferred; a single documented hook location in the file header marks where it'll attach per Timeline.Item.

Changelog

New

Timeline.issues.features.stories.tsx and Timeline.issues.features.stories.module.css — Storybook Features stories recreating the Issue timeline events (9 groups, 59 variants).

Changed

None.

Removed

None.

Rollout strategy

None; if selected, include a brief description as to why

Stories-only change — no consumer-facing package code is added or modified, so no changeset is needed (the skip changeset label is applied).

Testing & Reviewing

prettier, eslint, and stylelint all clean; type-check passes with 0 new errors (the pre-existing @primer/doc-gen baseline error in script/components-json/build.ts is unchanged).
All 9 groups were visually diffed against the Figma source; where Figma or the audit disagreed with live code, the live render won.
Browse the stories under Components/Timeline/Events/Issues in Storybook to review each group.

Merge checklist

Recreate GitHub's live Issue timeline events as Storybook Features stories using the Primer Timeline component. Covers 9 event groups (59 variants): Closed, State, References, Duplicates, Moderation, Issue Types, Issue Hierarchy, Dependencies, Issue Fields. Part of github/primer#6663. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

changeset-bot · 2026-06-28T03:08:51Z

⚠️ No Changeset found

Latest commit: e0034d7

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

…tent Move each variant's story caption out of Timeline.Body into an <h3> heading above its own <Timeline>, so the event row (badge + inline avatar + body) renders undistorted. Remove invented borders/cards from the secondary issue-reference lists and commit-reference rows to match the plain, borderless live GitHub rendering. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…nts/Issues Match live ReferencedEventInner: commit-reference message is default weight/color (drop semibold). Retitle story to Components/Timeline/Events/Issues to nest by surface; filename unchanged so the *.features.stories.tsx docs convention is preserved. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

These stories are intentionally not wired into components-json / primer.style docs; individual events are not consumer-facing components. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Live ReferencedEventInner renders the message headline via .commitHashLink (muted + monospace), not default-color sans-serif. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Adds the ProjectV2 shared timeline events (added/removed/status-changed) as the Issue-surface version, sourced from live github-ui timeline-items. Documents the PR (ERB) divergence inline for the future PR surface. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…project' Live ClosedEvent.tsx renders the project closer TableIcon at default color (not muted). Reuse .ProjectRefIcon and drop the now-unused .ProjectIcon. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Add 7 shared timeline event groups (Issue versions) to the Issues features story file: Labels, Title, Milestones, Assignments, Lock/Unlock, Comment deleted, and Cross-references. Sourced from the live github-ui React timeline-items components; PR (ERB) divergences documented inline. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

janmaarten-a11y added skip changeset This change does not need a changelog component: Timeline labels Jun 28, 2026

janmaarten-a11y deployed to github-pages June 28, 2026 03:19 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8070 June 28, 2026 03:20 Inactive

janmaarten-a11y deployed to github-pages June 28, 2026 03:47 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8070 June 28, 2026 03:47 Inactive

janmaarten-a11y and others added 2 commits June 27, 2026 22:22

docs(Timeline): note issue event stories are Storybook-only by design

4050b75

These stories are intentionally not wired into components-json / primer.style docs; individual events are not consumer-facing components. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot temporarily deployed to storybook-preview-8070 June 28, 2026 05:35 Inactive

fix(Timeline): commit-ref message muted + monospace to match live

f3eda9e

Live ReferencedEventInner renders the message headline via .commitHashLink (muted + monospace), not default-color sans-serif. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-8070 June 28, 2026 05:44 Abandoned

janmaarten-a11y deployed to github-pages June 28, 2026 05:55 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8070 June 28, 2026 05:55 Inactive

janmaarten-a11y mentioned this pull request Jun 28, 2026

Add Timeline Dependabot Features stories (Phase 2 Dependabot surface) #8071

Draft

10 tasks

janmaarten-a11y and others added 2 commits June 28, 2026 01:30

github-actions Bot requested a deployment to storybook-preview-8070 June 28, 2026 08:37 Abandoned

github-actions Bot requested a deployment to storybook-preview-8070 June 28, 2026 08:44 Abandoned

janmaarten-a11y deployed to github-pages June 28, 2026 08:55 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-8070 June 28, 2026 08:55 View deployment

janmaarten-a11y mentioned this pull request Jun 28, 2026

Add Timeline comment-card Storybook stories (Issues surface) #8072

Draft

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Timeline Issues Features stories (Phase 2 Issues surface)#8070

Add Timeline Issues Features stories (Phase 2 Issues surface)#8070
janmaarten-a11y wants to merge 8 commits into
mainfrom
janmaarten-a11y-timeline-issues-event-closed-story

janmaarten-a11y commented Jun 28, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 28, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

janmaarten-a11y commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

The 9 event groups (59 variants total)

Source of truth

Slots used (Phase 1 slots)

Scope & conventions

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

janmaarten-a11y commented Jun 28, 2026 •

edited

Loading

changeset-bot Bot commented Jun 28, 2026 •

edited

Loading