[MR Widget UX] Load performance

For the Polish UI and text of MR widgets KR, the UX department is improving the MR Widget interface to improve consistency and help users digest MR's quickly! This issue is to track the redesign efforts of the Status Checks widget using the new MR Widget framework.

Current widget

• Live example jheimbuck_gl/load_testing_test!2
• Documentation https://docs.gitlab.com/ee/user/project/merge_requests/load_performance_testing.html

Getting started

The MR Widget Framework lives within the Pajamas UI Kit. Please design within the branch associated with this work listed below:-

• Load performance - Pajamas UI Kit Figma Branch

In the branch under Regions > Merge request reports you'll find an auto-layout group called Instances. It contains two examples to kickstart your work. By all means, you can disregard them. They are provided to give examples of the two breakpoints we would like you to design for. Please design for the 375px and 1200px breakpoints. We’d hope the two breakpoints will be sufficient for most if not all use cases but should your designs need more nuance, feel free to use more.

When your work is ready for review please ping Tim Noah (@timnoah) and Jeremy Elder @jeldergl via a comment in the Figma branch. @jeldergl can then take the necessary steps to merge your work into the Pajamas UI Kit's main branch.

No other files are needed, all the work can be completed inside of the branch provided.

Resources

• 📺 Watch this video on MR widget components in Figma for an overview that will help you design your own widget.
• MR Widget framework (page 🔲 MR widget framework of the Figma file UX OKR F22Q2 - MR Widget Audit and Exploration)
• Proposed Timetable