[Release note] Tini Design library v3.2


:heart_hands: Những cải thiện trong tháng

1. Tooltips

Thay đổi token màu.

Sự thay đổi này nhằm mục đích thống nhất cách thừa hưởng token màu sắp tới của component Tooltip trong Dark theme, đúng vậy team Tini Design sắp ra mắt Dark theme đó!

2. Toast bar

Ra mắt nội dung quy định vị trí & đổi việc thừa hưởng token màu.

Sau khi review các ứng dụng Tini app của các đối tác trên Tiki cũng như trong nội bộ team design của Tini App, team quản lý Tini Design nhận ra có sự không đồng nhất trong việc hiển thị thanh Toast bar thông báo. Vì lý do đó, team bọn mình đã cho ra mắt nội dung về quy định & hướng dẫn vị trí của Toast bar.

Cũng giống như Tooltips - để thống nhất việc thừa kế token màu cho bản Dark theme, team cũng có thay đổi việc thừa hưởng token màu ở thể loại Neutral và Informative.

3. Chip

Thay đổi component Xóa trong Chip

Component Xóa trong Chip mới nhất đã và sẽ là component Neutral button phiên bản Solid Icon-only với 2 lý do:

  • Chip có component Xóa là button đã được các designer sử dụng rộng rãi trong các product hiện tại của Tini App.
  • Độ tương phản của icon Xóa mới không thỏa đủ điều kiện.

Việc phiên bản 3.0 và 3.1 có sự thay đổi thành icon xóa là hệ quả của việc quy trình làm việc chưa được thống nhất trong team quản lý Tini Design

4. Over background button

Đổi tên thành Brand reverse, cũng như là thay đổi token màu.

Ở những phiên bản trước token màu nền của Over-background button (color-button-over-background-solid-background-default) được thừa hưởng token màu color-alias-primary-on-reverse-theme, và màu content trong button (color-button-over-background-solid-text-default) thừa hưởng token màu (color-alias-brand)

Sự thừa hưởng token này hiệu quả với các usecase của Tiki và một vài đối tác, nhưng khi áp dụng cho các đối tác mới thì những tình huống mới phát sinh. Lý do là độ tương phản của màu brand của các đối tác đó và màu trắng không tốt.

Vì việc đó team quản lý Tini đã quyết định thay đổi sự thừa hưởng token.

Cũng như là đổi tên component thành Brand reverse cho sát với tính chất của component này.

5. Tất cả component thuộc loại Input

Thay đổi việc thừa kế token màu.

6. PIN

Thêm quy định hướng dẫn về bàn phím khi nhập PIN.

Team Tini Design cung cấp quy định này nhằm giúp phía developers hiểu được hành vi mong muốn khi nhập mã PIN. Khi nhập mã PIN, field tiếp theo sẽ tự động được focus khi người dùng đã nhập ô trước đó.

Cũng theo flow đó, team đã bỏ khỏi thư viện trạng thái đang nhập của component PIN.


:sparkles: Những component mới trong tháng

1. Thư viện icon

Đã cập nhật thêm 134 icon mới (gồm cả Line và Filled)

2. Dropdown menu

Dropdown menu


Thông tin liên quan

Design library

Standard flows

  • Tini Checkout flows: Figma

Template

5 Likes

khi nào design này apply vào các ứng dụng vậy Tú?

2 Likes