Merge branch '33926-update-issuable-icons' into 'master'

Update issuable status icons

Closes #33926

See merge request gitlab-org/gitlab-ce!15898

app/assets/javascripts/issue.js

@@ -48,7 +48,7 @@ export default class Issue {
       })
       .fail(() => new Flash(issueFailMessage))
       .done((data) => {
-        const isClosedBadge = $('div.status-box-closed');
+        const isClosedBadge = $('div.status-box-issue-closed');
         const isOpenBadge = $('div.status-box-open');
         const projectIssuesCounter = $('.issue_counter');
 

app/assets/stylesheets/framework/issue_box.scss

@@ -24,10 +24,14 @@
   font-size: $gl-font-size;
   line-height: 25px;
 
-  &.status-box-closed {
+  &.status-box-mr-closed {
     background-color: $gl-danger;
   }
 
+  &.status-box-issue-closed {
+    background-color: $gl-primary;
+  }
+
   &.status-box-merged {
     background-color: $gl-primary;
   }

app/assets/stylesheets/pages/issuable.scss

@@ -610,11 +610,19 @@
 }
 
 .issuable-status-box {
-  float: none;
-  display: inline-block;
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: 0;
-  height: auto;
-  align-self: center;
+  padding-left: 9px;
+  padding-right: 9px;
+
+  @media (min-width: $screen-sm-min) {
+    display: inline-block;
+    height: auto;
+    align-self: center;
+  }
 }
 
 .issuable-gutter-toggle {

app/helpers/issues_helper.rb

@@ -74,7 +74,7 @@ module IssuesHelper
     elsif item.try(:merged?)
       'status-box-merged'
     elsif item.closed?
-      'status-box-closed'
+      'status-box-mr-closed'
     elsif item.try(:upcoming?)
       'status-box-upcoming'
     else

app/models/merge_request.rb

@@ -887,11 +887,11 @@ class MergeRequest < ActiveRecord::Base
 
   def state_icon_name
     if merged?
-      "check"
+      "git-merge"
     elsif closed?
-      "times"
+      "close"
     else
-      "circle-o"
+      "issue-open-m"
     end
   end
 

app/views/projects/issues/show.html.haml

@@ -14,12 +14,12 @@
 
 .detail-page-header
   .detail-page-header-body
-    .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) }
-      = icon('check', class: "hidden-sm hidden-md hidden-lg")
+    .issuable-status-box.status-box.status-box-issue-closed{ class: issue_button_visibility(@issue, false) }
+      = sprite_icon('mobile-issue-close', size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
       %span.hidden-xs
         Closed
     .issuable-status-box.status-box.status-box-open{ class: issue_button_visibility(@issue, true) }
-      = icon('circle-o', class: "hidden-sm hidden-md hidden-lg")
+      = sprite_icon('issue-open-m', size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
       %span.hidden-xs Open
 
     .issuable-meta

app/views/projects/merge_requests/_mr_title.html.haml

@@ -7,7 +7,7 @@
 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box{ class: status_box_class(@merge_request) }
-      = icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg")
+      = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
       %span.hidden-xs
         = @merge_request.state_human_name
 

changelogs/unreleased/33926-update-issuable-icons.yml

+---
+title: Update issuable status icons
+merge_request: 15898
+author:
+type: changed

spec/javascripts/issue_spec.js

@@ -55,7 +55,7 @@ describe('Issue', function() {
   }
 
   function findElements(isIssueInitiallyOpen) {
-    $boxClosed = $('div.status-box-closed');
+    $boxClosed = $('div.status-box-issue-closed');
     expect($boxClosed).toExist();
     expect($boxClosed).toHaveText('Closed');