Now that we have a `ViewComponent` for avatars, we can migrate all avatar instances in `haml` files to use this Pajamas-compliant component. Not all avatar sizes that were used before are supported in a Pajamas-compliant component. So please use your best judgment to choose from available size options (`[16, 24, 32, 48, 64, 96]`) and check with the ~UX team :wink:. ### Help us keep the noise to a minimum 🤫 This epic contains 17 issues. Each is about an individual avatar that we want to fix. But we don't want to have 17 one-liner Merge Requests, as each MR triggers a CI pipeline and adds some overhead for both the author and reviewers. **This is why we ask you to fix more than one issue per MR. We think :five: is a good number.** But if you feel that your case is more complicated it can be less. 1. Before you start work on any of these issues, assign yourself to the 5 issues you want to fix. This way we avoid multiple people duplicating work for the same issue. 2. Fix all 5 issues in the same branch. 3. Create a single Merge Request from your branch. In its description, link to all 5 issues it fixes. ### Example migrations #### Example 1 ```diff - .card-body - = image_tag avatar_icon_for_user(starrer.user, 40), class: "avatar s40", alt: '' + .card-body.gl-display-flex + = render Pajamas::AvatarComponent.new(starrer.user, size: 48, alt: "", class: 'gl-mr-3') ``` `.avatar` as well as `.avatar-container` (which might be used on the parent element) CSS class has a lot of cases of additional styling in different contexts. Make sure that migrated avatar does not use `.avatar`or `.avatar-container` and still looks ok wherever it is rendered. Clean up the styles associated with the specific case if not used anymore. #### Example 2 This example was provided [here](https://gitlab.com/groups/gitlab-org/-/epics/8818#note_1111898569). Thanks ```diff - = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar", data: { qa_selector: 'user_avatar' } + = render Pajamas::AvatarComponent.new(current_user, size: 24, class: 'gl-mr-3', avatar_options: { data: { qa_selector: 'user_avatar' } }) ``` Thank you for your help! :handshake: