Add an interactive Timeline Playground story and rename Playground to Event Playground - #8322
Draft
janmaarten-a11y wants to merge 3 commits into
Draft
Add an interactive Timeline Playground story and rename Playground to Event Playground#8322janmaarten-a11y wants to merge 3 commits into
janmaarten-a11y wants to merge 3 commits into
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.
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
1 participant
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.