Timeline: add comment event stories (Phase 2) by janmaarten-a11y · Pull Request #8072 · primer/react

janmaarten-a11y · 2026-06-28T09:42:28Z

Part of github/primer#6663 (Phase 2).

Adds Storybook Features stories that recreate GitHub's timeline comment cards using Primer React. These are the comment events of the Issues surface. They complement the badge-row Issue events (#8070) and the Dependabot alert events (#8071). The stories here are the Issue-sourced (React) comment versions — the PR-sourced (ERB) comment version will come later with the future PR surface.

What's included

A new packages/react/src/Timeline/Timeline.comments.features.stories.tsx (+ co-located CSS module) under the title Components/Timeline/Events/Issues, so the comment stories nest beside the badge-row Issue stories. The five variants are all built on a small, file-local CommentCard helper (not exported), so each story stays a short <CommentCard … />:

CommentStandard — a standard user comment (circle avatar, Author badge, reactions row)
CommentBot — a GitHub App bot comment (square avatar, bot label)
CommentCopilot — a Copilot comment (square avatar, AI label, name renders as "Copilot")
CommentDependabot — a Dependabot comment (square avatar, bot label)
CommentViaApp — a user comment posted via a GitHub App (the "– with {app}" timestamp suffix)

Deferred (not in this PR): threaded review replies, embedded-in-thread comments, and minimized/collapsed states. The CommentCard helper already has an isReply prop wired (drops the container border/caret/gutter avatar) so those can be added later without reshaping the helper.

Source of truth

Recreated from the live React components in github-ui packages/commenting (ActivityHeader, CommentAuthorAssociation, CommentSubjectAuthor, IssueComment). Key denotations were verified against live, not invented:

Actor labels are lowercase bot / AI — from LABELS.authorLabel(isBot, isCopilot) (bot for bots/Dependabot, AI for Copilot, name shown as "Copilot"). Not "Bot"/"Copilot".
Author badge is the subject-author badge (CommentSubjectAuthor, LABELS.commentAuthor), shown when the commenter opened the issue — distinct from association values (Member/Owner/Collaborator/Contributor).
via-app suffix is the literal "– with {app}" appended to the timestamp line, with the app name as an inline (underlined) link.

Avatar shape decision

Users → circle, Copilot, generic bots, and Dependabot → square.
This is faithful to github.com, where bot/app accounts (github-actions, Dependabot) have square avatars by account type — the square shape is set upstream of the comment component, so the live rendered result is square. The React ActivityHeader only forces square={isCopilot}, which avoids overriding an already-square bot avatar; it does not make bots render circular in production.
Square also keeps Dependabot consistent with the Dependabot badge-row surface (Timeline: add Dependabot event stories (Phase 2) #8071).
This rationale is captured as inline comments on the CommentBot/CommentDependabot variants so it isn't accidentally "fixed" back to circle.

Faithfulness note

There is no Primer "Comment" primitive, so the card shell, header bar, speech-bubble caret, and reaction pills are composed from Primer primitives (Avatar, Link, Label, RelativeTime, IconButton) plus a scoped CSS module. This surface is intentionally a recognizable GitHub comment card, less pixel-faithful than the badge-row surfaces.

Slots

Uses Timeline.Item + Timeline.Avatar for the gutter/rail (the comment uses the gutter avatar, no Timeline.Badge). A file-scoped primer_react_timeline_list_semantics decorator renders every story in the future-state list-semantics DOM (<ol>/<li>; refs #7910).

Storybook-only

Like the other Phase 2 event surfaces, 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.

Changelog

New

Storybook Features stories for Timeline comment cards on the Issues surface (Timeline.comments.features.stories.tsx): CommentStandard, CommentBot, CommentCopilot, CommentDependabot, CommentViaApp.

Changed

N/A

Removed

N/A

Rollout strategy

Patch release
Minor release
Major release
None; Storybook-only stories — no changes to the published package, so a skip changeset label is applied.

Testing & Reviewing

prettier, eslint, and stylelint are clean on the new files; 0 new TypeScript errors.
The a11y in-text-link rule is applied (author link bold; timestamp and inline body/app links underlined), so the high-contrast axe check should pass.
Review in Storybook under Components → Timeline → Events → Issues (the Comment* stories).

Merge checklist

Storybook-only example recreating GitHub's issue-timeline comment card from Primer React primitives (Avatar, Link, Label, RelativeTime, IconButton) under Components/Timeline/Events/Comments. Not wired into Timeline.docs.json. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Move the comment stories under Components/Timeline/Events/Issues, extract a local CommentCard helper, and add bot/Copilot/Dependabot/via-app variants recreated from the live github-ui ActivityHeader. Storybook-only; isReply prop wired for deferred threaded replies. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Capture the source-of-truth rationale (github.com renders bot/app avatars square by account type; ActivityHeader's square={isCopilot} doesn't force bots circular) as inline comments on CommentBot + CommentDependabot so reviewers don't revert to circle. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

changeset-bot · 2026-06-28T09:42:34Z

⚠️ No Changeset found

Latest commit: efcd2e5

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

… stories - Seat the 40px gutter avatar ON the Timeline rail (rail passes behind the avatar, not behind the card) and push the card right via margin-left so the speech-bubble caret bridges avatar to card; drop the double left padding. - Add an octicon-avatar mode to CommentCard (avatarIcon prop) and render the Copilot gutter avatar as a muted CopilotIcon in a 40px circle. - Consolidate the five separate exports into a single EventComment story with the variants stacked in captioned sections. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Per the Figma spec, render the Dependabot comment gutter avatar as a white DependabotIcon on an accent-blue rounded square via the octicon-avatar mode (new avatarIconShape/avatarIconTone props), replacing the off-brand photo URL. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Adds a new Storybook-only “Features” story group that recreates GitHub Issues timeline comment cards using Timeline.Item + Timeline.Avatar plus a co-located CSS module for the card shell (header, caret, reactions).

Changes:

Added Timeline.comments.features.stories.tsx with a local CommentCard helper and a single EventComment export showing 5 actor variants (standard user, bot, Copilot, Dependabot, via-app).
Added Timeline.comments.features.stories.module.css to style the comment-card layout (card chrome, caret, avatar positioning, reactions row).
Wrapped stories in the primer_react_timeline_list_semantics feature-flag decorator for future <ol>/<li> semantics.

Show a summary per file

File	Description
packages/react/src/Timeline/Timeline.comments.features.stories.tsx	Adds the Storybook “Issues” comment-card event group and supporting local composition helpers.
packages/react/src/Timeline/Timeline.comments.features.stories.module.css	Provides scoped CSS to visually compose a GitHub-like comment card (caret, header bar, reactions, octicon avatars).

Review details

Files reviewed: 2/2 changed files
Comments generated: 1
Review effort level: Low

Match Figma: avatar left edge ~72px left of the rail, card overlaps the rail by 16px (so the rail runs behind the card's left edge), avatar→card ~56px, with the caret bridging the gap. Remove the divider above the reactions row to match the live comment card. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Avoid a runtime throw when the click target is a non-Element (e.g. an SVG octicon) by checking e.target instanceof Element before calling closest. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

janmaarten-a11y and others added 3 commits June 28, 2026 02:15

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 09:53 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8072 June 28, 2026 09:53 Inactive

janmaarten-a11y mentioned this pull request Jun 28, 2026

Timeline: add Secret Scanning event stories (Phase 2) #8073

Open

10 tasks

janmaarten-a11y changed the title ~~Add Timeline comment-card Storybook stories (Issues surface)~~ Timeline: add comment event stories (Phase 2) Jun 28, 2026

This was referenced Jun 28, 2026

Timeline: add Code Scanning event stories (Phase 2) #8074

Open

Timeline: add License Compliance event stories (Phase 2) #8075

Open

janmaarten-a11y and others added 2 commits June 28, 2026 14:56

janmaarten-a11y self-assigned this Jun 28, 2026

github-actions Bot requested a deployment to storybook-preview-8072 June 28, 2026 22:06 Abandoned

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

janmaarten-a11y requested a review from Copilot June 28, 2026 22:16

github-actions Bot temporarily deployed to storybook-preview-8072 June 28, 2026 22:16 Inactive

Copilot started reviewing on behalf of janmaarten-a11y June 28, 2026 22:16 View session

Copilot AI reviewed Jun 28, 2026

View reviewed changes

Comment thread packages/react/src/Timeline/Timeline.comments.features.stories.tsx

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

Guard onClick target with instanceof Element before closest()

efcd2e5

Avoid a runtime throw when the click target is a non-Element (e.g. an SVG octicon) by checking e.target instanceof Element before calling closest. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-8072 June 28, 2026 22:34 Abandoned

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

github-actions Bot deployed to storybook-preview-8072 June 28, 2026 22:43 View deployment

janmaarten-a11y requested a review from adierkens June 29, 2026 20:12

janmaarten-a11y marked this pull request as ready for review June 29, 2026 20:15

janmaarten-a11y requested a review from a team as a code owner June 29, 2026 20:15

janmaarten-a11y added the integration-tests: skipped manually Changes in this PR do not require an integration test label Jun 29, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Timeline: add comment event stories (Phase 2)#8072

Timeline: add comment event stories (Phase 2)#8072
janmaarten-a11y wants to merge 7 commits into
mainfrom
janmaarten-a11y-timeline-comment-stories

janmaarten-a11y commented Jun 28, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 28, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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!

What's included

Source of truth

Avatar shape decision

Faithfulness note

Slots

Storybook-only

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

janmaarten-a11y commented Jun 28, 2026 •

edited

Loading

changeset-bot Bot commented Jun 28, 2026 •

edited

Loading