Merge branch '345475-use-gl-badge-tag' into 'master'

Use gl_badge_tag helper in gl_tab_counter_badge

See merge request gitlab-org/gitlab!75141

app/helpers/tab_helper.rb

@@ -63,6 +63,19 @@ module TabHelper
     end
   end
 
+  # Creates a <gl-badge> for use inside tabs.
+  #
+  # html_options - The html_options hash (default: {})
+  def gl_tab_counter_badge(count, html_options = {})
+    gl_badge_tag(
+      count,
+      { size: :sm },
+      html_options.merge(
+        class: ['gl-tab-counter-badge', *html_options[:class]]
+      )
+    )
+  end
+
   # Navigation link helper
   #
   # Returns an `li` element with an 'active' class if the supplied
@@ -211,12 +224,3 @@ module TabHelper
     current_page?(options)
   end
 end
-
-def gl_tab_counter_badge(count, html_options = {})
-  badge_classes = %w[badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge]
-  content_tag(:span,
-    count,
-    class: [*html_options[:class], badge_classes].join(' '),
-    data: html_options[:data]
-  )
-end

spec/helpers/tab_helper_spec.rb

@@ -161,18 +161,24 @@ RSpec.describe TabHelper do
 
   describe 'gl_tab_counter_badge' do
     it 'creates a tab counter badge' do
-      expect(gl_tab_counter_badge(1)).to eq('<span class="badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge">1</span>')
+      expect(helper.gl_tab_counter_badge(1)).to eq(
+        '<span class="gl-badge badge badge-pill badge-muted sm gl-tab-counter-badge">1</span>'
+      )
     end
 
     context 'with extra classes' do
       it 'creates a tab counter badge with the correct class attribute' do
-        expect(gl_tab_counter_badge(1, { class: 'js-test' })).to eq('<span class="js-test badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge">1</span>')
+        expect(helper.gl_tab_counter_badge(1, { class: 'js-test' })).to eq(
+          '<span class="gl-badge badge badge-pill badge-muted sm gl-tab-counter-badge js-test">1</span>'
+        )
       end
     end
 
     context 'with data attributes' do
       it 'creates a tab counter badge with the data attributes' do
-        expect(gl_tab_counter_badge(1, { data: { some_attribute: 'foo' } })).to eq('<span class="badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge" data-some-attribute="foo">1</span>')
+        expect(helper.gl_tab_counter_badge(1, { data: { some_attribute: 'foo' } })).to eq(
+          '<span data-some-attribute="foo" class="gl-badge badge badge-pill badge-muted sm gl-tab-counter-badge">1</span>'
+        )
       end
     end
   end