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

[Avatar] Fix AvatarGroup sizing, wire up disabled prop, and forward Base UI props

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

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

@rohanchkrabrty đang làm issue này rồi.

Từ ngày 29/9/2026.

Đá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
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

Bắt đầu từ các triển khai của Avatar và AvatarGroup, bao gồm cấu hình CVA và logic getAvatarProps đệ quy của chúng. Theo dõi cách các prop image và fallback của Base UI được cung cấp, sau đó xác minh rằng việc định cỡ, kiểu hiển thị khi bị vô hiệu hóa, chuyển tiếp prop, trích xuất children một cách mạnh mẽ và việc reconciliation avatar ổn định đều hoạt động như mô tả.

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

Mô tả

component triage

Summary

Improvements to the Avatar component to fix bugs, forward missing Base UI props, and improve AvatarGroup reliability.

API Differences from Base UI

Base UI Apsara Change
Avatar.Root Avatar Flattened — root is the default
Avatar.Image (none) Hidden inside Avatar, exposed via src/alt props
Avatar.Fallback (none) Hidden inside Avatar, exposed via fallback prop
(none) AvatarGroup Custom addition
(none) getAvatarColor Custom utility
Props not forwarded from Base UI
  • Image: onLoadingStatusChange — callback for tracking image load/error state
  • Fallback: delay — delay before showing fallback (avoids flash for fast-loading images)

Improvements

1. Fix AvatarGroup overlap CSS (size selectors don't match)

The CSS defines .avatar-size-N .avatarWrapper selectors, but AvatarGroup renders a plain <div> — the size classes are on individual avatars inside .avatarWrapper, not on a parent, so the overlap selectors never match.

2. Wire up disabled prop to CVA

The CVA config has disabled: { true: styles['avatar-disabled'] } but AvatarProps doesn't include disabled as a prop — it's never passed to the CVA call.

3. Forward onLoadingStatusChange from Image

Base UI's Avatar.Image supports onLoadingStatusChange for tracking image load/error state. Currently not exposed.

4. Forward delay from Fallback

Base UI supports a delay prop on Avatar.Fallback to avoid a flash when the image loads quickly. Currently not exposed.

5. Improve getAvatarProps robustness

The recursive prop extraction only works if the direct child is an Avatar or has a single children prop. Wrapping in Tooltip or other components with different prop structures may fail silently.

6. Fix array index key in AvatarGroup

avatars.map((avatar, index) => <div key={index}> — if the avatar list changes order, React won't reconcile correctly.

Ngôn ngữ chính
TypeScript
Star
69
Fork
13
Merge trung bình
4 ngày 4 giờ
Pull request đã merge (30 ngày)
27

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 raystack/apsara

Tất cả issue của raystack/apsara

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.