Skip to content

Components: modernize CopyToClipboard and retire forms local variant#48193

Draft
enejb wants to merge 1 commit intotrunkfrom
fix/clipboard-component
Draft

Components: modernize CopyToClipboard and retire forms local variant#48193
enejb wants to merge 1 commit intotrunkfrom
fix/clipboard-component

Conversation

@enejb
Copy link
Copy Markdown
Member

@enejb enejb commented Apr 19, 2026

Proposed changes

Modernizes the CopyToClipboard component in @automattic/jetpack-components and retires the local CopyClipboardButton that the forms package was maintaining in parallel.

  • Rewrites @automattic/jetpack-components's CopyToClipboard on top of @wordpress/components Button + Tooltip and @wordpress/icons (copySmall / check). The jetpack-components Button wrapper and the package-local ClipboardIcon / CheckmarkIcon are no longer used by this component — same icons and same core button as the forms version.
  • Adds copyMessage / copiedMessage props so callers can customize the labels. Icon-only mode now shows a tooltip that flips to the copied message on success, matching the UX the forms package was using.
  • Default idle label continues to come from the component's children in text / icon-text modes; the copied state always transitions to the copiedMessage.
  • Deletes packages/forms/src/dashboard/components/copy-clipboard-button/ and migrates the four forms call sites (embed modal, response inspector's email field, response meta) to the shared component.

Consumer visual delta (accepted)

CopyToClipboard previously spread props through the jetpack-components Button wrapper, which adds a weight prop. The WP core Button has no weight, so two call sites will render with the default WP Button weight (bold) instead of regular:

  • projects/plugins/boost/app/assets/src/js/pages/cache-debug-log/cache-debug-log.tsx
  • projects/plugins/jetpack/extensions/shared/clipboard-input.js

The regression is accepted per the spec. No code changes at those call sites — reviewers who want the old look back can restyle via class names in a follow-up.

packages/publicize/_inc/components/share-buttons/share-buttons.tsx doesn't use weight; it's unaffected.

Out of scope

  • The jetpack-components ClipboardIcon and CheckmarkIcon are no longer used by CopyToClipboard but remain exported. A follow-up PR will mark them deprecated.
  • Other direct useCopyToClipboard hook consumers (ai-chat copy button, videopress clipboard-button-input, celebrate-launch modal, site-preview-link) are untouched — out of scope for this PR.

Related product discussion/links

  • None.

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Please verify each surface visually — no interactive visual verification was done on this PR.

  1. Jetpack Forms → Responses inbox → open a response → verify the email-address row shows the copy icon button; click it and confirm the tooltip flips to "Copied!" for ~4 s, then back.
  2. Jetpack Forms → embed-form modal → "Copied" step → verify the two icon buttons next to the embed code and shortcode use the tooltip feedback and custom "Copy embed code" / "Embed code copied!" and "Copy shortcode" / "Shortcode copied!" labels.
  3. Jetpack admin → any context that uses extensions/shared/clipboard-input.js → verify the "Copy" icon-text button still copies and still flips to the copied state. Text weight will render bold now (was previously regular).
  4. Jetpack Boost → Cache Log Viewer → verify the "Copy to clipboard" icon-text link button still copies the log. Text weight will render bold now (was previously regular).
  5. Jetpack Social share buttons → verify the clipboard share button still works across icon, text, and icon-text styles.

What was verified on this PR

  • Typecheck (tsgo --noEmit) passes for projects/js-packages/components and projects/packages/forms.
  • ESLint is clean on all changed files (after auto-fix).
  • Unit tests pass locally: Jest suite reported 52 passed, 650 passed for packages/forms and 27 passed, 109 passed for js-packages/components at the time the PR was prepared.
  • Build succeeds for js-packages/components, packages/forms, and plugins/jetpack.
  • The built plugins/jetpack bundle was rsynced to a Jurassic Ninja site. WP admin bootstrap loaded without errors, but the forms admin page requires an authenticated Jetpack connection that wasn't completed, so no interactive click-through of the copy-to-clipboard UIs was performed.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 19, 2026

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

  • To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the fix/clipboard-component branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack fix/clipboard-component
bin/jetpack-downloader test jetpack-mu-wpcom-plugin fix/clipboard-component

Interested in more tips and information?

  • In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
  • Read more about our development workflow here: PCYsg-eg0-p2
  • Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

@github-actions
Copy link
Copy Markdown
Contributor

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


Follow this PR Review Process:

  1. Ensure all required checks appearing at the bottom of this PR are passing.
  2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
  3. You can use GitHub's Reviewers functionality to request a review.
  4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

@jp-launch-control
Copy link
Copy Markdown

Code Coverage Summary

Coverage changed in 1 file.

File Coverage Δ% Δ Uncovered
projects/js-packages/components/components/copy-to-clipboard/index.tsx 1/31 (3.23%) -1.12% 8 💔

Full summary · PHP report · JS report

If appropriate, add one of these labels to override the failing coverage check: Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant