Merge branch '46799-fix-tabs-bs4' into 'master'

Fix active tab styling

Closes #46799

See merge request gitlab-org/gitlab-ce!19264

app/assets/stylesheets/bootstrap_migration.scss

@@ -148,8 +148,14 @@ table {
   }
 }
 
-.nav-tabs .nav-link {
-  border: 0;
+.nav-tabs {
+  .nav-link {
+    border: 0;
+  }
+
+  .nav-item {
+    margin-bottom: 0;
+  }
 }
 
 pre code {

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -169,11 +169,14 @@
     color: $color-800;
   }
 
-  .nav-links li a.active {
-    border-bottom: 2px solid $color-500;
+  .nav-links li {
+    &.active a,
+    a.active {
+      border-bottom: 2px solid $color-500;
 
-    .badge.badge-pill {
-      font-weight: $gl-font-weight-bold;
+      .badge.badge-pill {
+        font-weight: $gl-font-weight-bold;
+      }
     }
   }
 

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -31,14 +31,15 @@
           color: $black;
         }
       }
+    }
 
-      &.active {
-        color: $black;
-        font-weight: $gl-font-weight-bold;
+    &.active a,
+    a.active {
+      color: $black;
+      font-weight: $gl-font-weight-bold;
 
-        .badge.badge-pill {
-          color: $black;
-        }
+      .badge.badge-pill {
+        color: $black;
       }
     }
   }

app/views/shared/milestones/_tabs.html.haml

@@ -5,25 +5,25 @@
   .fade-right= icon('angle-right')
   %ul.nav-links.scrolling-tabs.js-milestone-tabs.nav.nav-tabs
     - if issues_accessible
-      %li.active
-        = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
+      %li.nav-item
+        = link_to '#tab-issues', class: 'nav-link active', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
           Issues
           %span.badge.badge-pill= milestone.issues_visible_to_user(current_user).size
-      %li
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
+      %li.nav-item
+        = link_to '#tab-merge-requests', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
           Merge Requests
           %span.badge.badge-pill= milestone.merge_requests.size
     - else
-      %li.active
-        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
+      %li.nav-item
+        = link_to '#tab-merge-requests', class: 'nav-link active', 'data-toggle' => 'tab', 'data-endpoint': milestone_merge_request_tab_path(milestone) do
           Merge Requests
           %span.badge.badge-pill= milestone.merge_requests.size
-    %li
-      = link_to '#tab-participants', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
+    %li.nav-item
+      = link_to '#tab-participants', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_participants_tab_path(milestone) do
         Participants
         %span.badge.badge-pill= milestone.participants.count
-    %li
-      = link_to '#tab-labels', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
+    %li.nav-item
+      = link_to '#tab-labels', class: 'nav-link', 'data-toggle' => 'tab', 'data-endpoint': milestone_labels_tab_path(milestone) do
         Labels
         %span.badge.badge-pill= milestone.labels.count
 

spec/features/projects/milestones/milestone_spec.rb

@@ -17,8 +17,8 @@ feature 'Project milestone' do
     it 'shows issues tab' do
       within('#content-body') do
         expect(page).to have_link 'Issues', href: '#tab-issues'
-        expect(page).to have_selector '.nav-links li.active', count: 1
-        expect(find('.nav-links li.active')).to have_content 'Issues'
+        expect(page).to have_selector '.nav-links li a.active', count: 1
+        expect(find('.nav-links li a.active')).to have_content 'Issues'
       end
     end
 
@@ -44,8 +44,8 @@ feature 'Project milestone' do
     it 'hides issues tab' do
       within('#content-body') do
         expect(page).not_to have_link 'Issues', href: '#tab-issues'
-        expect(page).to have_selector '.nav-links li.active', count: 1
-        expect(find('.nav-links li.active')).to have_content 'Merge Requests'
+        expect(page).to have_selector '.nav-links li a.active', count: 1
+        expect(find('.nav-links li a.active')).to have_content 'Merge Requests'
       end
     end