Merge branch '344390-cablett-migrate-nav-badge' into 'master'

Migrate nav badge to be pajamas compliant

See merge request gitlab-org/gitlab!77836

app/assets/stylesheets/framework/contextual_sidebar.scss

@@ -357,7 +357,9 @@
   }
 
   > li {
-    .badge.badge-pill {
+    // TODO: Remove this block once all sidebar badges use gl_badge_tag
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/350061
+    .badge.badge-pill:not(.gl-badge) {
       @include gl-rounded-lg;
       @include gl-py-1;
       @include gl-px-3;
@@ -370,7 +372,9 @@
         display: block;
       }
 
-      .badge.badge-pill {
+      // TODO: Remove this block once all sidebar badges use gl_badge_tag
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/350061
+      .badge.badge-pill:not(.gl-badge) {
         @include gl-font-weight-normal;
         color: $blue-700;
       }

app/assets/stylesheets/startup/startup-dark.scss

@@ -314,6 +314,10 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-info {
+  color: #fff;
+  background-color: #428fdc;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -372,6 +376,24 @@ h1 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.gl-badge.sm {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.gl-badge.badge-info {
+  background-color: #064787;
+  color: #9dc7f1;
+}
+a.gl-badge.badge-info.active,
+a.gl-badge.badge-info:active {
+  color: #e9f3fc;
+  background-color: #0b5cad;
+}
+a.gl-badge.badge-info: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;
 }
@@ -1367,7 +1389,7 @@ input {
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-.sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill:not(.gl-badge) {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1381,7 +1403,7 @@ input {
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-.sidebar-top-level-items > li.active .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   color: #9dc7f1;
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -295,6 +295,10 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-info {
+  color: #fff;
+  background-color: #1f75cb;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -353,6 +357,24 @@ h1 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.gl-badge.sm {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.gl-badge.badge-info {
+  background-color: #cbe2f9;
+  color: #0b5cad;
+}
+a.gl-badge.badge-info.active,
+a.gl-badge.badge-info:active {
+  color: #033464;
+  background-color: #9dc7f1;
+}
+a.gl-badge.badge-info: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;
 }
@@ -1348,7 +1370,7 @@ input {
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-.sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill:not(.gl-badge) {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1362,7 +1384,7 @@ input {
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-.sidebar-top-level-items > li.active .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   color: #0b5cad;
 }

app/views/shared/nav/_sidebar_menu.html.haml

@@ -13,7 +13,7 @@
       %span.nav-item-name{ **sidebar_menu.title_html_options }
         = sidebar_menu.title
       - if sidebar_menu.has_pill?
-        %span.badge.badge-pill.count{ **sidebar_menu.pill_html_options }
+        = gl_badge_tag({ variant: :info, size: :sm }, { class: "count #{sidebar_menu.pill_html_options[:class]}" }) do
           = number_with_delimiter(sidebar_menu.pill_count)
 
     = render partial: 'shared/nav/sidebar_submenu', locals: { sidebar_menu: sidebar_menu }

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -314,6 +314,10 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-info {
+  color: #fff;
+  background-color: #428fdc;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -372,6 +376,24 @@ h1 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.gl-badge.sm {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.gl-badge.badge-info {
+  background-color: #064787;
+  color: #9dc7f1;
+}
+a.gl-badge.badge-info.active,
+a.gl-badge.badge-info:active {
+  color: #e9f3fc;
+  background-color: #0b5cad;
+}
+a.gl-badge.badge-info: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;
 }
@@ -1367,7 +1389,7 @@ input {
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-.sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill:not(.gl-badge) {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1381,7 +1403,7 @@ input {
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-.sidebar-top-level-items > li.active .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   color: #9dc7f1;
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -295,6 +295,10 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-info {
+  color: #fff;
+  background-color: #1f75cb;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -353,6 +357,24 @@ h1 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.gl-badge.sm {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.gl-badge.badge-info {
+  background-color: #cbe2f9;
+  color: #0b5cad;
+}
+a.gl-badge.badge-info.active,
+a.gl-badge.badge-info:active {
+  color: #033464;
+  background-color: #9dc7f1;
+}
+a.gl-badge.badge-info: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;
 }
@@ -1348,7 +1370,7 @@ input {
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-.sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill:not(.gl-badge) {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1362,7 +1384,7 @@ input {
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-.sidebar-top-level-items > li.active .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill:not(.gl-badge) {
   font-weight: 400;
   color: #0b5cad;
 }