New icons for system notes

changed the description

@hazelyang looks good here!

My concern is that imo .. a "square" check list item icon.. is more connected with a "todo" than a round one.. although we use the round one in the top nav of course..

But because of this mr-approved now looks to me as if it should symbolise task done.. more than "task done" icon..

suggestion: What about a person with a checkmark/cross? for mr approved/unapproved

move project icon.. looks a bit asif it moves a todo? .. as it also uses the cirlce?

just my thoughs

Doesn't look explicit enough imo :).. not branchy enough so to say

a "square" check list item icon.. is more connected with a "todo" than a round one

After mulling this over, I agree with @dimitrieh on this one. I think that it is because the square around the check makes it feel like a checkbox.

@dimitrieh @sarrahvesselov Thanks for your feedback! I updated those icons. They look better than that I created before.

suggestion: What about a person with a checkmark/cross? for mr approved/unapproved

Good idea! Thanks!

Approval	Unapproval	Branch	Move project	Merge	Task done	Invisible	Visible

I modified Branch. Branch and Merge should have the same style, so I modified both of them.
I slightly changed Visible and Invisible as the old ones looked a little compact.

I do really like the updated approval/unapproval icons. Great suggestion @dimitrieh and nice implementation @hazelyang!

changed the description

@hazelyang you're doing a great job on this, I'm very happy to see someone tackling this huge task of redesigning the icons Here are my comments:

Mentioning other issues / merge requests: what about rethinking the meaning of this icon? It's effectively about someone writing/commenting the issue/MR number, so maybe we can use the issue or MR icon with a small speech bubble? Or the other way around: a speech bubble with the issue or MR icon inside?
Assignee: we have the action of assigning (adding) and unassigning (removing) users
Milestone: the clock “arms” don't look centered to me. As a comparison, the current “clock” icon looks centered.
Issue is confidential: it's difficult to explain, but the current icon looks more legible and understandable. Maybe it's because the new icon has more spaces and the shapes are closer together?
Issue is visible: do we need the small white circle on the eye?
Marked tasks as done: can we have a filled version for this one?
Change titile / description: do we need the hollow end of the pencil? Could it work like this pencil icon?
Create branch: the curve on the current one looks more fluid and “natural”? Would it be possible to align both circles to the top (the one on the right is a bit down)?
Move project: what's the “project” icon? What about having the arrow with the “project” icon? Or, since we're effectively moving the issue and not the project, having the issue icon with an arrow?
Merge request is approved/unapproved: why aren't the “person” shapes the same as in the “Assignee” icon? Also the “check” and “cross” shapes have a very thin outline, making them more difficult to see. Consider increasing the spacing or putting them next to the “person” shape, like this material design icon
Unrelated/Related/Merge request is approved/unapproved/Visible/Confidential: Upon further thinking, I don't think we should reflect the state of the action in the icons, but simply the icons. What I mean is: instead of having approved and unapproved icons, have a single icon for the the approval action, no matter if it's positive or negative. The same for changing the visibility or adding/removing relations. Let's keep it simple, or else we'll need to design icons for adding and removing assignees, milestones, labels, etc. I think the only action that needs a different icon for its states is changing the status of an object (open, closed, merged). Other than that, I believe we're only making this more difficult than needed. The more icons we have, the more people have to learn, and complexity increases.
Merge: my perception is that the arrow is too small, which makes it very difficult to see and understand the icon. Consider increase the size of the arrow and, if necessary, increase the space between the two “branch lines”.

mentioned in issue #33926 (moved)

mentioned in issue #34027 (closed)

Mentioning other issues / merge requests: what about rethinking the meaning of this icon? It's effectively about someone writing/commenting the issue/MR number, so maybe we can use the issue or MR icon with a small speech bubble? Or the other way around: a speech bubble with the issue or MR icon inside?

This is an excellent observation @pedroms. I am ashamed to say that I did not give the meaning of this much thought when looking over the new designs.

Issue is confidential: it's difficult to explain, but the current icon looks more legible and understandable. Maybe it's because the new icon has more spaces and the shapes are closer together?

This might be because the iris is smaller and the line centered on it in the new version. This makes it more difficult to see that it is an eye.

Issue is visible: do we need the small white circle on the eye?

I would say yes, I like the character it adds.

Merge request is approved/unapproved: why aren't the “person” shapes the same as in the “Assignee” icon?

I don't know that the assignee person shape would work as well. The head is smaller, shoulders broader. Also, the assignee isn't always the person approving so I am not sure there is a semantic need for them to match exactly.

What I mean is: instead of having approved and unapproved icons, have a single icon for the the approval action, no matter if it's positive or negative. The same for changing the visibility or adding/removing relations....Other than that, I believe we're only making this more difficult than needed. The more icons we have, the more people have to learn, and complexity increases.

While I agree with this on a basic level, I think we need to differentiate between visible / confidential / etc. These icons are used in may areas to indicate the state of something. We should make things as simple and understandable as possible. If we can reduce the number of icons, great. Let's just make sure we don't make things harder to understand at a glance.

changed the description

@pedroms @sarrahvesselov Thanks for your feedback!

Mentioning other users/merge request:

@pedroms We can simplify the issue or merge request icon to '3 dots', so the icon can keep clean and simple. '3 dots' has the meaning of people are saying or mentioning something.

Milestone: the clock “arms” don't look centered to me. As a comparison, the current “clock” icon looks centered.

I did that intentionally for visual balance. But I found another way to balance it. Updated it! Thanks!

Issue is confidential: it's difficult to explain, but the current icon looks more legible and understandable. Maybe it's because the new icon has more spaces and the shapes are closer together?

Agreed. Updated it! Thanks!

Create branch: the curve on the current one looks more fluid and “natural”? Would it be possible to align both circles to the top (the one on the right is a bit down)?

I modified the curve slightly. I have one of the circles not align to top intentionally since that feels more vivid.

Assignee: we have the action of assigning (adding) and unassigning (removing) users

We can add unassigning users icon.

Change titile / description: do we need the hollow end of the pencil? Could it work like this pencil icon?

I think we need it. It makes it unique.

Move project: what's the “project” icon? What about having the arrow with the “project” icon? Or, since we're effectively moving the issue and not the project, having the issue icon with an arrow?

I am worried it might complicate the icon.

Merge request is approved/unapproved: why aren't the “person” shapes the same as in the “Assignee” icon? Also the “check” and “cross” shapes have a very thin outline, making them more difficult to see. Consider increasing the spacing or putting them next to the “person” shape, like this material design icon

Thanks! Updated the person shape. About putting the 'check' or 'x' next to the person shape, I tried doing that, but there is no enough space for putting the 'check' if we want to keep it in a legible size.

What I mean is: instead of having approved and unapproved icons, have a single icon for the the approval action, no matter if it's positive or negative. The same for changing the visibility or adding/removing relations....Other than that, I believe we're only making this more difficult than needed. The more icons we have, the more people have to learn, and complexity increases.

Agree with @sarrahvesselov.

added UX ready and removed UX labels

changed the description

@hazelyang cool, thanks for looking into my comments! Great work!

added Discussion ~14281 ~13921 labels

@victorwu @JobV please take a look into this for scheduling? We'd like to introduce these at the same time as https://gitlab.com/gitlab-org/gitlab-ce/issues/34027

@pedroms @victorwu @mydigitalself do at the same time as the new nav then? 10.0?

@hazelyang @pedroms I think we'll probably need a parent / child icon, rather than one for 'subissue', but @victorwu can elaborate on that.

changed milestone to %10.0

added frontend label

changed the description

Updated Merge request is closed icon and Issue is closed icon.

added Deliverable label

changed the description

assigned to @brycepj

created branch 33503-new-icons-for-system-notes

I think we'll probably need a parent / child icon, rather than one for 'subissue', but @victorwu can elaborate on that.

@victorwu I am trying to redesign the icon, but I don't have a clear concept of subissue. Can you elaborate it? Thanks!

@hazelyang :

This is the ongoing issue for subissues: https://gitlab.com/gitlab-org/gitlab-ee/issues/2036.

We just want a way to group multiple issues together in a parent-child relationship. The use cases are in the realm of "epics". See the concept by skimming through these:

For GitLab, we want to make our platform as extensible as possible. So we don't want to create a first-class citizen called "epic". Instead, the product strategy is to simply link issues together with different type of relations and solve those agile use cases. So that's the purpose of subissues here.

We already have "related issues" as another type of relation. In the future, we will also have "blocking issues" (https://gitlab.com/gitlab-org/gitlab-ee/issues/2035) as another relation. I think it would make sense to consider these three together when designing the icons. Thanks!

Thanks @victorwu!

We already have "related issues" as another type of relation. In the future, we will also have "blocking issues" (https://gitlab.com/gitlab-org/gitlab-ee/issues/2035) as another relation. I think it would make sense to consider these three together when designing the icons.

I've created it.

changed the description

@hazelyang : We might need more icons for the sub issues and blocking issues later (when establishing the links and removing the links). But don't worry about those yet, until we actually spec out the features.

@hazelyang : Regarding the icons for assigned / unassigned system notes, should we just use one icon (instead of the two you designed)? Problem is that when one system note has both assignments and unassignments. See this as an example: https://gitlab.com/victorwu/approvals-project/issues/1. If we have different icons for different scenarios, it'll probably be extra development effort. Let's scope that for a future issue. Can we have just one icon?

Regarding the icons for assigned / unassigned system notes, should we just use one icon (instead of the two you designed)? Problem is that when one system note has both assignments and unassignments. See this as an example: https://gitlab.com/victorwu/approvals-project/issues/1. If we have different icons for different scenarios, it'll probably be extra development effort. Let's scope that for a future issue. Can we have just one icon?

@victorwu Sure, if that be extra development effort, we can use just one icon and iterate it in the future. I'll update it, thanks!

changed the description

Thanks @hazelyang . Looks great.

@victorwu I agree with the extra design and development effort for system notes that have more than variation. I mentioned that before, and while I agree with @sarrahvesselov's reaction, I think we should look at this on a case by case basis. For example, I don't think we need both the “Related” and “Unrelated” icon designs, a single design would work for both scenarios. But as @sarrahvesselov pointed out, it's important to have different designs when making an issue confidential or visible.

changed the description

Hi all, I've updated the description to include existing filenames for these SVGs so I can keep track of what's going where.

Since several of the system notes are EE only, I'm going to open an additional issue and MR in EE to track those.

@victorwu Am I correct that system notes for parent/child/blocking issues haven't been implemented yet? I don't see any support for them in the EE or CE code.

@brycepj : That is correct. Let me update the description here to note that these are just designs for future features.

@victorwu Sounds good -- we'll probably need to open another issue for those at some point, since system notes will involve backend

changed the description

Will do @brycepj . Thanks for the heads up.

For reference, the EE-only icons issue is here: https://gitlab.com/gitlab-org/gitlab-ee/issues/3205

mentioned in merge request !13673 (merged)

@hazelyang Sorry for what may be an obvious question, but is it intentional that the some of the new icons are darker in color?

If you aren't able to change the fill easily with CSS, the svg probably needs to be run through an SVG cleaner to remove the fill being specified. I use https://github.com/RazrFalcon/svgcleaner

Let us know if that doesnt work for you @brycepj

Thanks @tauriedavis -- I downloaded the svg cleaner you linked to. Strangely, it worked for all but one of the svgs: https://gitlab.com/gitlab-org/gitlab-ce/uploads/743a08684d29dfdbbd8c1f78538a84f1/content-edit.svg

I tried manually removing the fill attributes, but then nothing is rendered. I'm a little out of my depth here -- do you (@tauriedavis or @hazelyang) know what we need to do?

Nevermind ! I found the correct file in @hazel's svg folder (it was named pencil.svg) and had been correctly stripped of fill attributes.

@hazelyang One thing to watch out for are these extra points in the middle of the pencil:

It can cause small lines when zoomed in:

It also means that there are extra points, so the svg file is larger.

@tauriedavis Thanks! I simplified the points in the pencil icon and pushed it to my design repo. cc @brycepj

@brycepj : If possible, could you make the latest svg updates? If it's too late, let's scope it in a future issue.

@victorwu if you're just referring to the pencil icon, then yep, it's done here: 6f07f7e

Yes @brycepj . Thanks for the update!

closed via merge request !13673 (merged)

mentioned in commit b7cfeeba

@sarrahvesselov @hazelyang : Can we have an official place to store latest designs of our icons? So that we can refer/promote/advertise it, for example, in the blog post. Would that be here for now? https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/hazel/gitlab-icons/svg

Can you view this link @victorwu?

https://brand.ai/git-lab/primary-brand

This is our design pattern library, @tauriedavis has been working hard putting it together. This version is mainly for the design team in order to share assets but outsiders should be able to view it. You should be able to click on Icons in the right-hand menu to view all of our current icons.

The future concept is to establish an official design.gitlab.com to house our design patterns / rules / roadmap, etc.

So that we can refer/promote/advertise it, for example, in the blog post.

I have a series of blog posts planned, our new icons will be the subject of one of them

Thanks @sarrahvesselov. That looks really good.

Sorry I should've been more clear. I meant the release blog post for 10.0. I'll keep the existing link that I used there (https://gitlab.com/gitlab-org/gitlab-design/tree/master/progress/hazel/gitlab-icons/svg), since it looks like that page isn't ready for prime time just yet. In the future, I'll definitely link to design.gitlab.com as you mentioned in any relevant release post sections.

Sorry I should've been more clear. I meant the release blog post for 10.0

Ah, of course, @victorwu. Yes, for this go-around the original link you have will work.

marked this issue as related to #38499

mentioned in issue #38806

	Current	New	Filename
Mentioning other issues / merge requests			_icon_merge.svg
Assignee			_icon_user.svg
*Unassignee			_icon_user.svg
Label			_icon_tags.svg
Issue is closed			_icon_status_closed.svg
Issue is open			_icon_status_open.svg
Merge is closed			_icon_merged.svg
Milestone			_icon_clock_o.svg
Issue is confidential			_icon_eye_slash.svg
Issue is visible			_icon_eye.svg
Marked tasks as done			_icon_check_square_o.svg
Change titile / description			_icon_edit.svg
Create branch			_icon_code_fork.svg
Move project		![system-note-move-project.svg] (/uploads/ca4fe55d462db234d482b6cffa261de4/system-note-move-project.svg)	_icon_arrow_circle_o_right.svg
Merge request is approved: EE			_icon_check.svg
Merge request is unapproved: EE			_icon_fa_close.svg
Commit			_icon_commit.svg
Merge			_icon_merge.svg
Parent issue (Feature not yet implemented, out of scope)	(New)
Children issue (Feature not yet implemented, out of scope)	(New)
Blocking issues (Feature not yet implemented, out of scope)	(New)
Unrelated: EE	(New)		_icon_anchor_broken.svg
Related: EE	(New)		_icon_anchor.svg
Comment			_icon_comment_o.svg
Mark issue as duplicate			_icon_clone.svg

New icons for system notes

Resources

Icons List

Where to get icons

Links

Designs

Child items ...

Activity

Admin message

Admin message

New icons for system notes

Resources

Icons List

Where to get icons

Links

Relates to

Activity