Design of merge request diff in instance sheet inconsistent with gitlab.com
Currently there is a large set of inconsistencies between the design of merge request diffs in our Sketch files and what's visible on GitLab.com.
I wrote down all inconsistencies and thanks to @pedroms was able to group them into aspects that have to be updated either in the Sketch file or on GitLab.com (and most of that will be covered when we align it with Pajamas).
To be updated in Sketch files
- Two different text colors in Sketch (
#707070for username and timestamp), three in GitLab.com (
#707070for username and
To be updated on GitLab.com
- Bottom border also uses
#dfdfdfin Sketch and
- Badge for developer/maintainer is one grey solid background in Sketch, in GitLab.com it's just the border
- Wrong emoji icon
Grey top bar
- Size of grey top bar is 48px in Sketch, **56px **in GitLab.com
- Border is
- Font-weight of filename is normal in Sketch, bold in GitLab.com
Reply & Resolve
- Color for placeholder text is
- Border color for buttons is
- Color for
new issueicon is
- Height of Reply box and buttons is 32px in Sketch, 34px in GitLab.com
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
- Read our contribution guidelines, especially the For GitLabbers section.
Create a Sketch file in your progress folder just for this pattern and make sure that:
- You have not created a duplicate of an existing pattern, symbol, layer style, or text style.
- You have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
- Typography uses text styles. When applicable, colors use shared styles.
- Ask a UXer to review your Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue.
- QA of your Sketch file by the reviewer.
- Add your changes to the pattern library. When copying things over, watch out for duplicated symbols, layer styles, and text styles. Some of our recommended plugins can help you find and remove duplicates.
- QA of pattern library by the reviewer.
- Create an issue in the Design System to add the pattern documentation. Mark it as related to this issue.
- Add an agenda item to the next UX weekly call to inform everyone (if it's a new pattern, not yet used in the application).