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

Đang mở
  • Có gì không ổn?
#751 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tái cấu trúc
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react
Lĩnh vực
developer-experience, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
JavaScript
Star
66
Fork
20
Merge trung bình
1 ngày 18 giờ
Pull request đã merge (30 ngày)
22

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của WordPress/contributor-toolkit

Tất cả issue của WordPress/contributor-toolkit

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.