Design Pattern Library: Avatars

Problem

We currently do not have a documented set of sizes for avatars.

Solution

It was discussed in #193 (closed) to adopt circular avatars for users and rounded square avatars for projects and groups.

Example(s)

Current avatar sizes

Sizes	Example
24px	Issue/MR Sidebar - Participants
32px	Issue/MR Sidebar - Assignees
40px	Comments, Project list, Group list, etc.
70px	Group overview page
90px	User Profile Page

Proposed sizes

Sizes	Name	Border radius for Project/Group Avatars
16px	XS	2px
24px	S	4px
32px	M	4px
64px	L	8px
96px	XL	8px

Usage

An avatar is a graphical representation of a user or the user's profile.

Dos and dont's

✅ Do	🛑 Don’t
Use the correct avatar size based on the need	Do not resize avatars or stray from the preset sizes

Related patterns

(List any related or similar solutions. If none, write: No related patterns)

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

1. Ensure that you have broken things down into atoms, molecules, and organisms.
2. Check that you have not created a duplicate of an existing pattern.
3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
4. Make sure that typography is using text styles. When applicable used shared styles for colors.
5. QA check by another UXer
6. Add changes to the pattern library
7. Create an issue to add the pattern documentation to the Design System. Mark it as related to this issue.
8. Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)

/cc @gitlab-com/gitlab-ux