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

Loading