Add neutral variant to approval and discussion badges

What does this MR do and why?

Adds a neutral boolean prop to three shared Vue components that render approval and unresolved-discussion counts on merge request rows. When neutral is set, they render a subtle icon plus the count as plain text instead of a coloured pill badge.

  • Adds neutral prop (default false) to approval_count.vue (CE and EE) and discussions_badge.vue
  • When neutral is true, renders a GlIcon (size 12, variant="subtle") with the count as plain text instead of the coloured GlBadge pill
  • Reuses existing i18n strings (s__('Approvals|%{count} of %{total}') and __('%{resolvedDiscussionsCount} of %{resolvableDiscussionsCount}')); no new translatable strings
  • Tooltips and the surrounding <button> wrapper are unchanged in both modes, so hover text and accessibility behaviour are identical
  • The EE approval_count.vue passes neutral through to the CE component in its fallback path
  • Prop defaults to false, so the merge request list, merge request dashboard, and dashboard search list are visually unchanged
  • No consumer sets neutral yet; the homepage widget that uses it follows in a separate merge request for #627724 (closed)

This is needed for an upcoming merge requests widget on the personal homepage, which needs these indicators in a dense, narrow card. The product designer asked for more neutral iconography there, because the coloured status badges draw more attention than the merge request title itself. Design reference: #627724 (comment 3861222279)

Screenshots or screen recordings

Before After
image.png image.png

How to set up and validate locally

  1. Checkout this branch.

  2. Run the three updated spec files:

    yarn jest spec/frontend/merge_requests/components/approval_count_spec.js ee/spec/frontend/merge_requests/components/approval_count_spec.js spec/frontend/merge_requests/list/components/discussions_badge_spec.js
  3. Confirm the new cases covering neutral rendering pass (icon name, subtle variant, text, tooltip retained).

  4. Run the consumers to confirm they are unaffected:

    yarn jest spec/frontend/merge_requests spec/frontend/merge_request_dashboard

    837 tests pass, including the new neutral cases.

  5. No UI change is visible in the running app, because nothing on master sets the neutral prop and it defaults to false.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Edited by Marco Tomasi

Merge request reports

Loading
Loading