Skip to content

Add a small (16px) variant to the avatars-inline component

Description

The current avatars-inline component offers variations for 24px and 32px avatars. In some places (such as the Issue List) we display multiple assignees inline with a 16px avatar. These currently aren't using a gitlab-ui component, and it would be great to make these more consistent with how we are treating the avatars-inline component.

Example of inline 16px avatars on Issue List

Screenshot_2024-01-03_at_10.16.56_AM

Example on Merge Request Lists (assignee & reviewers)

Screenshot_2024-01-03_at_10.21.37_AM

Figma file

View branch in Figma →

Use case example

Screenshot_2024-01-03_at_10.31.58_AM

(see in Figma)

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a FE/UX Foundations designer.
  4. When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, create an MR in Pajamas to update the component status.
  6. When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the Engineering Week in Review.
  9. 🎉 Congrats, you made it! You can now close this issue.
Edited by Nick Brandt