AvatarGroup/AvatarGroupItem convergence

[sopranopillow]

Preparation:

• Started prep
• Open UI Research complete
• Comparison on v8 and v0 complete
• Gather open GitHub issues related to component
• react-* package scaffolded
  • react-avatar
• Component Spec authored and reviewed
  • react-avatar: AvatarGroup SPEC review #22523
• Deliverable: Reviewed component spec

Implementation

[link to react-* package folder]

• Started implementation
• Implement component:
  • react-avatar: Adding initial implementation of AvatarGroup. #22736
  • react-avatar: Adding AvatarGroupItem implementation and AvatarGroup context #23310
• Add storybook stories docs(react-avatar): Adding more AvatarGroup stories #23493
• Using hooks
• Using makeStyles
• Respects Figma tokens (and using provider)
• Respects API principles, shorthands and slots handling
• No dependency on v0/v7
• Add tests - Conformance, Unit, and VR
  • Bundle size fixtures
  • Conformance tests
  • Unit tests
  • VR tests
  • Accessibility behavior tests
    • AvatarGroup manual accessibility checklist #23773
• Write README.md covering basic usage
• Write initial MIGRATION.md guide (include v8 and v0)
• Set component ownership in CODEOWNERS
• Deliverable: Experimental component ready for partner use, component re-exported in react-components
  • chore(react-components): Re-export AvatarGroup and AvatarGroupItem in react-components/unstable #23573

Validation

• Started validating
• Add and validate in UI Builder
• Add and validate in docs site
• Validate with token pipeline
• Validate in product
• Finalize migration guide
  • Update README for Avatar and AvatarGroup to a single file: see issue
  • Author codemods
• Deliverable: Preview component ready for broader/3rd party use
  • feat(react-components): Move AvatarGroup to stable #25005

[sopranopillow]

TODOs:

• Once DRAFT, DO NOT MERGEExample updated Slot type #22633 is added, check if changing Tooltip to a slot makes sense.
• Once react-priority-overflow is more stable, add either PriorityOverflowAvatarGroup or add it to current implementation.
• Add note on behavior of empty Avatars to spec and stories.
• Enforce AvatarGroupItem children only.
• Check that AvatarGroupItem is only used in an AvatarGroup by checking for context.
• Add localization. AvatarGroup only supports English labels #23038
• Remove overflow list slot and use popover surface with role="list".
• Change AvatarGroupItem to be a div.
• Add selected state styles to AvatarGroup.
• Find out why position absolute is needed inside Avatar slot.
• Fix focus indicator styles. fix(react-avatar): Fixing AvatarGroup's focus indicator  #23528
• Find out if RTL should be supported.