Skip to content

Refactor tier badges

Sarah German requested to merge 1690-badge-refactor into main

What does this MR do and why?

Significant refactor of Docs site subscription tier badges:

  • Replaces the frontend for badges entirely. We retire badges.js and all the custom badge-related CSS in favor of a smaller Vue component that uses GlBadge from GitLab UI.
  • Adds Product feature status (Experiment, Beta) as a badge type (gitlab#406224 (moved)).
  • Adds a YAML file to define badges and their attributes (tooltip text, labels, links).
  • Badges that exist in regular content (not headings) are now visible without having to hover on the "info" icon (#1251 (closed)). These are displayed a bit smaller than heading badges.
  • Copy edits to the badge tooltips, and removing some tooltips, per guidance from Suzanne. Tooltips and links for badges are now options that can be edited via the YAML file.

Why

We've been asked to add new badges and badge types, but our existing code was hard to extend, used a lot of jQuery, and was not using GitLab UI badges. Badge attributes (like tooltip or label) now have a 1:1 relationship with a badge, rather than being determined by the combination of badges on a page. This allows us to add (or remove!) badges without having to also change every permutation of badge combinations they belong to.

Closes

Screenshots, screen recordings, or links to review app

Before After
image image
image image
image image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Compile and view the site: make view
  3. Browse around and check out the badges.

Pages with a few different badges:

  1. Try adding a product status badge. Add **(BETA)** onto a heading on content/archives/index.md as an example, and recompile the site (make compile). You should see the new badge on the Archives page, http://localhost:3000/archives/, alongside the heading you added it to.

Merge request 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 Sarah German

Merge request reports