FormNotice

Playground

Đổi brand, theme và nội dung. Bên dưới là một FormError tĩnh để so — cùng hình học, khác vai trò aria, màu và icon.

import { FormNotice } from "@nexobox/ui";

{justSaved ? <FormNotice>"Đã gửi email xác minh."</FormNotice> : null}

Bài toán

Khi một lần nộp thành công nhưng trang không điều hướng đi đâu — mật khẩu đã đổi, email xác minh đã gửi, thiết lập đã lưu — người dùng cần một xác nhận nằm đúng chỗ họ vừa nhìn, tức đầu biểu mẫu. Xác nhận ấy phải được trình đọc màn hình đọc, nhưng không được chen ngang, vì chen ngang cho một tin tốt sẽ cắt lời chính thao tác người dùng đang làm tiếp. Một primitive không giải được vì đây cũng là ba quyết định ghép — vai trò status, hình học bám field, icon dấu tích cố định — và không primitive nào sở hữu cả ba. Hình học ấy khác Alert, và bảng đo khác biệt nằm ở FormError; nó áp nguyên cho file này.

Khi nào sử dụng

Nên dùng

Xác nhận thành công ở mức biểu mẫu, đặt ở đầu biểu mẫu, khi trang không điều hướng sau khi nộp. Thông báo trung tính, không khẩn: "Đã gửi email xác minh", "Đã lưu thay đổi". Một dòng, một câu.

Khi nào không dùng

Tránh dùng

Dựng từ

Composite thứ hai trong tầng không dựng từ primitive tầng 1 nào — cùng ghi chú như FormError: nó thêm thứ không primitive nào có, không gọi tên khái niệm sản phẩm nào, nên vẫn thuộc tầng 2.

Anatomy

Giống FormError từng phần một, chỉ đổi ba token màu, một icon, một vai trò aria và một alias lề dưới — hai băng cạnh nhau trong cùng một biểu mẫu phải đọc như hai trạng thái của một thứ.

States

Không hiện: không có chế độ ẩn. Hover, focus, disabled: không có — không phải control, không phần nào nhận tiêu điểm. Không có nút đóng và không tự tắt. Hệ quả cần biết: nếu người dùng nộp lại biểu mẫu và lần này lỗi, host phải bỏ băng thành công đi — composite không biết nó đã cũ.

Bàn phím & trợ năng

Seam — host sở hữu gì

FormNotice không biết việc gì đã thành công, không hết hạn, không tự thay thế mình bằng một băng lỗi khi lần nộp sau thất bại. Theo ADR-UI-003 clause 2 nó không fetch, không đọc router, không giữ session, không import gì từ next.

API & triển khai

Design tokens

FormNotice đọc --nf-component-field-radius, --nf-semantic-status-success-border-subtle, -background, -foreground, -icon, cộng các alias component.auth.banner* và component.auth.noticeMarginBottom. Cùng lỗ hổng đặt tên đã ghi ở FormError — nhóm đúng là component.formBanner.*, theo dõi bằng dòng ledger W10.19. Cỡ chữ 0.8125rem là số trần, không phải token — cùng lớp lỗ hổng.

Do / Don't