Make badges in the header Pajamas compliant

This migrates badges in layouts/header/_default.html.haml to the shared gl_badge util. This affects the following badges: * Canary badge * Issue count * MR total count * Assigned MRs count * Review requests count * Todos count

Make badges in the header Pajamas compliant
This migrates badges in layouts/header/_default.html.haml to the shared gl_badge util. This affects the following badges: * Canary badge * Issue count * MR total count * Assigned MRs count * Review requests count * Todos count
8b1bbc74 · Paul Gascou-Vaillancourt · Olena Horal-Koretska · e501a61a · 8b1bbc74 · 8b1bbc74
Commit 8b1bbc74 authored Feb 07, 2022 by Paul Gascou-Vaillancourt Committed by Olena Horal-Koretska Feb 07, 2022
14 changed files
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -415,49 +415,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
  }
 }

-.title-container,
-.navbar-nav {
-  .badge.badge-pill:not(.gl-badge) {
-    position: inherit;
-    font-weight: $gl-font-weight-normal;
-    margin-left: -6px;
-    font-size: 11px;
-    color: var(--gray-950, $white);
-    padding: 0 5px;
-    line-height: 12px;
-    border-radius: 7px;
-    box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
-
-    &.green-badge {
-      background-color: var(--green-400, $green-400);
-    }
-
-    &.merge-requests-count {
-      background-color: var(--orange-400, $orange-400);
-    }
-
-    &.todos-count {
-      background-color: var(--blue-400, $blue-400);
-    }
-  }
-
-  .canary-badge {
-    .badge {
-      font-size: $gl-font-size-small;
-      line-height: $gl-line-height;
-      padding: 0 $grid-size;
-    }
-
-    &:hover {
-      text-decoration: none;
-
-      .badge {
-        text-decoration: none;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(xs) {
  .navbar-gitlab .container-fluid {
    font-size: 18px;

--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -42,12 +42,6 @@ $status-box-line-height: 26px;
 }

 .milestone-content {
-  .issues-count {
-    margin-right: 17px;
-    float: right;
-    width: 105px;
-  }
-
  .issuable-row {
    span {
      a {

--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -7,12 +7,8 @@ body.gl-dark {
  --gray-100: #404040;
  --gray-600: #bfbfbf;
  --gray-900: #fafafa;
-  --gray-950: #fff;
  --green-100: #0d532a;
-  --green-400: #108548;
  --green-700: #91d4a8;
-  --blue-400: #1f75cb;
-  --orange-400: #ab6100;
  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
  --gl-text-color: #fafafa;
  --border-color: #4f4f4f;
@@ -314,10 +310,18 @@ h1 {
  padding-left: 0.6em;
  border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #2da160;
+}
 .badge-info {
  color: #fff;
  background-color: #428fdc;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #c17d10;
+}
 .bg-transparent {
  background-color: transparent !important;
 }
@@ -394,6 +398,34 @@ a.gl-badge.badge-info:active {
    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
  outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #0d532a;
+  color: #91d4a8;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #ecf4ee;
+  background-color: #24663b;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
+    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #703800;
+  color: #e9be74;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #fdf1dd;
+  background-color: #8f4700;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
+    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
  top: 0;
 }
@@ -920,36 +952,6 @@ input {
  line-height: 18px;
  margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.gl-badge),
-.navbar-nav .badge.badge-pill:not(.gl-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #333);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container .badge.badge-pill:not(.gl-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
-  background-color: var(--green-400, #108548);
-}
-.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
-  background-color: var(--orange-400, #ab6100);
-}
-.title-container .badge.badge-pill:not(.gl-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
-  background-color: var(--blue-400, #1f75cb);
-}
-.title-container .canary-badge .badge,
-.navbar-nav .canary-badge .badge {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 0.5rem;
-}
 @media (max-width: 575.98px) {
  .navbar-gitlab .container-fluid {
    font-size: 18px;
@@ -2022,18 +2024,9 @@ body.gl-dark {
  white-space: nowrap;
  width: 1px;
 }
-.gl-bg-green-500 {
-  background-color: #2da160;
-}
 .gl-border-none\! {
  border-style: none !important;
 }
-.gl-rounded-pill {
-  border-radius: 0.75rem;
-}
-.gl-text-white {
-  color: #333;
-}
 .gl-display-none {
  display: none;
 }
@@ -2055,9 +2048,8 @@ body.gl-dark {
 .gl-pr-2 {
  padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
  margin-left: 0.5rem;

--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -295,10 +295,18 @@ h1 {
  padding-left: 0.6em;
  border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #108548;
+}
 .badge-info {
  color: #fff;
  background-color: #1f75cb;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #ab6100;
+}
 .bg-transparent {
  background-color: transparent !important;
 }
@@ -375,6 +383,34 @@ a.gl-badge.badge-info:active {
    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
  outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #c3e6cd;
+  color: #24663b;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #0a4020;
+  background-color: #91d4a8;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #f5d9a8;
+  color: #8f4700;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #5c2900;
+  background-color: #e9be74;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
  top: 0;
 }
@@ -901,36 +937,6 @@ input {
  line-height: 18px;
  margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.gl-badge),
-.navbar-nav .badge.badge-pill:not(.gl-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #fff);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container .badge.badge-pill:not(.gl-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
-  background-color: var(--green-400, #2da160);
-}
-.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
-  background-color: var(--orange-400, #c17d10);
-}
-.title-container .badge.badge-pill:not(.gl-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
-  background-color: var(--blue-400, #428fdc);
-}
-.title-container .canary-badge .badge,
-.navbar-nav .canary-badge .badge {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 0.5rem;
-}
 @media (max-width: 575.98px) {
  .navbar-gitlab .container-fluid {
    font-size: 18px;
@@ -1691,18 +1697,9 @@ svg.s16 {
  white-space: nowrap;
  width: 1px;
 }
-.gl-bg-green-500 {
-  background-color: #108548;
-}
 .gl-border-none\! {
  border-style: none !important;
 }
-.gl-rounded-pill {
-  border-radius: 0.75rem;
-}
-.gl-text-white {
-  color: #fff;
-}
 .gl-display-none {
  display: none;
 }
@@ -1724,9 +1721,8 @@ svg.s16 {
 .gl-pr-2 {
  padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
  margin-left: 0.5rem;

--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -16,7 +16,7 @@
                = logo_text
          - if Gitlab.com_and_canary?
            = link_to Gitlab::Saas.canary_toggle_com_url, class: 'canary-badge bg-transparent', data: { qa_selector: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer' do
-              %span.gl-badge.gl-bg-green-500.gl-text-white.gl-rounded-pill.gl-font-weight-bold.gl-py-1
+              = gl_badge_tag({ variant: :success }) do
                = _('Next')

        - if current_user
@@ -64,7 +64,7 @@
                container: 'body' } do
                = sprite_icon('issues')
                - issues_count = assigned_issuables_count(:issues)
-                %span.badge.badge-pill.issues-count.green-badge{ class: ('hidden' if issues_count == 0) }
+                = gl_badge_tag({ size: :sm, variant: :success }, { class: "gl-ml-n2 #{(' gl-display-none' if issues_count == 0)}", "aria-label": n_("%d assigned issue", "%d assigned issues", issues_count) % issues_count }) do
                  = number_with_delimiter(issues_count)
          - if header_link?(:merge_requests)
            = nav_link(path: 'dashboard#merge_requests', html_options: { class: "user-counter dropdown" }) do
@@ -77,7 +77,7 @@
                track_property: 'navigation',
                container: 'body' } do
                = sprite_icon('git-merge')
-                %span.badge.badge-pill.merge-requests-count.js-merge-requests-count{ class: ('hidden' if user_merge_requests_counts[:total] == 0) }
+                = gl_badge_tag({ size: :sm, variant: :warning }, { class: "js-merge-requests-count gl-ml-n2#{(' gl-display-none' if user_merge_requests_counts[:total] == 0)}", "aria-label": n_("%d merge request", "%d merge requests", user_merge_requests_counts[:total]) % user_merge_requests_counts[:total] }) do
                  = number_with_delimiter(user_merge_requests_counts[:total])
                = sprite_icon('chevron-down', css_class: 'caret-down gl-mx-0!')
              .dropdown-menu.dropdown-menu-right
@@ -87,12 +87,12 @@
                  %li
                    = link_to assigned_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
                      = _('Assigned to you')
-                      %span.badge.gl-badge.badge-pill.badge-muted.merge-request-badge.gl-ml-auto.js-assigned-mr-count{ class: "" }
+                      = gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-assigned-mr-count gl-ml-auto" }) do
                        = user_merge_requests_counts[:assigned]
                  %li
                    = link_to reviewer_mrs_dashboard_path, class: 'gl-display-flex! gl-align-items-center js-prefetch-document' do
                      = _('Review requests for you')
-                      %span.badge.gl-badge.badge-pill.badge-muted.merge-request-badge.gl-ml-auto.js-reviewer-mr-count{ class: "" }
+                      = gl_badge_tag({ variant: :neutral, size: :sm }, { class: "js-reviewer-mr-count gl-ml-auto" }) do
                        = user_merge_requests_counts[:review_requested]
          - if header_link?(:todos)
            = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
@@ -103,7 +103,9 @@
                track_property: 'navigation',
                container: 'body' } do
                = sprite_icon('todo-done')
-                %span.badge.badge-pill.todos-count.js-todos-count{ class: ('hidden' if todos_pending_count == 0) }
+                -# The todos' counter badge's visibility is being toggled by adding or removing the .hidden class in Js.
+                -# We'll eventually migrate to .gl-display-none: https://gitlab.com/gitlab-org/gitlab/-/issues/351792.
+                = gl_badge_tag({ size: :sm, variant: :info }, { class: "js-todos-count gl-ml-n2#{(' hidden' if todos_pending_count == 0)}", "aria-label": _("Todos count") }) do
                  = todos_count_format(todos_pending_count)
          %li.nav-item.header-help.dropdown.d-none.d-md-block{ **tracking_attrs('main_navigation', 'click_question_mark_link', 'navigation') }
            = link_to help_path, class: 'header-help-dropdown-toggle gl-relative', data: { toggle: "dropdown" } do

--- a/ee/app/assets/stylesheets/startup/startup-dark.scss
+++ b/ee/app/assets/stylesheets/startup/startup-dark.scss
@@ -7,12 +7,8 @@ body.gl-dark {
  --gray-100: #404040;
  --gray-600: #bfbfbf;
  --gray-900: #fafafa;
-  --gray-950: #fff;
  --green-100: #0d532a;
-  --green-400: #108548;
  --green-700: #91d4a8;
-  --blue-400: #1f75cb;
-  --orange-400: #ab6100;
  --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
  --gl-text-color: #fafafa;
  --border-color: #4f4f4f;
@@ -314,10 +310,18 @@ h1 {
  padding-left: 0.6em;
  border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #2da160;
+}
 .badge-info {
  color: #fff;
  background-color: #428fdc;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #c17d10;
+}
 .bg-transparent {
  background-color: transparent !important;
 }
@@ -394,6 +398,34 @@ a.gl-badge.badge-info:active {
    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
  outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #0d532a;
+  color: #91d4a8;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #ecf4ee;
+  background-color: #24663b;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
+    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #703800;
+  color: #e9be74;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #fdf1dd;
+  background-color: #8f4700;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
+    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
  top: 0;
 }
@@ -920,36 +952,6 @@ input {
  line-height: 18px;
  margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.gl-badge),
-.navbar-nav .badge.badge-pill:not(.gl-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #333);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container .badge.badge-pill:not(.gl-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
-  background-color: var(--green-400, #108548);
-}
-.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
-  background-color: var(--orange-400, #ab6100);
-}
-.title-container .badge.badge-pill:not(.gl-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
-  background-color: var(--blue-400, #1f75cb);
-}
-.title-container .canary-badge .badge,
-.navbar-nav .canary-badge .badge {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 0.5rem;
-}
 @media (max-width: 575.98px) {
  .navbar-gitlab .container-fluid {
    font-size: 18px;
@@ -2022,18 +2024,9 @@ body.gl-dark {
  white-space: nowrap;
  width: 1px;
 }
-.gl-bg-green-500 {
-  background-color: #2da160;
-}
 .gl-border-none\! {
  border-style: none !important;
 }
-.gl-rounded-pill {
-  border-radius: 0.75rem;
-}
-.gl-text-white {
-  color: #333;
-}
 .gl-display-none {
  display: none;
 }
@@ -2055,9 +2048,8 @@ body.gl-dark {
 .gl-pr-2 {
  padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
  margin-left: 0.5rem;

--- a/ee/app/assets/stylesheets/startup/startup-general.scss
+++ b/ee/app/assets/stylesheets/startup/startup-general.scss
@@ -295,10 +295,18 @@ h1 {
  padding-left: 0.6em;
  border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #108548;
+}
 .badge-info {
  color: #fff;
  background-color: #1f75cb;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #ab6100;
+}
 .bg-transparent {
  background-color: transparent !important;
 }
@@ -375,6 +383,34 @@ a.gl-badge.badge-info:active {
    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
  outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #c3e6cd;
+  color: #24663b;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #0a4020;
+  background-color: #91d4a8;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #f5d9a8;
+  color: #8f4700;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #5c2900;
+  background-color: #e9be74;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
  top: 0;
 }
@@ -901,36 +937,6 @@ input {
  line-height: 18px;
  margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill:not(.gl-badge),
-.navbar-nav .badge.badge-pill:not(.gl-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #fff);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container .badge.badge-pill:not(.gl-badge).green-badge,
-.navbar-nav .badge.badge-pill:not(.gl-badge).green-badge {
-  background-color: var(--green-400, #2da160);
-}
-.title-container .badge.badge-pill:not(.gl-badge).merge-requests-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).merge-requests-count {
-  background-color: var(--orange-400, #c17d10);
-}
-.title-container .badge.badge-pill:not(.gl-badge).todos-count,
-.navbar-nav .badge.badge-pill:not(.gl-badge).todos-count {
-  background-color: var(--blue-400, #428fdc);
-}
-.title-container .canary-badge .badge,
-.navbar-nav .canary-badge .badge {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 0.5rem;
-}
 @media (max-width: 575.98px) {
  .navbar-gitlab .container-fluid {
    font-size: 18px;
@@ -1691,18 +1697,9 @@ svg.s16 {
  white-space: nowrap;
  width: 1px;
 }
-.gl-bg-green-500 {
-  background-color: #108548;
-}
 .gl-border-none\! {
  border-style: none !important;
 }
-.gl-rounded-pill {
-  border-radius: 0.75rem;
-}
-.gl-text-white {
-  color: #fff;
-}
 .gl-display-none {
  display: none;
 }
@@ -1724,9 +1721,8 @@ svg.s16 {
 .gl-pr-2 {
  padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
  margin-left: 0.5rem;

--- a/ee/spec/features/epics/todo_spec.rb
+++ b/ee/spec/features/epics/todo_spec.rb
@@ -21,7 +21,7 @@ RSpec.describe 'Manually create a todo item from epic', :js do
      expect(page).to have_content 'Mark as done'
    end

-    page.within '.header-content .todos-count' do
+    page.within ".header-content span[aria-label='#{_('Todos count')}']" do
      expect(page).to have_content '1'
    end
  end
@@ -31,8 +31,8 @@ RSpec.describe 'Manually create a todo item from epic', :js do
      click_button 'Add a to do'
    end

-    expect(page).to have_selector('.todos-count', visible: true)
-    page.within '.header-content .todos-count' do
+    expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: true)
+    page.within ".header-content span[aria-label='#{_('Todos count')}']" do
      expect(page).to have_content '1'
    end

@@ -40,6 +40,6 @@ RSpec.describe 'Manually create a todo item from epic', :js do
      click_button 'Mark as done'
    end

-    expect(page).to have_selector('.todos-count', visible: false)
+    expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: false)
  end
 end
--- a/ee/spec/features/epics/update_epic_spec.rb
+++ b/ee/spec/features/epics/update_epic_spec.rb
@@ -99,7 +99,7 @@ RSpec.describe 'Update Epic', :js do

        visit dashboard_todos_path

-        page.within '.header-content .todos-count' do
+        page.within ".header-content span[aria-label='#{_('Todos count')}']" do
          expect(page).to have_content '1'
        end
        expect(page).to have_selector('.todos-list .todo', count: 1)

--- a/ee/spec/support/shared_examples/features/iteration_report_group_by_label_shared_examples.rb
+++ b/ee/spec/support/shared_examples/features/iteration_report_group_by_label_shared_examples.rb
@@ -13,27 +13,31 @@ RSpec.shared_examples 'iteration report group by label' do
  end

  it 'groups by label', :aggregate_failures do
-    expect(page).to have_button('Collapse issues')
-    expect(page).to have_css('.gl-label', text: label1.title)
-    expect(page).to have_css('.gl-badge', text: 2)
-
-    expect(page).to have_content(issue.title)
-    expect(page).to have_content(assigned_issue.title)
-    expect(page).to have_no_content(closed_issue.title)
-    expect(page).to have_no_content(other_iteration_issue.title)
+    page.within('#content-body') do
+      expect(page).to have_button('Collapse issues')
+      expect(page).to have_css('.gl-label', text: label1.title)
+      expect(page).to have_css('.gl-badge', text: 2)
+
+      expect(page).to have_content(issue.title)
+      expect(page).to have_content(assigned_issue.title)
+      expect(page).to have_no_content(closed_issue.title)
+      expect(page).to have_no_content(other_iteration_issue.title)
+    end
  end

  it 'shows ungrouped issues when `Group by: None` is selected again', :aggregate_failures do
-    select 'None', from: 'Group by'
+    page.within('#content-body') do
+      select 'None', from: 'Group by'

-    expect(page).to have_no_button('Collapse issues')
-    expect(page).to have_no_css('.gl-label', text: label1.title)
-    expect(page).to have_no_css('.gl-badge', text: 2)
+      expect(page).to have_no_button('Collapse issues')
+      expect(page).to have_no_css('.gl-label', text: label1.title)
+      expect(page).to have_no_css('.gl-badge', text: 2)

-    expect(page).to have_content(issue.title)
-    expect(page).to have_content(assigned_issue.title)
-    expect(page).to have_content(closed_issue.title)
-    expect(page).to have_no_content(other_iteration_issue.title)
+      expect(page).to have_content(issue.title)
+      expect(page).to have_content(assigned_issue.title)
+      expect(page).to have_content(closed_issue.title)
+      expect(page).to have_no_content(other_iteration_issue.title)
+    end
  end

  it 'shows ungrouped issues when label `x` is clicked to remove it', :aggregate_failures do
@@ -41,13 +45,15 @@ RSpec.shared_examples 'iteration report group by label' do
      click_button 'Remove label'
    end

-    expect(page).to have_no_button('Collapse issues')
-    expect(page).to have_no_css('.gl-label', text: label1.title)
-    expect(page).to have_no_css('.gl-badge', text: 2)
+    page.within('#content-body') do
+      expect(page).to have_no_button('Collapse issues')
+      expect(page).to have_no_css('.gl-label', text: label1.title)
+      expect(page).to have_no_css('.gl-badge', text: 2)

-    expect(page).to have_content(issue.title)
-    expect(page).to have_content(assigned_issue.title)
-    expect(page).to have_content(closed_issue.title)
-    expect(page).to have_no_content(other_iteration_issue.title)
+      expect(page).to have_content(issue.title)
+      expect(page).to have_content(assigned_issue.title)
+      expect(page).to have_content(closed_issue.title)
+      expect(page).to have_no_content(other_iteration_issue.title)
+    end
  end
 end
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -146,6 +146,11 @@ msgid_plural "%d approvers (you've approved)"
 msgstr[0] ""
 msgstr[1] ""

+msgid "%d assigned issue"
+msgid_plural "%d assigned issues"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d changed file"
 msgid_plural "%d changed files"
 msgstr[0] ""
@@ -37790,6 +37795,9 @@ msgstr ""
 msgid "Today"
 msgstr ""

+msgid "Todos count"
+msgstr ""
+
 msgid "Todos|Are you looking for things to do? Take a look at %{strongStart}%{openIssuesLinkStart}open issues%{openIssuesLinkEnd}%{strongEnd}, contribute to %{strongStart}%{mergeRequestLinkStart}a merge request%{mergeRequestLinkEnd}%{mergeRequestLinkEnd}%{strongEnd}, or mention someone in a comment to automatically assign them a new to-do item."
 msgstr ""


--- a/spec/features/dashboard/issuables_counter_spec.rb
+++ b/spec/features/dashboard/issuables_counter_spec.rb
@@ -17,7 +17,7 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
  it 'reflects dashboard issues count' do
    visit issues_path

-    expect_counters('issues', '1')
+    expect_counters('issues', '1', n_("%d assigned issue", "%d assigned issues", 1) % 1)

    issue.assignees = []

@@ -26,14 +26,14 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
    travel_to(3.minutes.from_now) do
      visit issues_path

-      expect_counters('issues', '0')
+      expect_counters('issues', '0', n_("%d assigned issue", "%d assigned issues", 0) % 0)
    end
  end

  it 'reflects dashboard merge requests count' do
    visit merge_requests_path

-    expect_counters('merge_requests', '1')
+    expect_counters('merge_requests', '1', n_("%d merge request", "%d merge requests", 1) % 1)

    merge_request.update!(assignees: [])

@@ -42,7 +42,7 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
    travel_to(3.minutes.from_now) do
      visit merge_requests_path

-      expect_counters('merge_requests', '0')
+      expect_counters('merge_requests', '0', n_("%d merge request", "%d merge requests", 0) % 0)
    end
  end

@@ -54,13 +54,14 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
    merge_requests_dashboard_path(assignee_username: user.username)
  end

-  def expect_counters(issuable_type, count)
+  def expect_counters(issuable_type, count, badge_label)
    dashboard_count = find('.gl-tabs-nav li a.active')
    nav_count = find(".dashboard-shortcuts-#{issuable_type}")
-    header_count = find(".header-content .#{issuable_type.tr('_', '-')}-count")

    expect(dashboard_count).to have_content(count)
    expect(nav_count).to have_content(count)
-    expect(header_count).to have_content(count)
+    within("span[aria-label='#{badge_label}']") do
+      expect(page).to have_content(count)
+    end
  end
 end
--- a/spec/features/dashboard/merge_requests_spec.rb
+++ b/spec/features/dashboard/merge_requests_spec.rb
@@ -112,7 +112,9 @@ RSpec.describe 'Dashboard Merge Requests' do
    end

    it 'includes assigned and reviewers in badge' do
-      expect(find('.merge-requests-count')).to have_content('3')
+      within("span[aria-label='#{n_("%d merge request", "%d merge requests", 3) % 3}']") do
+        expect(page).to have_content('3')
+      end
      expect(find('.js-assigned-mr-count')).to have_content('2')
      expect(find('.js-reviewer-mr-count')).to have_content('1')
    end

--- a/spec/features/issues/todo_spec.rb
+++ b/spec/features/issues/todo_spec.rb
@@ -19,13 +19,13 @@ RSpec.describe 'Manually create a todo item from issue', :js do
      expect(page).to have_content 'Mark as done'
    end

-    page.within '.header-content .todos-count' do
+    page.within ".header-content span[aria-label='#{_('Todos count')}']" do
      expect(page).to have_content '1'
    end

    visit project_issue_path(project, issue)

-    page.within '.header-content .todos-count' do
+    page.within ".header-content span[aria-label='#{_('Todos count')}']" do
      expect(page).to have_content '1'
    end
  end
@@ -36,10 +36,10 @@ RSpec.describe 'Manually create a todo item from issue', :js do
      click_button 'Mark as done'
    end

-    expect(page).to have_selector('.todos-count', visible: false)
+    expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: false)

    visit project_issue_path(project, issue)

-    expect(page).to have_selector('.todos-count', visible: false)
+    expect(page).to have_selector(".header-content span[aria-label='#{_('Todos count')}']", visible: false)
  end
 end