Timeline: add shared internal story helpers (UserActor, EventSubRow, permalink time)#8140
Merged
janmaarten-a11y merged 1 commit intoJul 8, 2026
Conversation
…permalink time) Add three shared, story-only Timeline helpers so all Timeline surface stories can import them instead of copy-pasting local copies: - UserActor: avatar + actor name cluster composed from InlineAvatar + BoldLink, with bot ([bot] suffix stripped, unlinked span + "bot" Label) and system-actor (icon glyph) shapes. - EventSubRow: canonical muted "icon + small text" sub-row. - MutedTime: extended with an optional href for permalink timestamps. Storybook-only; ships no runtime code. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
janmaarten-a11y
added
skip changeset
This was referenced Jul 8, 2026
adierkens
approved these changes
Jul 8, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR expands the internal, Storybook-only Timeline helper toolkit by adding shared building blocks for upcoming Phase 2 Timeline event stories, reducing per-surface copy/paste and normalizing common UI patterns.
Changes:
- Added new shared helpers:
UserActor,EventSubRow, andMONALISA_AVATAR. - Enhanced
MutedTimeto optionally render as a permalink whenhrefis provided. - Updated the internal Helpers reference story and added supporting CSS module styles.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Timeline/internal/timelineStoryHelpers.tsx | Adds UserActor, EventSubRow, shared avatar constant, and permalink support in MutedTime. |
| packages/react/src/Timeline/internal/timelineStoryHelpers.stories.tsx | Extends the reference story to render the new helpers and the permalink MutedTime variant. |
| packages/react/src/Timeline/internal/timelineStoryHelpers.module.css | Adds CSS module styles for the new helpers and permalink underline treatment. |
Review details
- Files reviewed: 3/3 changed files
- Comments generated: 3
- Review effort level: Low
Comment on lines
+97
to
+99
| const isBot = login.endsWith('[bot]') | ||
| const display = isBot ? login.replace(/\[bot\]$/i, '') : login | ||
| return ( |
Comment on lines
+55
to
+57
| .BotLabel { | ||
| margin-left: var(--base-size-4); | ||
| } |
Comment on lines
+67
to
+82
| <VariantSection label="UserActor — avatar + actor name (composed from InlineAvatar + BoldLink)"> | ||
| <p> | ||
| <UserActor href="#" muted /> linked+muted, <UserActor size={16} /> unlinked 16px, and a system actor{' '} | ||
| <UserActor login="GitHub" icon={MarkGithubIcon} /> rendering a glyph instead of an avatar. | ||
| </p> | ||
| </VariantSection> | ||
|
|
||
| <VariantSection label="EventSubRow — muted icon + small-text sub-row below an event body"> | ||
| <EventSubRow icon={NoteIcon}>Example note sub-row</EventSubRow> | ||
| </VariantSection> | ||
|
|
||
| <VariantSection label="MutedTime (permalink) — muted relative time linking to the event"> | ||
| <p> | ||
| Updated <MutedTime date={new Date('2022-07-26T12:00:00Z')} href="#" /> as a permalink, beside a plain{' '} | ||
| <MutedTime date={new Date('2022-07-26T12:00:00Z')} /> with no href. | ||
| </p> |
janmaarten-a11y
deleted the
janmaarten-a11y-janmaarten-a11y-timeline-internal-helper
branch
janmaarten-a11y
added a commit
that referenced
this pull request
Jul 8, 2026
Swap the Code Scanning story's local UserActor and NoteSubRow for the shared helpers merged in #8140: UserActor now comes from ./internal/timelineStoryHelpers (<UserActor href="#" muted />, headless-identical to the local InlineAvatar + BoldLink composition) and the note sub-rows use <EventSubRow icon={NoteIcon}>. Delete the now-unused local UserActor, NoteSubRow, MONALISA_AVATAR const, and the .SubRowIcon class. The generic local SubRow is kept — it still backs the path and workflow sub-rows. The mono pills (Ref/ConfigPill), workflow sub-row icon, and tool-version Label are left untouched (deferred). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
10 tasks
janmaarten-a11y
added a commit
that referenced
this pull request
Jul 8, 2026
…iance) Swap the local UserActor and note-sub-row (EventComment) for the shared ./internal/timelineStoryHelpers exports merged in #8140, and delete the now-duplicated CSS. Real actors pass href (linked BoldLink); bot actors render the shared unlinked span + bot Label. Pure refactor; the only change is bot names now use the shared hover-immune .BoldName, matching live-GitHub bold actor text (no hover-accent). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
janmaarten-a11y
added a commit
that referenced
this pull request
Jul 8, 2026
…t Scanning) Swap the local GitHubActor/UserActor/CommentSubRow helpers for the shared UserActor and EventSubRow from ./internal/timelineStoryHelpers (merged in #8140), resolving adierkens' review. The GitHub system actor uses UserActor's icon prop; user actors pass size={16} to preserve the live 16px avatar; comment sub-rows use EventSubRow with CommentIcon at size 12. Deletes the now-unused local helpers and the entire per-surface CSS module (.ActorName/.ActorIcon/.CommentRow/.CommentRowIcon) — the shared helpers' classes (.BoldName/.ActorIcon/.EventSubRow/.EventSubRowIcon) are byte-identical, so this is a pure refactor with zero visual change (verified headless: system actor glyph, 16px user avatar + bold login, and comment sub-rows render identically). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
10 tasks
janmaarten-a11y
added a commit
that referenced
this pull request
Jul 8, 2026
…EventSubRow) Swap the Dependabot Timeline story's local UserActor and NoteComment helpers for the shared ones from ./internal/timelineStoryHelpers (added in #8140). Storybook-only, no consumer-facing change. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.
This is the decoupled shared-helper foundation for the Phase 2 Timeline event stories. It's Storybook-only (ships no runtime code): the per-surface Timeline stories will import these helpers instead of copy-pasting local copies.
It's intentionally independent of the other Timeline PRs — it decouples the shared helpers from the big Issues PR (#8070). #8070 currently also defines
UserActor/.BoldName/.ActorIcon/.BotLabelin this same file; that's expected. This PR is the canonical home, and #8070 will drop its duplicate and import from here once this merges.Changelog
New
UserActor— an actor "avatar + name" cluster composed from the sharedInlineAvatar+BoldLinkhelpers, so every Timeline surface renders actors identically. Supports a bot shape ([bot]suffix stripped, unlinked name + secondarybotLabel) and a system-actor shape via aniconprop (renders a glyph instead of an avatar).EventSubRow— a canonical muted "icon + small text" sub-row for secondary content shown below an event body (e.g. a dismissal note, a config-change detail). It consolidates four hand-rolled local helpers that are the same pattern with incidental drift:NoteComment(Dependabot),CommentSubRow(Secret),NoteSubRow(Code), andEventComment(License). Those varied in layout (flex-center vs block) and spacing (margin-top 4 vs 8) purely from separate authoring —EventSubRownormalizes them to one flex-centered layout, exposing only the genuinely-variable parts (icon,iconSize) as props.EventComment, it's just a sub-row — not a rendered comment. The full comment cards (author header + body + reactions) are the separateCommentCardhelper, which already lives in/internaland is untouched here.MONALISA_AVATAR— shared placeholder avatar constant..BoldName,.BotLabel,.ActorIcon,.EventSubRow,.EventSubRowIcon,.MutedTimeLink.Changed
MutedTime— now accepts an optionalhrefso a timestamp can render as a permalink to the event.timelineStoryHelpers.stories.tsx— theHelpersreference story now renders the new helpers alongside the existing ones.Removed
Rollout strategy
Testing & Reviewing
Open the
Components/Timeline/Internal→Helpersstory in Storybook and confirm all helpers (old + new) render:UserActor(linked/muted, unlinked 16px, and aGitHubsystem actor with a glyph),EventSubRow, andMutedTimeas both a permalink and a plain timestamp. prettier / eslint / stylelint / tsc pass with no new errors.