Make every copy button follow the design system's copy-to-clipboard pattern

Aperta
  • Qualcosa non va?
#751 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Refactoring
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
developer-experience, frontend

Direzione di ricerca

Start with the listed copy controls in site-details.jsx, patch-diff-pane.jsx, logs-panel.jsx, pull-request-destination.jsx, and xdebug-setup-dialog.jsx, then trace their handlers in index.jsx and the hooks. Compare each control with the design system pattern linked in the issue and account for the stated @wordpress/compose version constraint. Update the named journey checks and remove copyButtonLabel when unused; done means every standalone control follows the pattern and menu copy keeps snackbar feedback.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement

Why

The design system has a copy-to-clipboard pattern (source), and the app's copy controls each do it a bit differently. This came up in review of #724.

What the pattern asks for

A standalone copy button:

  • variant="minimal", tone="neutral", size="compact".
  • Keeps its label. It isn't renamed to "Copied" while it has focus.
  • Shows a check icon on success and an error icon on failure, for two seconds after each copy. Each copy restarts the timer.
  • Announces the result with speak(): "Copied to clipboard" or "Couldn't copy to clipboard."
  • No snackbar, no tooltip as the only feedback, no aria-pressed.
  • Copies with useCopyToClipboard from @wordpress/compose, using its onError callback for a failure.

A copy item in a menu shows its result in a snackbar, since the menu closes.

The copy controls in the app now

Where File What it does now
Site details, Local path Copy src/renderer/components/site-details.jsx Minimal button. Renamed to "Copied" for 1.5 seconds, said through a hidden live region. A failure shows an error toast.
Site menu, Copy path src/renderer/index.jsx (copy-path) Menu item. Success and failure are toasts, which already fits the menu case. Check the wording.
Review dialog, patch Copy src/renderer/components/patch-diff-pane.jsx, copyPatch in src/renderer/index.jsx Outline button. Renamed to "Copied" or "Could not copy" (copyButtonLabel in src/renderer/confirmations.cjs), check icon on success, no error icon, no announcement.
Logs, debug.log Copy src/renderer/components/logs-panel.jsx, copyDebugLog in src/renderer/hooks/use-site-logs.jsx Outline button, no icon. Renamed the same way as the patch's.
Pull request, Copy the link src/renderer/components/pull-request-destination.jsx, copyLink in src/renderer/hooks/use-pull-request.jsx Outline button. Renamed to "Link copied" with a check icon. A failure is silent, and a second copy doesn't restart the timer.
GitHub sign-in, Copy the code same files, copyDeviceCode Same as the link.
Xdebug setup dialog, Copy launch.json and the PhpStorm Copy buttons src/renderer/components/xdebug-setup-dialog.jsx (#724) Follows the pattern, except it copies with navigator.clipboard (through copyXdebugConfig in src/renderer/index.jsx), not useCopyToClipboard.

The onError catch

onError was added in @wordpress/compose 9. The app has 8.9.0, through @wordpress/components 41. Adding compose 9 directly pulls in 36 packages, changes 10, and leaves three versions of @wordpress/element in the bundle. So this probably waits for @wordpress/components to move to compose 9, or does everything else first and moves to useCopyToClipboard then.

Proposal

  • One shared copy button that follows the pattern, used by every standalone copy control above.
  • Remove copyButtonLabel once nothing uses it.
  • Update the journeys that check for the "Copied" name: logs.spec.js, review-changes.spec.js, site-header.spec.js.
Lingua principale
JavaScript
Stelle
66
Fork
20
Merge medio
1g 18h
PR unite (30g)
22

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di WordPress/contributor-toolkit

Tutte le issue di WordPress/contributor-toolkit

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.