Skip to content

Replace avatars with pajamas components

Dan Mizzi-Harris requested to merge danmh-pajamas-day-migrations-fy24q1-3 into master

What does this MR do and why?

Describe in detail what your merge request does and why.

Replaces various avatars with the Pajamas components.

1. Topic card avatars

Screenshots or screen recordings

Before After
127.0.0.1_3000_explore_projects_topics__1_ 127.0.0.1_3000_explore_projects_topics
127.0.0.1_3000_explore_projects_topics__2_ 127.0.0.1_3000_explore_projects_topics__3_

How to set up and validate locally

  1. Create a topic in the admin area (http://127.0.0.1:3000/admin/topics)
  2. Go to http://127.0.0.1:3000/explore/projects/topics
  3. View the same page logged out (incognito)

2. Topic project explorer avatar

  • Replace avatar
  • Make section respect user page width settings
  • Even padding top and bottom for section

Screenshots or screen recordings

Before After
127.0.0.1_3000_explore_projects_topics_asdfasdfasd__4_ 127.0.0.1_3000_explore_projects_topics_asdfasdfasd__2_

How to set up and validate locally

  1. Create a topic in the admin area (http://127.0.0.1:3000/admin/topics)
  2. Assign a topic to a project (https://docs.gitlab.com/ee/user/project/settings/#assign-topics-to-a-project) Project > Settings > General > Naming, topics, avatar
  3. Go to the project overview page, and you should see Topics: your topic. Follow the link to your topic to get to the explore page.

3. Group settings avatar picker

Update avatar picker to use Pajamas component. Spacing and sizing taken from Pajamas UI Kit

Screenshots or screen recordings

Before After
127.0.0.1_3000_groups_flightjs_-edit__1 127.0.0.1_3000_groups_flightjs_-_edit

How to set up and validate locally

  1. Go to a group settings page (for example http://127.0.0.1:3000/groups/flightjs/-/edit)
  2. Change the avatar
  3. Change it back if you like
  4. 🎉

4. Project settings avatar picker

Update avatar picker to use Pajamas component. Spacing and sizing taken from Pajamas UI Kit

Screenshots or screen recordings

Before After
127.0.0.1_3000_flightjs_Flight_edit__1_ 127.0.0.1_3000_flightjs_Flight_edit__2_

How to set up and validate locally

  1. Go to a project settings page (for example http://127.0.0.1:3000/flightjs/Flight/edit)
  2. Change the avatar
  3. Change it back if you like
  4. 🎉

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Dan Mizzi-Harris

Merge request reports