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
neutralprop (defaultfalse) toapproval_count.vue(CE and EE) anddiscussions_badge.vue - When
neutralis true, renders aGlIcon(size 12,variant="subtle") with the count as plain text instead of the colouredGlBadgepill - 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.vuepassesneutralthrough 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
neutralyet; 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 |
|---|---|
![]() |
![]() |
How to set up and validate locally
-
Checkout this branch.
-
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 -
Confirm the new cases covering neutral rendering pass (icon name, subtle variant, text, tooltip retained).
-
Run the consumers to confirm they are unaffected:
yarn jest spec/frontend/merge_requests spec/frontend/merge_request_dashboard837 tests pass, including the new neutral cases.
-
No UI change is visible in the running app, because nothing on
mastersets theneutralprop and it defaults tofalse.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist.

