Add presentational Viewing-menu (Timeline filter) demo story - #8327
Open
janmaarten-a11y wants to merge 3 commits into
Open
Add presentational Viewing-menu (Timeline filter) demo story#8327janmaarten-a11y wants to merge 3 commits into
janmaarten-a11y wants to merge 3 commits into
Conversation
Move the Playground surface data and pure derivation helpers out of Timeline.stories.tsx into internal/timelinePlaygroundData so both the Playground and the new filter demo share them. Behavior is preserved: the Playground stories render identically. Add Timeline.filter.features.stories.tsx: an ActionMenu multi-select "Viewing" control that filters Timeline rows consumer-side. The opening and closing lifecycle bookends stay pinned outside the predicate so the timeline never renders empty regardless of toggles; the consumer owns that guarantee, not the Timeline or control components. Story and internal scaffolding only: no public API export, no changeset. The authoritative Timeline taxonomy stays in github-ui.
|
github-actions
Bot
added
the
integration-tests: recommended
Contributor
|
Retitle the filter story to Components/Timeline/Features with export WithFiltering so it reads as a feature demo rather than implying a shipped Timeline.Filter subcomponent. Move the semibold emphasis into a shared Strong helper in timelineStoryHelpers (mirroring BoldLink) and delete the standalone timelinePlaygroundData.module.css. The default color is load-bearing over the muted Timeline body, so the class stays rather than inlining bare Text. Add representative per-category descriptions in the Viewing menu, rendered through ActionList.Description (block variant). The authoritative per-category text lives in github-ui timeline-taxonomy; Primer renders the slot only. Stories and internal scaffolding only: no public API export, no changeset.
janmaarten-a11y
added
component: Timeline
integration-tests: skipped manually
janmaarten-a11y
marked this pull request as ready for review
August 21, 2026 18:02
janmaarten-a11y
requested review from
siddharthkp
and
a lite review from Copilot
August 21, 2026 18:02
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new, story-first demo for a presentational “Viewing” (Timeline filter) menu and refactors the existing Timeline Playground story scaffolding so both stories share the same representative surface/category/event sample data (kept internal to story code, not public API).
Changes:
- Added a new Timeline filter demo story using an
ActionMenumulti-select to drive consumer-side filtering of Timeline rows. - Extracted the Timeline Playground’s representative surface/category/event data + helper derivations into a new internal story-scaffolding module.
- Moved “strong emphasis” styling from
Timeline.stories.module.cssinto shared internal story helpers via a newStronghelper component.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Timeline/Timeline.stories.tsx | Refactors the Playground story to import shared representative data + helpers from the new internal module. |
| packages/react/src/Timeline/Timeline.stories.module.css | Removes Playground-only .Strong styling after migrating emphasis styling to shared story helpers. |
| packages/react/src/Timeline/Timeline.filter.features.stories.tsx | Adds the new “Viewing” menu demo story that filters Timeline rows consumer-side. |
| packages/react/src/Timeline/Timeline.filter.features.stories.module.css | Adds minimal story-only styling for the filter demo toolbar spacing. |
| packages/react/src/Timeline/internal/timelineStoryHelpers.tsx | Introduces a shared Strong presentational helper for semibold emphasis in event-body text. |
| packages/react/src/Timeline/internal/timelineStoryHelpers.module.css | Adds the .Strong CSS module rule used by the new Strong helper. |
| packages/react/src/Timeline/internal/timelinePlaygroundData.tsx | Introduces shared internal representative Timeline “playground” data + derivation helpers for stories. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 7/7 changed files
- Comments generated: 3
- Review effort level: Lite
Call event.preventDefault() in the multi-select ViewingFilterMenu onSelect so ActionMenu keeps its overlay open across toggles for mouse and keyboard. The prior handler let afterSelect close the menu on each item-select, contradicting the stay-open doc comment.
janmaarten-a11y
requested review from
liuliu-dev
and removed request for
siddharthkp
August 21, 2026 19:04
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.
Related: #6654 (epic), #6664 (phase). Does not close an issue.
Phase 3 of the GitHub Timeline redesign. A story-first, presentational "Viewing" menu demo plus a behavior-preserving refactor so the Playground and the new demo share the same representative surface data. Stories and internal story-scaffolding only: no public API, no changeset. This adds no
Timeline.Filtercomponent; the demo composes its control inside a story.The demo shows the prototype's per-surface "Viewing" control: an
ActionMenumulti-select that toggles which event categories render in a Timeline. Filtering is 100% consumer-side; the control reads nodata-*attributes. Its contract isoptions/selected/onSelectedChange; the story supplies the predicate and applies it. The multi-select menu stays open across toggles for mouse and keyboard, so a viewer can flip several categories in one pass. The opening and closing lifecycle bookends stay pinned outside the predicate, so the timeline never renders empty regardless of toggles, a guarantee the consumer owns, not the Timeline or the control.The representative
PLAYGROUND_SURFACESmap is illustrative, github-flavored sample data, not authoritative. The canonical Timeline taxonomy lives in github-ui (@github-ui/timeline-taxonomy); a header comment in the moved module points there to prevent drift.Changelog
New
Timeline.filter.features.stories.tsx: presentational "Viewing" menu demo (ActionMenumulti-select, consumer-side category filtering, pinned never-empty lifecycle bookends). It renders underComponents/Timeline/Featuresas theWithFilteringstory.internal/timelinePlaygroundData.tsx: shared internal story-scaffolding module holding the representative surface data, its data-layer types, and the pure derivation helpers. Not exported from the package index.Changed
Timeline.stories.tsxnow imports the surface data and helpers from the new internal module. The Playground stories render identically (same DOM, controls, and filtering)..Strongstyling moves into the sharedinternal/timelineStoryHelpersmodule (aStronghelper plus its rule intimelineStoryHelpers.module.css), so the moved data and every surface story reuse one source.Removed
Timeline.stories.tsx, and its local.Strongrule leavesTimeline.stories.module.cssfor the shared helper module described above.Rollout strategy
skip changesetlabel is applied).Testing & Reviewing
Open Storybook and view
Components/Timeline/Features→WithFiltering. Toggle categories in the "Viewing" menu: each category's rows show or hide accordingly, the multi-select menu stays open across toggles (mouse and keyboard), and toggling every category off still leaves the pinned opening and closing bookends, so the timeline never renders empty.Validation runs locally:
tsc --noEmitclean,eslint --max-warnings=0on the Timeline directory clean,prettier --checkon changed files clean,npm run buildfor@primer/reactsucceeds, the Storybook smoke test passes, and a local interaction check confirms the Viewing menu stays open across two consecutive toggles (mouse and keyboard) with axe reporting 0 violations while the menu is open. The three-dot diff vsorigin/maincovers Timeline story files, the newinternal/timelinePlaygroundData.tsxmodule, and their.module.css; it touches nopackages/react/src/index.tsand adds no.changeset.