Merge Request / Pipelines icons
Changed file icons (Merge request)
| Current | New | |
|---|---|---|
| New file |  |
 |
| Removed file |  |
|
| Modified file |  |
 |
Pipeline manual actions
| Icon | |
|---|---|
| Cancel |  |
| Play |  |
| Retry |  |
| Stop |  |
Issue / Merge request status icons (Mobile)
| Current | New | |
|---|---|---|
| Open |  |
 |
| Close(Merge request) |  |
 |
| Close(Issue) |  |
 |
| Merged(MR) | |
 |
Where to get SVGs
https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/hazel/gitlab-icons/svg
Related link: Sub-issue from gitlab-foss#32894 (closed)
Designs
Relates to
- gitlab-foss #38499
Activity
mentioned in issue gitlab-foss#32894 (closed)
@hazelyang overall I really like them, especially the editor icons… wow such an improvement. Here are my comments:
- Editor Numbered list: this is a tough one as I've also designed a couple of them in the past and struggled with the size of the numbers. But I think we can increase the size of the numbers and put them closer together (see material design icon)
- Pipelines icons: would it make sense to have two versions of these? Or maybe have them without the outline circle so they can scale and we control the outline stroke width on a case by case basis? @dimitrieh what are your thoughts, since you worked on this topic before?
- Pipelines Warning: this icon is very similar to the “issues” icon — what can we do to separate them?
- Status icons: these look different from the ones seen in https://gitlab.com/gitlab-org/gitlab-ce/issues/33503 — can we standardize them?
- Pipelines Manual actions Retry: the arrows are too small to understand them
the pipeline icons are a more demanding sort of icons. Currently they are in a hard position due to their being 2 versions in use (with and without border). The correct one of those is without the border.. which we are changing towards with: https://gitlab.com/gitlab-org/gitlab-ce/issues/27896
Apart from that, the icons we currently have work pretty well. They are not only inside the icons in the applications.. but also hard coded in all our favicons (normal/gdkce/gdkee/canary).
Another item here is, that they are readable as is. Your icon changes @hazelyang make them slightly less legible in small sizes.. especially: pending skipped and manual.
What I propose is to leave pipeline icons alone, until the very end and see if it really is necessary to change them.. (maybe its good that they are a little different) as these icons can be dynamic and have more functionality to them than any other icon used throughout gitlab
😃 Editor Numbered list
Agree, the larger text would be better. Will update it in the description. Thanks!
Status icons: these look different from the ones seen in https://gitlab.com/gitlab-org/gitlab-ce/issues/33503 — can we standardize them?
@pedroms I am not sure the reason we use the different icons to indicate closed. I think it is probably because there are two different concepts behind the
Closeicons in issue/merge request status and system notes.If we use 'x' icon in the system notes to indicate the issue/merge request is closed, I don't think it makes sense. It feel more like something is falied.
If we use
to indicate 'Closed' in status, it doesn't make sense too. For users, they feel it's something has been resolved when the issue/merge request is closed.I am not sure if we need to standardize them.
🙂 Pipelines Manual actions Retry: the arrows are too small to understand them
Thanks for pointing out this! Will update it in the description.
@dimitrieh ok! Let's leave the pipeline icons alone.
🙂 mentioned in commit gitlab-design@cb310667
@hazelyang Yup, the numbered list icon is better now
🙂 Yes, I agree with you that the X icon to indicate that an issue is closed is too strong. It does look like something failed (which we don't want).
Maybe I didn't explain myself properly
😁 What I was trying to say with the “standardization” was:- For the system note when closing issues, instead of
, maybe use an icon derived from 
- For the status of merged merge requests, instead of , maybe use
- I think the icon for the system note when closing a merge request is missing from https://gitlab.com/gitlab-org/gitlab-ce/issues/33503, right? Maybe an icon that uses
?
Does this make sense to you?
- For the system note when closing issues, instead of
@pedroms Thanks for clarifying! Makes sense to me!
😆 changed milestone to %10.2
added Discussion in GitLab FOSS label
added Platform in GitLab FOSS label
removed Discussion in GitLab FOSS label
marked this issue as related to gitlab-foss#38499
added frontend in GitLab FOSS label
@hazelyang can we split this up into three separate issues please - for each area that is covered, that way the relevant PMs can contribute and prioritise their areas.
I don't want to dictate icons for @victorwu relating to MRs nor for @bikebilly for CI.
I will, however, give feedback for the MR icons, @victorwu feel free to agree/disagree but I don't like going monochrome on these. The colour gives great additional visual feedback to the action, I know from working in other Git applications that I always use colour as an indicator. Of course, for colour blind users, this is unhelpful, but I don't think we should be impacting everyone with this change.
mentioned in issue gitlab-foss#38597
I've split the editor icons out into gitlab-foss#38597
/cc @hazelyang
added gitlab-foss
2278654 gitlab-foss2278651 and removed Platform in GitLab FOSS labels@mydigitalself, @bikebilly: I think it should depend on the situation whether we split something up across different areas. @bikebilly and the CI/CD engineering team works on merge request functionality and the UI there all the time. Not a problem at all in that case, and certainly they don't ask for permission and I don't feel like I need to give it.
Especially in this case specifically, I'm totally fine if Platform in GitLab FOSS 's product + engineering teams want to work on all the icons together, especially for consistency sake. But if you want to cut scope, I'm fine with that too. Please don't feel like you cannot dictate MR icons. Dictate away! Am I'm sure the UX team also has broad visibility of GitLab overall from a design perspective. So I have no problems with this at all!
So I'll leave it up to you (@mydigitalself and UX) if you want to do it altogether or separately.
Regarding colors: @hazelyang: What's the reason you chose to use monochrome?
marked this issue as related to gitlab-foss#38653
I created an separated issue for manual actions(gitlab-foss#38653).
What's the reason you chose to use monochrome?
@mydigitalself @victorwu The icon colors are still the colors we are using. The icon colors are monochrome in this issue is because they are for SVG.
🙂 removed Discussion in GitLab FOSS label
changed milestone to %10.2
moved from gitlab-foss#33926 (moved)
