GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — feat(ui): add ghost copy button for single-line code blocks (#9085) by hrithiksaini99 · Pull Request #9297 · nodejs/nodejs.org

Conversation

@hrithiksaini99

@hrithiksaini99 hrithiksaini99 commented Nov 2, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown

Description

Single-line code blocks (marked with no-footer by 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:

  • Sits in the top-right corner of the code block and becomes visible on hover or focus (opacity-0 by default, opacity-100 on :hover / :focus-within).
  • Uses two icons to indicate state without text: DocumentDuplicateIcon by default, switching to CheckIcon when copied.
  • Retains full screen-reader accessibility with dynamic aria-label and title attributes ("Copy code" -> "Copied!").
  • Adds right padding (pr-12) to single-line code blocks so overflowing text is never occluded.
  • Isolates navigator.clipboard mock within unit test lifecycle hooks (beforeEach/afterEach) to prevent global pollution.
  • Avoids nested ternaries by cleanly separating {hideFooter && ...} and {!hideFooter && Boolean(language) && ...} blocks.
  • Adds comprehensive unit tests for BaseCodeBox covering default footer rendering, ghost copy button rendering on no-footer, and clipboard copy interactions.
  • Adds NoFooter story to BaseCodeBox.stories.tsx.

Visual Appearance & Screenshots

Light Theme

Ghost Copy Button - Light Theme

Dark Theme

Ghost Copy Button - Dark Theme

Validation

  • Ran pnpm --filter @node-core/ui-components test: 46 passing tests (including new unit tests for BaseCodeBox).
  • Ran pnpm --filter @node-core/ui-components lint: 0 errors.
  • Ran pnpm --filter @node-core/ui-components lint:types: 0 errors.
  • Ran pnpm --filter @node-core/ui-components build: Clean build.
  • Pre-commit hooks passed.

Related Issues

Fixes #9085

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run pnpm format to ensure the code follows the style guide.
  • I have run pnpm test to check if all tests are passing.
  • I have run pnpm build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions
@hrithiksaini99
feat(ui): add ghost copy button for single-line code blocks (nodejs#9085
dc4f15d 
)
@hrithiksaini99
hrithiksaini99 requested a review from a team as a code owner November 2, 2026 19:50
@vercel

vercel Bot commented Nov 2, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
nodejs-org Ready Ready Preview Nov 4, 2026 6:12am UTC

Request Review
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@vercel
vercel Bot deployed to Preview November 2, 2026 19:52
View deployment
AugustinMauroy
AugustinMauroy reviewed Nov 3, 2026
View reviewed changes
Comment thread packages/ui-components/src/Common/BaseCodeBox/index.tsx Resolved

Uh oh!

There was an error while loading. Please reload this page.
ovflowd
ovflowd reviewed Nov 3, 2026
View reviewed changes
Comment thread packages/ui-components/src/Common/BaseCodeBox/__tests__/index.test.jsx Resolved

Uh oh!

There was an error while loading. Please reload this page.
ovflowd
ovflowd reviewed Nov 3, 2026
View reviewed changes
Comment thread packages/ui-components/src/Common/BaseCodeBox/index.tsx Resolved

Uh oh!

There was an error while loading. Please reload this page.
ovflowd
ovflowd reviewed Nov 3, 2026
View reviewed changes
Comment thread packages/ui-components/src/Common/BaseCodeBox/index.module.css
}
}

& > .ghostAction {

@ovflowd ovflowd Nov 3, 2026

Copy link
Copy Markdown
Member

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add screenshots on how it looks on the PR description for dark/light theme 🙇

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions

@hrithiksaini99 hrithiksaini99 Nov 4, 2026

Copy link
Copy Markdown
Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions

@ovflowd ovflowd Nov 7, 2026

Copy link
Copy Markdown
Member

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see screenshots yet.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions

@hrithiksaini99 hrithiksaini99 Nov 7, 2026

Copy link
Copy Markdown
Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
Ghost Copy Button - Light Theme

Dark Theme:
Ghost Copy Button - Dark Theme

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions
@hrithiksaini99
fix(ui): address review feedback for ghost copy button (nodejs#9297)
3eccee6 
- 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
@vercel
vercel Bot deployed to Preview November 4, 2026 06:12
View deployment
@hrithiksaini99
hrithiksaini99 deployed to Storybook November 5, 2026 15:58 — with GitHub Actions
View deployment
@codecov

codecov Bot commented Nov 5, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 92.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.06%. Comparing base (08cfcea) to head (3eccee6).
⚠️ Report is 15 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...ges/ui-components/src/Common/BaseCodeBox/index.tsx 92.00% 2 Missing ⚠️
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.
📢 Have feedback on the report? Share it here.
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@github-actions

github-actions Bot commented Nov 5, 2026

Copy link
Copy Markdown
Contributor

📦 Build Size Comparison

Summary

Metric Value
Old Total First Load JS 7.19 MB
New Total First Load JS 7.19 MB
Delta 4.67 KB (+0.06%)

Changes

🔄 Modified Routes (4)
Route Old First Load JS New First Load JS Delta
/[locale] 1.69 MB 1.69 MB 📈 1.17 KB (+0.07%)
/[locale]/[...path] 1.69 MB 1.69 MB 📈 1.17 KB (+0.07%)
/[locale]/blog/[...path] 1.69 MB 1.69 MB 📈 1.17 KB (+0.07%)
/[locale]/download/archive/[version] 1.69 MB 1.69 MB 📈 1.17 KB (+0.07%)
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

This branch was successfully deployed

2 active deployments
Storybook — 3eccee6a Deployed Nov 5, 2026 by hrithiksaini99 via Chromatic #2436
View deployment
Preview — 3eccee6a Deployed Nov 4, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ovflowd ovflowd ovflowd left review comments
@AugustinMauroy AugustinMauroy AugustinMauroy left review comments

At least 1 approving review is required to merge this pull request.

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

UI: one line code block ghost copy button

Uh oh!

There was an error while loading. Please reload this page.

3 participants

@hrithiksaini99 @ovflowd @AugustinMauroy
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.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.