Add an interactive Timeline Playground story and rename Playground to Event Playground - #8322
Merged
Merged
Conversation
…ent Playground Add a Timeline Playground story that demonstrates the data-* event contract on Timeline.Item across surfaces using illustrative github-flavored data, driven by an in-canvas surface, category, and event-type picker. Rename the existing single-event Playground story to Event Playground. Stories only, no public API change.
|
Replace the in-canvas control panel with real Storybook controls. A single surface selector plus per-surface category and event-type multi-selects are declared up front, and each per-surface pair is gated with a conditional argType on the surface value so only the selected surface's controls show. The render filters the representative rows by the selected categories and types. Stories only, no public API change.
… arg defaults Change the Timeline Playground's data-event-visibility vocabulary from the invented public/private to the authoritative primary/auditOnly value space. Every existing representative row is primary, and a new issues metadata category adds a labeled auditOnly row so the demo shows both values. Generate the per-surface arg defaults from the surface ids instead of hand-listing them.
janmaarten-a11y
marked this pull request as ready for review
August 19, 2026 18:13
janmaarten-a11y
added
the
integration-tests: skipped manually
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Storybook coverage for the Phase 3 Timeline redesign by introducing a new, interactive Timeline Playground story that demonstrates filtering via data-* attributes, and renames the existing single-item playground to Event Playground to clarify intent.
Changes:
- Renames the existing
Playgroundstory export toEventPlayground(updating its Storybook URL/id). - Adds a new
TimelinePlaygroundstory with surface/category/type controls that filter representative timeline rows and emitdata-event-*attributes per row. - Adds story-local CSS module styles used by the new playground (empty state + strong text styling).
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Timeline/Timeline.stories.tsx | Renames the existing story and adds the new interactive TimelinePlayground story + representative data/control wiring. |
| packages/react/src/Timeline/Timeline.stories.module.css | Adds PlaygroundEmpty and Strong styles used by TimelinePlayground. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Suppressed comments (2)
packages/react/src/Timeline/Timeline.stories.tsx:739
actorType: 'system'will flow through todata-actor-typeand produce a value that’s outside the repo’s current taxonomy contract ('user' | 'bot'). If this is meant to represent GitHub automation, map it to'bot'(or omitactorTypeto omit the attribute).
label: 'Created',
visibility: 'primary',
actorType: 'system',
badge: {icon: ShieldIcon, variant: 'success'},
packages/react/src/Timeline/Timeline.stories.tsx:754
- Same as above:
'system'isn’t a validdata-actor-typevalue per the repo’s current taxonomy. Use'bot'for first-party automation (or omit the actor type entirely).
label: 'Validity: active',
visibility: 'primary',
actorType: 'system',
badge: {icon: AlertIcon, variant: 'danger'},
- Files reviewed: 2/2 changed files
- Comments generated: 4
- Review effort level: Lite
Align the playground data-* values with the real event contract: use the authoritative primary/auditOnly-adjacent actor value space (data-actor-type is user or bot, so the GitHub secret-scanning system actor is bot), emit the singular issue scope to match the surface identifier, render badge icons directly instead of the deprecated Octicon component, and clarify the canon note that Primer hosts no authoritative taxonomy.
Narrow the Event Playground's data-actor-type to user or bot: the four actor presets stay as a visual convenience, but the app and Copilot presets serialize to bot, matching the authoritative actor value space. Narrow data-event-scope to the real surface set (pull, issue, dependabot, code-scanning, secret-scanning, license-compliance), dropping the invented shared, pr, and custom values, and default the scope to issue.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Background
This is the Primer side of Phase 3 of the Timeline redesign (github/primer#6664, part of the epic github/primer#6654). Phase 2 shipped the per-surface event examples under
Components/Timeline/Events; Phase 3 adds a playground that shows how a timeline is filtered by event category.The event taxonomy itself (which surfaces exist, which categories each offers, and which event types belong to each) is a GitHub product concern and now lives in
github-ui, not Primer. An earlier attempt to host that taxonomy in Primer is being unwound: the module from #8180 is removed in #8321, and the tagging PR #8216 was closed. So this story keeps the GitHub-specific values as inline, illustrative example data and never ships them as a reusable module or public API.What this does
This adds an interactive
Timeline Playgroundstory (components-timeline--timeline-playground) that demonstrates how the filteringdata-*attributes (data-event-scope,data-event-type,data-event-category,data-event-visibility, anddata-actor-type) are embedded on eachTimeline.Item. It renders realTimelinerows with the shared story helpers so they read like the existing per-surface catalog stories.The story provides its picker as real Storybook controls: a
surfaceselector, a category multi-select, and an event-type multi-select. Because Storybook cannot repopulate one control's option list from another control's value, the story declares each surface's category and event-type controls up front and conditionally shows only the selected surface's controls through conditionalargTypes(if: {arg: 'surface', ...}), hiding the others, which fakes the dynamic surface swap the Figma prototype shows. The render then filters the representative rows by the selected surface's categories and event types before mapping toTimeline.Item, so a futureTimeline.Filtercan drive the same structure.The surface, category, and event-type map in this story is illustrative representative data, not a catalog. The authoritative per-surface taxonomy lives in
github-ui. The map stays inline in the story file, is not exported, and adds no reusable module.This also renames the existing single-event
Playgroundstory toEvent Playground, which changes its story URL fromcomponents-timeline--playgroundtocomponents-timeline--event-playground. The rename is intended: that story configures one event, while the newTimeline Playgroundshows a full, filterable timeline.Changelog
New
Timeline Playgroundstory (components-timeline--timeline-playground) with Storybook surface, category, and event-type controls that render representativeTimelineevents carrying thedata-*attributes.Changed
Playgroundstory toEvent Playground, so its story URL becomescomponents-timeline--event-playground.Removed
Rollout strategy
This is a stories-only change. It adds no public API, changes nothing in
packages/react/src/index.ts, and needs no changeset, so theskip changesetlabel is applied.Testing & Reviewing
Open Storybook and select
Components, thenTimeline, thenTimeline Playground, and open the Controls panel. Change thesurfacecontrol and confirm that only the selected surface's category and event-type controls appear while the other surfaces' controls are hidden. Then toggle that surface's categories and event types and confirm the rendered rows update and eachTimeline.Itemcarriesdata-event-scope,data-event-type,data-event-category,data-event-visibility, anddata-actor-type, with actor-less rows omittingdata-actor-type. Confirm the renamedEvent Playgroundstory still renders a single configurable event. Validated locally withtsc --noEmit,eslint --max-warnings=0on the Timeline directory,prettier --check,npm run build --workspace @primer/react, and thestorybook.test.tsxexport check, plus a Storybook run confirming the surface-gated controls show and hide and that axe reports no violations.