Update Haml breadcrumbs to use GlBreadcrumbs styles

Changelog: changed

app/assets/javascripts/breadcrumb.js

@@ -23,11 +23,11 @@ export default () => {
     topLevelLinks.forEach((el) => addTooltipToEl(el));
 
     $expanderBtn.on('click', () => {
-      const detailItems = $('.breadcrumbs-detail-item');
+      const detailItems = $('.gl-breadcrumb-item');
       const hiddenClass = 'gl-display-none!';
 
       $.each(detailItems, (_key, item) => {
-        $(item).toggleClass(hiddenClass);
+        $(item).removeClass(hiddenClass);
       });
 
       // remove the ellipsis

app/assets/stylesheets/framework/header.scss

@@ -260,12 +260,6 @@
   @media (prefers-reduced-motion: no-preference) {
     transition: left $gl-transition-duration-medium, right $gl-transition-duration-medium;
   }
-
-  .breadcrumbs-list {
-    @include media-breakpoint-down(xs) {
-      flex-wrap: nowrap;
-    }
-  }
 }
 
 .breadcrumbs {
@@ -280,59 +274,6 @@
     border-radius: 50%;
     vertical-align: sub;
   }
-
-  .text-expander {
-    margin-left: 0;
-    margin-right: 2px;
-
-    > i {
-      position: relative;
-      top: 1px;
-    }
-  }
-}
-
-.breadcrumbs-list {
-  display: flex;
-  margin-bottom: 0;
-  line-height: 16px;
-
-  @include media-breakpoint-down(xs) {
-    flex-wrap: wrap;
-  }
-
-  > li {
-    display: flex;
-    align-items: center;
-    position: relative;
-    min-width: 0;
-    padding: 2px 0;
-
-    &:not(:last-child) {
-      padding-right: 20px;
-    }
-
-    &:last-child {
-      > a {
-        font-weight: 600;
-        line-height: 16px;
-        color: $gl-text-color;
-      }
-    }
-
-    > a {
-      font-size: 12px;
-      color: currentColor;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 0 1 auto;
-    }
-
-    &:last-of-type > .breadcrumbs-list-angle {
-      display: none;
-    }
-  }
 }
 
 .breadcrumb-item-text {
@@ -343,20 +284,6 @@
   }
 }
 
-.breadcrumbs-list-angle {
-  position: absolute;
-  right: 7px;
-  top: 50%;
-  color: $gl-text-color-tertiary;
-  transform: translateY(-50%);
-}
-
-.breadcrumbs-extra {
-  display: flex;
-  flex: 0 0 auto;
-  margin-left: auto;
-}
-
 @include media-breakpoint-down(xs) {
   .navbar-gitlab.legacy-top-bar .container-fluid {
     font-size: 18px;

app/helpers/breadcrumbs_helper.rb

@@ -22,9 +22,7 @@ def breadcrumb_title(title)
   end
 
   def breadcrumb_list_item(link)
-    content_tag "li" do
-      link + sprite_icon("chevron-lg-right", size: 8, css_class: "breadcrumbs-list-angle")
-    end
+    content_tag :li, link, class: 'gl-breadcrumb-item'
   end
 
   def add_to_breadcrumb_collapsed_links(link, location: :before)

app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml

@@ -2,8 +2,8 @@
 - unless @skip_current_level_breadcrumb
   - push_to_schema_breadcrumb(@breadcrumb_title, breadcrumb_title_link)
 
-%nav.breadcrumbs{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
-  %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list
+%nav.breadcrumbs.gl-breadcrumbs{ 'aria-label': _('Breadcrumbs'), data: { testid: 'breadcrumb-links' } }
+  %ul.breadcrumb.gl-breadcrumb-list.js-breadcrumbs-list
     - unless hide_top_links
       = header_title
     - if @breadcrumbs_extra_links
@@ -11,8 +11,8 @@
         = breadcrumb_list_item link_to(extra[:text], extra[:link])
     = render "layouts/nav/breadcrumbs/collapsed_inline_list", location: :after
     - unless @skip_current_level_breadcrumb
-      %li{ data: { testid: 'breadcrumb-current-link' } }
-        = link_to @breadcrumb_title, breadcrumb_title_link
+      %li.gl-breadcrumb-item{ data: { testid: 'breadcrumb-current-link' } }
+        = link_to(@breadcrumb_title, breadcrumb_title_link)
   -# haml-lint:disable InlineJavaScript
   %script{ type: 'application/ld+json' }
     :plain

app/views/layouts/nav/breadcrumbs/_collapsed_inline_list.html.haml

 - dropdown_location = local_assigns.fetch(:location, nil)
 - button_tooltip = local_assigns.fetch(:title, _("Show all breadcrumbs"))
 - if defined?(@breadcrumb_collapsed_links) && @breadcrumb_collapsed_links.key?(dropdown_location)
-  %li.expander
+  %li.expander.gl-breadcrumb-item
     %button.text-expander.has-tooltip.js-breadcrumbs-collapsed-expander{ type: "button", data: { container: "body" }, "aria-label": button_tooltip, title: button_tooltip }
       = sprite_icon("ellipsis_h", size: 12)
-    = sprite_icon("chevron-lg-right", size: 8, css_class: "breadcrumbs-list-angle")
   - @breadcrumb_collapsed_links[dropdown_location].each_with_index do |link, index|
-    %li{ :class => "gl-display-none! breadcrumbs-detail-item" }
+    %li.gl-breadcrumb-item{ :class => "gl-display-none!" }
       = link
-      = sprite_icon("chevron-lg-right", size: 8, css_class: "breadcrumbs-list-angle")

ee/spec/features/admin/geo/admin_geo_nodes_spec.rb

@@ -18,7 +18,7 @@ def expect_no_fields(site_fields)
   end
 
   def expect_breadcrumb(text)
-    breadcrumbs = page.all(:css, '.breadcrumbs-list>li')
+    breadcrumbs = page.all(:css, '.gl-breadcrumb-list > li')
     expect(breadcrumbs.length).to eq(3)
     expect(breadcrumbs[0].text).to eq('Admin Area')
     expect(breadcrumbs[1].text).to eq('Geo Sites')

spec/features/explore/user_explores_projects_spec.rb

@@ -25,7 +25,7 @@
 
     describe 'breadcrumbs' do
       it 'has "Explore" as its root breadcrumb' do
-        within '.breadcrumbs-list li:first' do
+        within '.gl-breadcrumb-list li:first' do
           expect(page).to have_link('Explore', href: explore_root_path)
         end
       end

spec/features/projects/commits/user_browses_commits_spec.rb

@@ -42,8 +42,8 @@
   it 'renders breadcrumbs on specific commit path' do
     visit project_commits_path(project, project.repository.root_ref + '/files/ruby/regex.rb', limit: 5)
 
-    expect(page).to have_selector('ul.breadcrumb')
-      .and have_selector('ul.breadcrumb a', count: 4)
+    expect(page).to have_selector('#content-body ul.breadcrumb')
+      .and have_selector('#content-body ul.breadcrumb a', count: 4)
   end
 
   it 'renders diff links to both the previous and current image', :js do

spec/helpers/groups_helper_spec.rb

@@ -93,7 +93,7 @@
       shared_examples 'correct ancestor order' do
         it 'outputs the groups in the correct order' do
           expect(subject)
-            .to match(%r{<li><a.*>#{deep_nested_group.name}.*</li>.*<a.*>#{very_deep_nested_group.name}</a>}m)
+            .to match(%r{<li.*><a.*>#{deep_nested_group.name}.*</li>.*<a.*>#{very_deep_nested_group.name}</a>}m)
         end
       end