[MR Widget UX] Status Checks

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

Current implementation #327634 (closed) With the new UI
Current Current_+_UI_Update

Planned work

Allow failed response #329636 (closed) With the new UI
Failed_current Failed_+_UI_Update

Vision

Mandatory checks {Missing} Non-blocking checks
Required_to_merge Optional_to_merge
Popover info for response {Missing} Action items (Download {Missing} / Retry #246520 (closed))
Message_example Actions
Mobile designs
Current With Failures When Require When Optional
Current_+_UI_Update Failed_+_UI_Update Optional_to_merge Required_to_merge

Getting started

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

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

Edited by Austin Regnery