Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#597 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
design, frontend

Direzione di ricerca

Inizia dalle implementazioni di Avatar e AvatarGroup, inclusa la loro configurazione CVA e la logica ricorsiva di getAvatarProps. Traccia il modo in cui vengono esposte le props di immagine e fallback di Base UI, quindi verifica che il dimensionamento, lo stile disabilitato, il prop forwarding, l’estrazione robusta dei figli e la riconciliazione stabile degli avatar funzionino tutti come descritto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
70
Fork
13
Merge medio
8g 56m
PR unite (30g)
16

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di raystack/apsara

Tutte le issue di raystack/apsara

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.