[docs] Add GitHub demo source link to Demo component#4076
[docs] Add GitHub demo source link to Demo component#4076CiscoFran10 wants to merge 5 commits intomui:masterfrom
Conversation
CiscoFran10
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Greptile OverviewGreptile SummaryAdds a "More actions" menu to demo components with links to view source on GitHub, copy the source link, and report issues. The implementation follows repository guidelines with proper use of Confidence Score: 5/5
Important Files Changed
Last reviewed commit: 6e1af5d |
mj12albert
requested review from
aarongarciah and
Copilot
and removed request for
atomiks,
colmtuite and
michaldudak
There was a problem hiding this comment.
Pull request overview
Adds a “More actions” menu to each docs demo to expose quick actions like viewing the demo’s source on GitHub, copying a source link, and reporting an issue.
Changes:
- Added
getGitHubDemoUrlutility (+ unit tests) to convertimport.meta.urlfile://locations into a GitHub directory URL, including variant subfolders. - Added
MoreVertIconand integrated aMenuintoDemoto provide “View source”, “Copy link”, and “Report an issue” actions. - Added
Demo.cssstyles for the new menu popup and items.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/src/utils/getGitHubDemoUrl.ts | New utility to derive GitHub source URL for a demo directory (with variant support). |
| docs/src/utils/getGitHubDemoUrl.test.ts | Unit tests covering Unix/Windows paths, variants, and encoded components. |
| docs/src/icons/MoreVertIcon.tsx | New icon used for the demo actions menu trigger. |
| docs/src/components/Demo/Demo.tsx | Adds “More actions” menu to demos and copy-feedback behavior for source links. |
| docs/src/components/Demo/Demo.css | Adds styling for the new actions menu. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
aarongarciah
left a comment
aarongarciah
left a comment
There was a problem hiding this comment.
Did a initial pass and left some inline comments.
| </span> | ||
| </GhostButton> | ||
| {githubUrl && ( | ||
| <Menu.Root> |
There was a problem hiding this comment.
A flickering happens when opening the menu. See attached video:
Kapture.2026-02-13.at.08.00.35.mp4
There was a problem hiding this comment.
I couldn’t reproduce the flickering on my side (tested on Windows). Could you confirm if it’s still happening? If so, could you share your device, OS, and browser?
| const onCopied = React.useCallback(() => { | ||
| const onCodeCopied = useStableCallback(() => { | ||
| ga?.trackEvent({ | ||
| category: 'demo', | ||
| action: 'copy', | ||
| label: demoId, | ||
| params: { copy: demoId, slug: demoSlug || '' }, | ||
| }); | ||
|
|
||
| /* eslint-disable no-restricted-syntax */ | ||
| const newTimeout = window.setTimeout(() => { | ||
| window.clearTimeout(newTimeout); | ||
| setCopyTimeout(0); | ||
| }, 2000); | ||
| window.clearTimeout(copyTimeout); | ||
| setCopyTimeout(newTimeout); | ||
| /* eslint-enable no-restricted-syntax */ | ||
| }, [copyTimeout, ga, demoId, demoSlug]); |
There was a problem hiding this comment.
Let's avoid "unrelated" code, or at least try to explain the why behind those changes.
There was a problem hiding this comment.
The project guidelines advise using useStableCallback and useTimeout over React.useCallback and window.setTimeout, so I tried to follow the boy scout rule here. Since I was adding similar copy behavior for the source link, it felt weird to implement it the "right way" while leaving the existing one with the old approach right next to it.
Same thing for the accessibility improvement (aria-hidden, aria-live), while working on the accessibility of the new menu, I couldn't help but update the existing copy button as well to keep them consistent.
That said, let me know if you'd prefer I revert these and create a separate PR for them.
| {codeCopied ? ( | ||
| <CheckIcon aria-hidden="true" /> | ||
| ) : ( | ||
| <CopyIcon aria-hidden="true" /> | ||
| )} | ||
| <span className="sr-only" aria-live="polite"> | ||
| {codeCopied && 'Code copied!'} | ||
| </span> |
There was a problem hiding this comment.
If there are other unrelated improvements, let's create a separate PRs for them.
There was a problem hiding this comment.
Explained above, lmk how to proceed
…nused styles; Add GA event for open issue
…o utilize new constant
4 participants
Summary
Adds a way to open and copy the GitHub source link for each demo from the docs. Demos get a “More actions” (⋮) menu with “View source on GitHub”, “Copy link to source”, and “Report an issue”.
Changes
getGitHubDemoUrl– New utility that turns afile://URL (fromimport.meta.url) into the corresponding GitHub tree URL for the demo directory. Supports the selected variant (e.g. Default, CssModules, Tailwind) so the link points at the right folder.getGitHubDemoUrl.test.ts– Tests for Unix/Windows paths, variants,Default, invalid/missing input, and encoded paths.MoreVertIcon– New icon used as the trigger for the demo actions menu.Menutriggered by the More icon when a GitHub URL is available:github.copy_source_link.Notes
getGitHubDemoUrlreturns a URL (i.e. when the demo’surlresolves to a path underdocs/).githubGA event. ?? Let me know if this is truly needed, but I thought it would be good to add.Context
See for context: #2766