Skip to content

Update Haml breadcrumbs to use GlBreadcrumbs styles

Thomas Hutterer requested to merge thutterer/breadcrumbs-visual-tweak into master

What does this MR do and why?

Update Haml breadcrumbs to use GlBreadcrumbs styles.

Before this, breadcrumbs rendered directly with Haml used the old > style. Only the few pages (/projects/new and /groups/new) that already handled breadcrumbs with Vue were using the correct GlBreadrcumbs component with the / as divider.

With this MR, we mimic the new style by using the same CSS classes for Haml breadcrumb rendering.

Screenshots or screen recordings

Before After
recording_1699442304 recording_1699441887

How to set up and validate locally

  • Check a page that only renders a small number of breadcrumbs, like "Your work / Projects".
  • Check a page that renders its breadcrumbs with JS, like the "New project/group" pages.
  • Check a page that has so many breadcrumbs that the "expander" button is shown, like a deeply nested sub-sub...-sub-group.
  • 📱 Also check small screens.

👉 All breadcrumbs should now use the / style.

👉 Mobile should be functional, but doesn't have to be perfect (for many, long breadcrumbs). We still have to Breadcrumb > Explore small breakpoint behavior (gitlab-org/gitlab-services/design.gitlab.com#1562 - closed).

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Hutterer

Merge request reports