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

janmaarten-a11y · 2026-06-28T07:01:59Z

Summary

Adds Storybook Features stories that recreate GitHub's live Dependabot alert timeline events using the Primer Timeline component and its compositional slots. This is the Dependabot surface of Phase 2 of the Timeline events effort (github/primer#6663). The Issues surface already landed in #8070; the PR and other surfaces will follow separately.

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

The 5 event groups (23 variants total)

Group	Variants	Badge
`EventOpened`	3 — Opened / from PR / from push	`shield` on solid `success`
`EventFixed`	3 — Fixed / via PR / via push	`shield-check` on solid `done`
`EventDismissed`	8 — 5 manual reasons (+ optional note) + 3 auto (rule-based, incl. from PR/push)	bare `shield-slash` (muted icon)
`EventReopened`	5 — manual reopen + reintroduced ×source + auto-reopened	`sync` on solid `success`
`EventDismissalRequest`	4 — Requested / Approved / Denied / Cancelled	bare badge + colored icon

Source of truth

These stories were recreated from the live, server-rendered ERB ViewComponents in app/components/dependabot_alerts/timeline_items/ in github/github. Each component's render markup and the Primer component arguments it passes were read directly and translated faithfully into Primer React; the source file is cited inline next to each event.

Notably, Dependabot's alert timeline has no React implementation yet — it is 100% ERB. github/github-ui ships only Catalyst custom-element controllers (dependabot-alert-*-element.ts) for table-row / load-all / dismissal interactions, not the timeline event rows. So beyond documenting the design system, these stories double as a useful reference for that team's eventual ERB→React migration.

We verified the live render path per component rather than trusting the Figma audit blindly. The most important catch: the dismissal request/review events use a newer inline erb_template (include ViewComponent::InlineTemplate), which is the active render — the older sibling *.html.erb sidecars are dormant dead code. The Figma audit reflected the dormant sidecar (no-avatar, person/check-circle badges); the live inline template renders a circle user avatar with status-driven icons. Live won.

We were also careful about the Primer badge mechanic: events whose ERB sets bg: :*_emphasis (Opened/Fixed/Reopened) correctly use a solid Timeline.Badge variant, while events whose ERB sets only color: :* with no bg: (Dismissed, Dismissal Request/Review/Cancelled) render as a bare default badge with a colored icon — not a solid-color badge.

Slots used (Phase 1 slots)

Inline actor avatar in Timeline.Body for badge-row events — a square avatar + bold link + (bot) Label for Dependabot-authored events (ActorComponent :dependabot mode), and a circle 20px user avatar + bold link for user-authored events.
Timeline.Actions (right-controls slot, added in Add Timeline.Actions sub-component #7886) for the Dismissal Requested "Review request" button — the live inline template renders a float-right DismissalReviewDialogComponent, whose visible control is a single small primary button that opens the approve/deny dialog.
Dependabot-specific bits composed from primitives: the square bot avatar, the (bot) tag (Label variant="secondary", mirroring ERB bot_identifier_tag), and the inline push-pill SHA (PushLinkComponent → a <code>-wrapped Link styled as the subtle light-blue GitHub SHA pill). Push-pills are part of the sentence body text in the live PushLinkComponent, so they correctly stay 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; 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.
The future event-category data-* filtering taxonomy (github/primer#6663) is intentionally deferred; the hook location is documented in the file header.

Changelog

New

Timeline.dependabot.features.stories.tsx and Timeline.dependabot.features.stories.module.css — Storybook Features stories recreating the Dependabot alert timeline events (5 groups, 23 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 5 groups were visually diffed against the live ERB render and the Figma source. Where Figma was behind live (the dismissal events), the live render won.
Browse the stories under Components/Timeline/Events/Dependabot in Storybook to review each group.

Merge checklist

changeset-bot · 2026-06-28T07:02:05Z

⚠️ No Changeset found

Latest commit: 054b732

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

Copilot

Pull request overview

Adds a new Storybook “Features” story set under Components/Timeline/Events/Dependabot to document/recreate GitHub’s Dependabot alert timeline event rows using Primer React Timeline composition (including Timeline.Actions), plus supporting CSS modules for pixel-faithful styling.

Changes:

Added Timeline.dependabot.features.stories.tsx with 5 event-group exports (Opened, Fixed, Dismissed, Reopened, Dismissal Request) and shared helper subcomponents (actor, timestamp, push-pill, note row).
Added Timeline.dependabot.features.stories.module.css to style inline avatars, bold links, push-pill appearance, note rows, and badge icon coloring.

Show a summary per file

File	Description
packages/react/src/Timeline/Timeline.dependabot.features.stories.tsx	New Dependabot timeline event stories, including helper components and `Timeline.Actions` usage for the review-request control.
packages/react/src/Timeline/Timeline.dependabot.features.stories.module.css	Story-only CSS modules to match GitHub’s Dependabot timeline visuals (inline avatars, push-pill, badge icon coloring, timestamps).

Review details

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

Storybook-only Dependabot alert timeline event stories under Components/Timeline/Events/Dependabot, mirroring the Issues stories pattern. Scoped to the eventOpened group (Opened / OpenedFromPR / OpenedFromPush) as a reviewable proof-of-pattern. Translated from the live server-rendered ERB (DependabotAlerts::TimelineItems::OpenedComponent). Not wired into components-json / primer.style docs by design. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Completes the Dependabot alert timeline event stories (Phase 2): adds eventFixed, eventDismissed, eventReopened, and eventDismissalRequest alongside the existing eventOpened group. Adds circle UserActor and no-avatar PlainActor helpers and a NoteComment sub-content helper, all translated from the live server-rendered ERB (github/github app/components/dependabot_alerts/timeline_items/). Corrects the push-pill to the subtle light-blue GitHub SHA pill (bgColor-accent-muted + fgColor-accent), matching Primer view_components' bg: :accent mapping rather than the solid emphasis blue. Storybook-only by design; not wired into components-json / primer.style docs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The dismissal_*_component.rb files use ViewComponent::InlineTemplate, so their inline erb_template is the active render and the .html.erb sidecars are dead code. Rebuild Requested/Approved/Denied to the avatar-based inline version: circle user actor (UserActor), and status-driven badges via named variants — Requested attention/comment, Approved success/check, Denied danger/x. Cancelled keeps the plain default (subtle) x badge per its inline template. Optional review/resolution notes use the shared NoteComment sub-row. Removes the now-unused PlainActor helper and its CSS, plus the unused Muted, ResolutionLine, and ReviewCommentBox/Label styles. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The dismissal inline ERB uses with_badge(color: :X, icon: Y) with no bg:, which tints the icon on the default badge background rather than producing a solid emphasis badge. Replace the named attention/success/danger Timeline.Badge variants with a bare Timeline.Badge plus a colored Octicon (icon color via a .BadgeIcon* class), mirroring the muted Dismissed treatment. Cancelled's :subtle maps to --fgColor-muted (no --fgColor-subtle token exists). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The Dismissal Requested event's live inline template renders a float-right DismissalReviewDialogComponent when show_dismissal_actions is true — its visible control is a single small primary "Review request" button that opens the approve/deny review dialog. Surface it in the Timeline.Actions right-controls slot (#6678) on the Requested variant only. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The bare alert-rule-name links in the auto-dismissed and auto-reopened note rows had no non-color distinction, failing axe link-in-text-block (WCAG 1.4.1) in high-contrast themes. Add the inline prop (Primer underlines inline links), matching the live ERB (the rule name is a plain, non-bold Primer::Beta::Link) and the convention used by the Issues stories. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Match the live DismissalReviewDialogComponent show-button (scheme: :primary, size: :small) and the inline comment describing it. Addresses Copilot review. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

… guard (Timeline Dependabot stories) - Remove aria-label from every Timeline.Badge Octicon: the label restated the adjacent Body sentence, double-announcing each event. Bare octicons default to aria-hidden, matching live GitHub. - Add a shared Examples wrapper carrying data-a11y-link-underlines="true" so Primer underlines <Link inline> content links (reproduces GitHub's default-on link-underline preference; non-color distinction, WCAG 1.4.1). Actor-name links use className without inline, so they stay semibold with no underline. - Harden the wrapper click guard to e.target instanceof Element before closest() so clicking an SVG/Octicon no longer throws. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Swap the Dependabot stories' local scaffolding for the shared ./internal/timelineStoryHelpers module: VariantSection (captioned section), Examples (width + a11y-underline hint + click guard), BoldLink, InlineAvatar, and MutedTime. Rewrite DependabotActor/UserActor to compose the shared BoldLink + InlineAvatar (square passthrough for the bot). Delete the now-duplicated local Examples/Time helpers and the .Variant/.VariantLabel/.RealisticTimeline/ .LinkWithBoldStyle/.InlineAvatar/.Timestamp classes. Dependabot-specific styling (push-pill, bot Label, note sub-row, badge-icon colors) stays local. Pure refactor — no visual or functional change (axe AAT 45/45 unchanged). 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 07:12 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8071 June 28, 2026 07:12 Inactive

janmaarten-a11y mentioned this pull request Jun 28, 2026

Timeline: add Issue event stories (Phase 2) #8070

Open

10 tasks

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

github-actions Bot temporarily deployed to storybook-preview-8071 June 28, 2026 07:36 Inactive

This was referenced Jun 28, 2026

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

Merged

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

Open

janmaarten-a11y changed the title ~~Add Timeline Dependabot Features stories (Phase 2 Dependabot surface)~~ Timeline: add Dependabot 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 requested a review from Copilot June 28, 2026 21:50

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

Copilot AI reviewed Jun 28, 2026

View reviewed changes

janmaarten-a11y self-assigned this Jun 28, 2026

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

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

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

github-actions Bot temporarily deployed to storybook-preview-8071 June 29, 2026 19:33 Inactive

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

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

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

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

adierkens approved these changes Jul 7, 2026

View reviewed changes

janmaarten-a11y changed the base branch from main to janmaarten-a11y-timeline-comment-stories July 7, 2026 20:28

janmaarten-a11y force-pushed the janmaarten-a11y-timeline-dependabot-stories branch from ab9be6c to 24a5b97 Compare July 7, 2026 20:40

janmaarten-a11y deployed to github-pages July 7, 2026 20:50 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8071 July 7, 2026 20:50 Inactive

janmaarten-a11y force-pushed the janmaarten-a11y-timeline-comment-stories branch from 02c0dad to a3b9975 Compare July 7, 2026 21:20

janmaarten-a11y force-pushed the janmaarten-a11y-timeline-dependabot-stories branch from 24a5b97 to 97c0b18 Compare July 7, 2026 21:27

janmaarten-a11y deployed to github-pages July 7, 2026 21:36 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8071 July 7, 2026 21:37 Inactive

Base automatically changed from janmaarten-a11y-timeline-comment-stories to main July 8, 2026 16:18

janmaarten-a11y and others added 9 commits July 8, 2026 09:22

Make dismissal Review request button primary

93e6c82

Match the live DismissalReviewDialogComponent show-button (scheme: :primary, size: :small) and the inline comment describing it. Addresses Copilot review. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

janmaarten-a11y force-pushed the janmaarten-a11y-timeline-dependabot-stories branch from 97c0b18 to 054b732 Compare July 8, 2026 16:28

janmaarten-a11y deployed to github-pages July 8, 2026 16:38 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8071 July 8, 2026 16:38 Inactive

janmaarten-a11y deployed to github-pages July 8, 2026 16:53 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8071 July 8, 2026 16:53 Inactive

janmaarten-a11y added this pull request to the merge queue Jul 8, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jul 8, 2026

janmaarten-a11y added this pull request to the merge queue Jul 8, 2026

Merged via the queue into main with commit 43c4012 Jul 8, 2026
73 of 75 checks passed

janmaarten-a11y deleted the janmaarten-a11y-timeline-dependabot-stories branch July 8, 2026 17:20

janmaarten-a11y mentioned this pull request Jul 8, 2026

Timeline: Dependabot stories use shared internal helpers (UserActor, EventSubRow) #8142

Open

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Timeline: add Dependabot event stories (Phase 2)#8071

Timeline: add Dependabot event stories (Phase 2)#8071
janmaarten-a11y merged 9 commits into
mainfrom
janmaarten-a11y-timeline-dependabot-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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 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!

Summary

The 5 event groups (23 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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

janmaarten-a11y commented Jun 28, 2026 •

edited

Loading

changeset-bot Bot commented Jun 28, 2026 •

edited

Loading