Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

[Design] Unify destructive actions and error states

Đang mở
  • Có gì không ổn?
#160 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ó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
30/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
accessibility, design, frontend

Hướng nghiên cứu

Start with the design audit at /design-audit#surfaces and inspect TerminalAlert consumers in apps/web, plus the document deletion and other destructive dialogs. Review the existing focus, recovery, and announcement behavior before mapping the required states. Done means approved audit specimens, accessibility evidence, migrated consumers, screenshots, and passing bun run types, bun run ci, bun run design-audit:test, and bun test.

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

Mô tả

triage/human-response

Base branch: main
Branch: maggie/design-error-and-destructive-states
Depends on: None

Goal

Design a coherent system for destructive actions and inline, recoverable, and terminal errors across Chopin.

Context From Planning

  • The destructive dialog and all error specimens in /design-audit#surfaces currently feel visually crude and inconsistent.
  • Destructive buttons, warnings, validation errors, retryable failures, and terminal failures need related semantics without making every error equally loud.
  • This is a proper design pass requiring human review, not a CSS-only color adjustment.

Current Behavior

Errors are presented through a mix of plain destructive text, TerminalAlert, ad hoc banners, and dialog-local copy. Destructive actions use related colors but do not form a clear severity, placement, or recovery system.

Desired Behavior

Define reusable alert/status and destructive-action patterns with clear severity, readable hierarchy, consistent actions, accessible announcements, and calm visual weight appropriate to the consequence.

Acceptance Criteria

  • The design audit covers inline validation, recoverable error with retry, terminal error, destructive confirmation, destructive failure, and disabled/busy destructive action.
  • Each pattern defines icon, title/body hierarchy, action placement, color role, surface, spacing, and announcement semantics.
  • Errors remain understandable without color alone and meet contrast requirements.
  • Retry, cancel, and destructive confirmation keep their existing behavior and focus management.
  • A shared primitive replaces duplicate presentation while retaining consumer-specific copy and recovery behavior.
  • Maggie approves the audit specimens before production migration.

Verification Commands

  • bun run types
  • bun run ci
  • bun run design-audit:test
  • bun test

Primary Surfaces

  • /design-audit#surfaces
  • TerminalAlert consumers in apps/web
  • Document deletion and other destructive dialogs
  • Research, navigation, and composer failures

Expected PR Checks

  • Repo required checks

Report Requirements

  • State matrix and before/after screenshots
  • Accessibility behavior for alerts and dialogs
  • Production consumers migrated
  • Deferred edge cases

Implementation Notes

  • Preserve the distinction between validation, recoverable, and terminal failures.
  • Preserve persistence-before-publication and existing action semantics; presentation must not acknowledge work early.
  • Build on shared tokens/components rather than bespoke dialog and banner CSS.

Stop Conditions

  • Severity semantics or copy require a product decision.
  • A proposed shared component cannot preserve a consumer's focus or recovery contract.
Ngôn ngữ chính
TypeScript
Star
392
Fork
22
Merge trung bình
17 giờ 55 phút
Pull request đã merge (30 ngày)
258

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

  • Có Dockerfile hoặc tệp Docker Compose
  • Không có mẫu pull request
  • Không có hướng dẫn đóng góp

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 githubnext/chopin

Tất cả issue của githubnext/chopin

Issue tương tự

Thêm issue về TypeScript

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.