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

オープン
  • 何か問題がありますか？
#751 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
リファクタリング
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, react
領域
developer-experience, frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.
主要言語
JavaScript
スター
66
フォーク
20
平均マージ
1日 18時間
マージ済み PR（30日）
22

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

WordPress/contributor-toolkit のほかの issue

WordPress/contributor-toolkit の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。