[Avatar] Fix AvatarGroup sizing, wire up disabled prop, and forward Base UI props
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
调研方向
从 Avatar 和 AvatarGroup 的实现开始，包括它们的 CVA 配置和递归的 getAvatarProps 逻辑。跟踪 Base UI 如何暴露 image 和 fallback props，然后验证尺寸设置、禁用样式、prop 转发、稳健的子元素提取以及稳定的 avatar reconciliation 是否都如描述般正常工作。
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- TypeScript
- 星标
- 70
- 派生
- 13
- 平均合并
- 8 天 56 分钟
- 30 天内合并 PR
- 16
环境准备
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
raystack/apsara 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 75/100
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 75/100
维护者通常 1 天内回复
-
Docs: hand-duplicated props tables drift risk, missing a11y sections, no per-component changelog未关闭enhancement global
难度 4/5 3-5 天 新手友好度 48/100
维护者通常 1 天内回复
-
bug global
难度 4/5 3-5 天 新手友好度 48/100
维护者通常 1 天内回复
相似的 Issue
-
resources
难度 2/5 1-3 小时 新手友好度 72/100
railmapgen/rmg-palette#2445 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 88/100
danielmiessler/LifeOS#2242 ·
维护者通常 5 天内回复
-
good first issue hacktoberfest help wanted translation
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
callstackincubator/appduct#129 ·
维护者通常 1 天内回复
-
难度 1/5 1-3 小时 新手友好度 88/100