Merge branch 'kp-update-tab-helpers' into 'master'

Update GlTab helpers

See merge request gitlab-org/gitlab!74181

app/helpers/tab_helper.rb

@@ -33,7 +33,6 @@ module TabHelper
   #   :item_active - Overrides the default state focing the "active" css classes (optional).
   #
   def gl_tab_link_to(name = nil, options = {}, html_options = {}, &block)
-    tab_class = 'nav-item'
     link_classes = %w[nav-link gl-tab-nav-item]
     active_link_classes = %w[active gl-tab-nav-item-active gl-tab-nav-item-active-indigo]
 
@@ -52,6 +51,8 @@ module TabHelper
     end
 
     html_options = html_options.except(:item_active)
+    extra_tab_classes = html_options.delete(:tab_class)
+    tab_class = %w[nav-item].push(*extra_tab_classes)
 
     content_tag(:li, class: tab_class, role: 'presentation') do
       if block_given?
@@ -215,6 +216,7 @@ 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(' ')
+    class: [*html_options[:class], badge_classes].join(' '),
+    data: html_options[:data]
   )
 end

spec/helpers/tab_helper_spec.rb

@@ -36,7 +36,15 @@ RSpec.describe TabHelper do
       expect(gl_tab_link_to('/url') { 'block content' }).to match(/block content/)
     end
 
-    it 'creates a tab with custom classes' do
+    it 'creates a tab with custom classes for enclosing list item without content block provided' do
+      expect(gl_tab_link_to('Link', '/url', { tab_class: 'my-class' })).to match(/<li class=".*my-class.*"/)
+    end
+
+    it 'creates a tab with custom classes for enclosing list item with content block provided' do
+      expect(gl_tab_link_to('/url', { tab_class: 'my-class' }) { 'Link' }).to match(/<li class=".*my-class.*"/)
+    end
+
+    it 'creates a tab with custom classes for anchor element' do
       expect(gl_tab_link_to('Link', '/url', { class: 'my-class' })).to match(/<a class=".*my-class.*"/)
     end
 
@@ -161,5 +169,11 @@ RSpec.describe TabHelper 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>')
       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>')
+      end
+    end
   end
 end