Avatar component

[nadonomy]

Component name

Avatar

Figma link

• Web Figma document link: https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=522-742&mode=design&t=jsFgnt5eA33BaiFu-11
• iOS Figma document link: ...
• Android Figma document link: ...

Design phase

Preview Give feedback

1. Design phase for Web
2. Design phase for iOS
3. Design phase for Android

Development phase

Preview Give feedback

1. Create Avatar component vector-im/compound-web#4
   +0
2. Development phase for iOS
3. Development phase for Android
4. Room Heroes matrix-org/sliding-sync#241
   +0

Adding a reminder that this work includes reducing the number of avatar sizes across platforms (if it hasn't been done already):

@pixlwave @jmartinesp, message @callumu with any questions

---

Implementation details

• Avatar clusters will be implemented off m.heroes (pending resolution of Room Heroes matrix-org/sliding-sync#241)
• See the color algorithm for imageless avatars, https://github.com/vector-im/compound-web/blob/main/src/components/Avatar/useIdColorHash.ts
• See the initial letter algorithm for imageless avatars, https://github.com/vector-im/compound-web/blob/main/src/utils/string.ts#L29

[nadonomy]

Initial thoughts on specs/requirements:

• Fully round for users, squared for spaces
• Need detailed specs on the default state (i.e. when no image is set)
  • Do we use an initialism? First 1 or 2 characters?
  • Do we use a background fill? How colourful or monotone in the new design language and colour scale? Would it benefit from a light gradient for depth? (We experimented a little in DL2.0)
  • Consider using other users avatars when images aren't set - ref the group chat avatar collages in Google Messages, Messenger & iMessage
• Include presence (offline/online/away - consider status in the future)
• Consider the latest trust & safety decoration - I think we're placing locks etc separately but worth sanity checking with @americanrefugee
• Consider notifications decoration - I think we're placing iconography separately but again worth double checking with Amsha

[pixlwave]

Consider using other users avatars when images aren't set.

For Element X this would be a bit more tricky right now as Sliding Sync doesn't provide us with the room members in the room list. If we wanted it, I would image we could add an extension to include the room heroes in the sync response, although a trade-off on that might be increased sync size slowing the app down a bit.