Components

Extending

Bộ component này sẽ có thêm dần. Sản phẩm cần thứ chưa có thì tự dựng, miễn theo đúng các luật bên dưới để vẫn đổi theo token và Mode như phần còn lại.

Section 01

In the Kit

Các sản phẩm ở mục Showcase đang dùng đúng những component này. Mỗi component sinh từ một contract trong file thiết kế.

Component	Variant	Properties
Button/Main	200	Size × Level × State
Button/Flat	50	Size × Level × State
Button/Icon-Main	240	Size × Level × State
Button/Icon-Flat	125	Size × Level × State
Input/Text-Field	36	Size × State
Top-Navigation/Master/Medium	4	Size × Inverse
Top-Navigation/Sub/Medium	12	Size × Type × Inverse
Checkbox/Mark	45	Size × Type × State × Select
Radio-Button/Radio-Mark	30	Size × State × Select
Chip/Normal	108	Size × Level × Leading × State × Select
Primitives/Date-Picker/Day-Cell	42	State × Selection

Section 02

Not in the Kit Yet

Sản phẩm cần màn hay khối giao diện chưa có ở đây thì dựng ngay trong code của sản phẩm, không chờ bộ chung.

Table đang phát triển, dự kiến có ở bản kế tiếp. Hiện chưa có mẫu Table nào đạt, nên anh em cứ vibe trước, miễn theo 5 luật dưới đây.

01Ghép từ component có sẵn trước. Chỉ vẽ mới phần bộ này thật sự chưa có.
02Color, typography, spacing, radius và shadow đều lấy từ token. Không gõ mã màu hay số px cứng.
03Kiểm đủ 6 Mode, ít nhất là light và dark, comfortable và compact, standard và rounded.
04Đặt tên tiếng Anh theo cách đặt của file thiết kế.
05Class mang tiền tố riêng của sản phẩm, khác tiền tố c- của bộ chung, để hai bên không trùng tên.

Section 03

Back into the Kit

Component tự dựng mà nhiều sản phẩm cùng cần thì đưa về bộ chung theo bốn bước.

01Vẽ lại trong file thiết kế thành component có variant và property rõ ràng.
02Sinh contract và CSS từ file đó, như các component đang có.
03Thêm một trang ở mục Components.
04Sản phẩm bỏ bản tự dựng, chuyển sang bản chung.