Backport issue count badge style refactor for re-use

Added by
https://gitlab.com/gitlab-org/gitlab-ee/commit/88aea2cbc8633ba970335d935d725bd17654b424

Part of this MR: https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1797/

app/assets/stylesheets/pages/boards.scss

+@import "./issues/issue_count_badge";
+
 [v-cloak] {
   display: none;
 }
@@ -133,7 +135,7 @@
     }
 
     .board-list-component,
-    .board-issue-count-holder {
+    .issue-count-badge {
       display: none;
     }
   }
@@ -429,30 +431,6 @@
   margin: 5px;
 }
 
-.board-issue-count-holder {
-  margin-top: -3px;
-
-  .btn {
-    line-height: 12px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
-
-.board-issue-count {
-  padding-right: 10px;
-  padding-left: 10px;
-  line-height: 21px;
-  border-radius: $border-radius-base;
-  border: 1px solid $border-color;
-
-  &.has-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-width: 1px 0 1px 1px;
-  }
-}
-
 .page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar {
   &.right-sidebar {
     top: 0;

app/assets/stylesheets/pages/issues.scss

+@import "./issues/issue_count_badge";
+
 .issues-list {
   .issue {
     padding: 10px 0 10px $gl-padding;

app/assets/stylesheets/pages/issues/issue_count_badge.scss

+.issue-count-badge {
+  display: inline-flex;
+  align-items: stretch;
+  height: 24px;
+}
+
+.issue-count-badge-count {
+  display: flex;
+  align-items: center;
+  padding-right: 10px;
+  padding-left: 10px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-base;
+  line-height: 1;
+
+  &.has-btn {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.issue-count-badge-add-button {
+  display: flex;
+  align-items: center;
+  border: 1px solid $border-color;
+  border-radius: 0 $border-radius-base $border-radius-base 0;
+  line-height: 1;
+}

app/views/projects/boards/components/_board.html.haml

@@ -9,11 +9,11 @@
         %span.has-tooltip{ ":title" => '(list.label ? list.label.description : "")',
           data: { container: "body", placement: "bottom" } }
           {{ list.title }}
-        .board-issue-count-holder.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' }
-          %span.board-issue-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }
+        .issue-count-badge.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' }
+          %span.issue-count-badge-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }
             {{ list.issuesSize }}
           - if can?(current_user, :admin_issue, @project)
-            %button.btn.btn-small.btn-default.pull-right.has-tooltip.js-no-trigger-collapse{ type: "button",
+            %button.issue-count-badge-add-button.btn.btn-small.btn-default.has-tooltip.js-no-trigger-collapse{ type: "button",
               "@click" => "showNewIssueForm",
               "v-if" => 'list.type !== "closed"',
               "aria-label" => "New issue",

spec/features/boards/new_issue_spec.rb

@@ -19,18 +19,18 @@ describe 'Issue Boards new issue', feature: true, js: true do
     end
 
     it 'displays new issue button' do
-      expect(first('.board')).to have_selector('.board-issue-count-holder .btn', count: 1)
+      expect(first('.board')).to have_selector('.issue-count-badge-add-button', count: 1)
     end
 
     it 'does not display new issue button in closed list' do
       page.within('.board:nth-child(3)') do
-        expect(page).not_to have_selector('.board-issue-count-holder .btn')
+        expect(page).not_to have_selector('.issue-count-badge-add-button')
       end
     end
 
     it 'shows form when clicking button' do
       page.within(first('.board')) do
-        find('.board-issue-count-holder .btn').click
+        find('.issue-count-badge-add-button').click
 
         expect(page).to have_selector('.board-new-issue-form')
       end
@@ -38,7 +38,7 @@ describe 'Issue Boards new issue', feature: true, js: true do
 
     it 'hides form when clicking cancel' do
       page.within(first('.board')) do
-        find('.board-issue-count-holder .btn').click
+        find('.issue-count-badge-add-button').click
 
         expect(page).to have_selector('.board-new-issue-form')
 
@@ -50,7 +50,7 @@ describe 'Issue Boards new issue', feature: true, js: true do
 
     it 'creates new issue' do
       page.within(first('.board')) do
-        find('.board-issue-count-holder .btn').click
+        find('.issue-count-badge-add-button').click
       end
 
       page.within(first('.board-new-issue-form')) do
@@ -60,14 +60,14 @@ describe 'Issue Boards new issue', feature: true, js: true do
 
       wait_for_requests
 
-      page.within(first('.board .board-issue-count')) do
+      page.within(first('.board .issue-count-badge-count')) do
         expect(page).to have_content('1')
       end
     end
 
     it 'shows sidebar when creating new issue' do
       page.within(first('.board')) do
-        find('.board-issue-count-holder .btn').click
+        find('.issue-count-badge-add-button').click
       end
 
       page.within(first('.board-new-issue-form')) do
@@ -88,7 +88,7 @@ describe 'Issue Boards new issue', feature: true, js: true do
     end
 
     it 'does not display new issue button' do
-      expect(page).to have_selector('.board-issue-count-holder .btn', count: 0)
+      expect(page).to have_selector('.issue-count-badge-add-button', count: 0)
     end
   end
 end