Repository navigation
feat(ui): add ghost copy button for single-line code blocks (#9085) - #9297
hrithiksaini99 wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| } | ||
| } | ||
|
|
||
| & > .ghostAction { |
There was a problem hiding this comment.
Please add screenshots on how it looks on the PR description for dark/light theme 🙇
There was a problem hiding this comment.
Added theme preview details to the PR description and validated across light and dark modes! In both themes, the ghost button sits cleanly in the top-right corner with opacity-0 by default, transitioning to opacity-100 on hover/focus-within, rendering DocumentDuplicateIcon on hover and CheckIcon on copy. You can also test it live directly in the Vercel deploy preview.
There was a problem hiding this comment.
Apologies for the delay! I have embedded the light and dark mode screenshots into the PR description and attached them below from the preview deployment:
Light Theme:
Dark Theme:
- use DocumentDuplicateIcon and CheckIcon without text for ghost button - isolate navigator.clipboard mock within test suite - split nested ternary into separate conditional checks - add NoFooter story to BaseCodeBox stories
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #9297 +/- ##
==========================================
+ Coverage 86.97% 87.06% +0.08%
==========================================
Files 88 89 +1
Lines 6356 6523 +167
Branches 386 399 +13
==========================================
+ Hits 5528 5679 +151
- Misses 824 840 +16
Partials 4 4 ☔ View full report in Codecov by Harness. |
📦 Build Size ComparisonSummary
Changes🔄 Modified Routes (4)
|
Description
Single-line code blocks (marked with
no-footerby rehype-shiki) do not display the bottom toolbar to conserve vertical UI space, which left them without a quick copy action.This PR adds a ghost copy button for single-line code blocks that:
opacity-0by default,opacity-100on:hover/:focus-within).DocumentDuplicateIconby default, switching toCheckIconwhen copied.aria-labelandtitleattributes ("Copy code" -> "Copied!").pr-12) to single-line code blocks so overflowing text is never occluded.navigator.clipboardmock within unit test lifecycle hooks (beforeEach/afterEach) to prevent global pollution.{hideFooter && ...}and{!hideFooter && Boolean(language) && ...}blocks.BaseCodeBoxcovering default footer rendering, ghost copy button rendering onno-footer, and clipboard copy interactions.NoFooterstory toBaseCodeBox.stories.tsx.Visual Appearance & Screenshots
Light Theme
Dark Theme
Validation
pnpm --filter @node-core/ui-components test: 46 passing tests (including new unit tests forBaseCodeBox).pnpm --filter @node-core/ui-components lint: 0 errors.pnpm --filter @node-core/ui-components lint:types: 0 errors.pnpm --filter @node-core/ui-components build: Clean build.Related Issues
Fixes #9085
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.