Simplify our usage of the Status icon svg's

Currently we use 2 different svg icons for the same statuses in different places:

• svg's with svg border
• svg's without border, that need a css border

I intend to only keep:

• svg's without border, that need a css border

My intention is to have the status icons always have a css border of exactly 1px.

In that process we can also scale up the overall pipeline icon used in the MR widget and other places to be the same size as the mini pipeline graph? 22px X 22px

cc: @annabeldunstone @filipa

@annabeldunstone please say if anything is unclear

issue created as mentioned in chat

@annabeldunstone this will require some backend changes and rspec ones too ;)

mentioned in issue gitlab-foss#27900 (closed)

Thanks for creating this @dimitrieh. Glad we're going to remove duplication of our status icons. Since it's mostly technical debt in GitLab FOSS it's not suuuper high priority at the moment so I'm going to unassign myself. Separated the widget issue here https://gitlab.com/gitlab-org/gitlab-ce/issues/27900

added technical debt in GitLab FOSS label

removed assignee

mentioned in issue gitlab-foss#29131 (moved)

mentioned in issue gitlab-foss#25564 (closed)

assigned to @dimitrieh

mentioned in merge request gitlab-foss!10473 (closed)

mentioned in merge request gitlab-foss!10704 (closed)

removed UI polish in GitLab FOSS label

labeling UI polish in GitLab FOSS again.. as we have mixed usage of these icons.. where the icons with the border inside the svg.. are displayed mostly with a thicker border.

added UI polish in GitLab FOSS label

it should be clear what needs to be done :)

unassigning ;)

removed assignee

@bikebilly @filipa can we schedule this accordingly?

@dimitrieh, me @jschatz1 @timzallmann and @ClemMakesApps went through all gitlab-foss2024201 issues in the beginning of the release. The reason we removed gitlab-foss2024201 label from here it's because this is not a broken UI. This is only technical debt. The difference between the icons does not cause a bad/broken UI.

If you check all the UI polish in GitLab FOSS issues that were schedule they all follow this principle. The ones that are either technical debt or require huge changes were unlabelled.

@jschatz1 @timzallmann leaving this up to you to schedule or not.

because this is not a broken UI.

@filipa @jschatz1 @timzallmann @ClemMakesApps i think there is some miscommunication as to what the label UI polish in GitLab FOSS implicates. Please see the description:

Small improvements mainly aimed at improving overall layout and looks.

This issue also implicates looks, aside from technical debt in GitLab FOSS see:

where the icons with the border inside the svg.. are displayed mostly with a thicker border.

Broken UI seems more like bug in GitLab FOSS to me

Just to illustrate the difference:

@psimyn this could potentially be seen as part of https://gitlab.com/gitlab-org/gitlab-ce/issues/33095 although it has a further reach than just the mr widget.

@bikebilly yes, it does require a little backend, but I am able to do it, no need to have someone from backend here, meaning, it is not blocking.

@dimitrieh this should not be handled as a part of MR widget because it has nothing to do with that code It's purely in code that is common to all the places where we use it and it has been part of some problems in the past. And it also requires a little backend changing.

I will assign this to me.

assigned to @filipa

removed UI polish in GitLab FOSS label

mentioned in issue gitlab-foss#33926 (moved)

removed assignee

Unassigning since I am not working on this atm.

What needs to be done here is:

• Remove statusIconEntityMap from https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/vue_shared/ci_status_icons.js

• Replace all statusIconEntityMap usage with borderlessStatusIconEntityMap

• Add CSS for the border in all new icons. There is a lot of duplicated CSS code tho that I am not 100% why is there we have:

  1. https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/icons.scss
  2. https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/pages/status.scss
  3. and the animations for the minigraph are in pipelines.scss

@annabeldunstone do you know why do we have 2 stylesheets for this? Can't remember. I think one would be enough, no?

@filipa I was assuming all icon related stuff would go into icons.scss; not just status icons. Since that's not really the case, they could probably be consolidated into status.scss.

@timzallmann this may be of interest to you, as you are working on the icons ;)

moved from gitlab-foss#27896 (moved)