Donor badge experiment: UI polishing - donor badge icon
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Jun 2 2026, 3:07 PM

Project Tags

Referenced Files

	F87829847: T427933_beta_AC1_1.png
	Jun 11 2026, 4:37 AM

Subscribers

Description

Background

With the experiment setup in, there was something ignored in the handover.
We're not relying on the Cdx Heart Icon, we're relying on a custom SVG.

Goal

Implement the heart icon as provided in the static HTML in the handover.

Engineering notes

We can't rely on Cdx icon mixin as we're dealing with a multi-color SVG.

This needs to be done via background-image.
The accompanying data URI

url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="32" fill="none" viewBox="0 0 35 32"><path fill="white" d="M10.35 1C5.25 1 1.09 5.8 1 11.17v.6C1.52 24.7 15.72 30.33 17.5 31c1.78-.66 15.98-6.3 16.5-19.24v-.59C33.9 5.8 29.74 1 24.65 1c-2.87 0-5.4 1.04-7.15 3.28C15.75 2.04 13.22 1 10.35 1"/><path fill="rgb(215,64,50)" d="M11.63 4.33c-4 0-7.26 3.67-7.33 7.8v.44c.4 9.91 11.54 14.23 12.93 14.74 1.4-.5 12.53-4.83 12.94-14.74v-.45c-.08-4.12-3.34-7.79-7.33-7.79a7.3 7.3 0 0 0-5.6 2.92 7.3 7.3 0 0 0-5.61-2.92"/><path fill="white" d="M22.15 10.5v.31q-.62.11-.94.4c-.3.28-.66.7-.9 1.28l-4.8 9.9h-.32l-4.82-10.03c-.22-.51-.53-.83-.62-.94a2 2 0 0 0-.53-.41q-.32-.15-.85-.2v-.31h4.69v.31c-.54.05-.8.14-.96.28a.6.6 0 0 0-.24.5q0 .43.4 1.34l3.55 6.81 3.48-6.73c.27-.66.5-1.12.5-1.38q0-.24-.25-.47a1.3 1.3 0 0 0-.76-.32l-.14-.03v-.31z"/><path fill="white" d="M26.28 10.5v.31q-.62.11-.94.4c-.3.28-.66.7-.9 1.28l-4.21 9.9h-.32l-4.45-10.03c-.23-.51-.53-.83-.63-.94a2 2 0 0 0-.53-.41c-.2-.1-.4-.17-.75-.2v-.31h4.6v.31c-.55.05-.8.14-.97.28a.6.6 0 0 0-.24.5q0 .43.4 1.34l3.19 6.81 2.9-6.73c.26-.66.49-1.12.49-1.38q0-.24-.25-.47a2 2 0 0 0-.85-.32l-.15-.03v-.31z"/></svg>' )

Acceptance criteria for done

Implement custom donor badge SVG
Ensure that button styles are custom and not MinervaNeue menu buttons

BDD

Feature: Custom donor badge icon and button

  Scenario: Badge uses the custom multi-color SVG
    Given the donor badge is shown on a treatment pageview
    When I inspect the badge icon element
    Then its background-image is a data:image/svg+xml URI containing the custom multi-color heart
    And it is not the Codex Heart icon

  Scenario: Badge button is custom
    When I inspect the badge button
    Then it uses custom Codex button styling, not MinervaNeue menu-button classes

Test Plan

Test Case 1: Custom SVG icon
In a treatment with the badge visible, read getComputedStyle('.minerva-icon--badge').backgroundImage.
AC1: It is a data:image/svg+xml URI containing the custom heart (red rgb(215,64,50), viewBox 0 0 35 32); it is NOT the Cdx Heart icon.

Test Case 2: Custom button
Inspect the badge button (#minerva-badge) classes.
AC2: Custom Codex button (cdx-button…), not MinervaNeue menu-button classes (minerva-icon-only-button / mw-ui-icon-element).

Test Results

AC	Status	Details for test run T427933#12008083
1	✅	.minerva-icon--badge background-image is data:image/svg+xml with custom red rgb(215,64,50) + viewBox 0 0 35 32 (len 1217); not Cdx heart — see T427933_beta_AC1_1.png
2	✅	#minerva-badge uses cdx-button cdx-button--size-large cdx-button--icon-only cdx-button--weight-quiet; no MinervaNeue menu-button classes

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Donor Delight Badge: Use fully fledged icon	VolkerE	mediawiki/extensions/WikimediaCustomizations	master	+20 -2

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	Volker_E	T424069 [EPIC] WE 3.5.5 Donor badge experiment
Resolved	Volker_E	T425450 Donor badge experiment: Bug bash
Resolved	Volker_E	T427933 Donor badge experiment: UI polishing - donor badge icon

Event Timeline

Volker_E created this task.Jun 2 2026, 3:07 PM

Jdlrobson-WMF moved this task from Incoming to Needs refinement on the Reader Experience Team board.Jun 2 2026, 4:54 PM

HFan-WMF triaged this task as Medium priority.Jun 2 2026, 5:37 PM

HFan-WMF moved this task from Needs refinement to REx Sprint 21 [Q4 May 19 - Jun 1] on the Reader Experience Team board.

HFan-WMF edited projects, added: Reader Experience Team (REx Sprint 21 [Q4 May 19 - Jun 1]); removed: Reader Experience Team.

HFan-WMF moved this task from REx Sprint 21 [Q4 May 19 - Jun 1] to REx Sprint 22 [Q4 Jun 2 - Jun 15] on the Reader Experience Team board.

HFan-WMF edited projects, added: Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]); removed: Reader Experience Team (REx Sprint 21 [Q4 May 19 - Jun 1]).

Jdlrobson-WMF moved this task from Backlog to WE3.5.5 Offer logged-out donors persistent Thank You badge on the FY25-26 WE3.5 Donor Identification and recognition board.Jun 3 2026, 4:34 PM

Volker_E moved this task from Ready to In progress on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Jun 8 2026, 1:52 PM

Volker_E updated the task description. (Show Details)Jun 8 2026, 4:51 PM

Change #1298853 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/WikimediaCustomizations@master] Donor Delight Badge: Use fully fledged icon

https://gerrit.wikimedia.org/r/1298853

gerritbot added a project: Patch-For-Review.Jun 8 2026, 5:27 PM

Volker_E moved this task from In progress to Needs code review on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Jun 8 2026, 5:32 PM

Jdlrobson-WMF claimed this task.Jun 8 2026, 5:38 PM

Change #1298853 merged by jenkins-bot:

[mediawiki/extensions/WikimediaCustomizations@master] Donor Delight Badge: Use fully fledged icon

https://gerrit.wikimedia.org/r/1298853

Volker to fold into QA task.

Maintenance_bot removed a project: Patch-For-Review.Jun 8 2026, 11:30 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta — en.wikipedia.beta.wmcloud.org/wiki/Paris (mobile/Minerva, logged out, treatment-b-simple)
OS: macOS Tahoe 26.x
Browser: Chrome Canary (latest as of test date)
Device: MS
Emulated Device: iPhone 17 Pro Max

Test Case 1: Custom SVG icon
✅ AC1: getComputedStyle(".minerva-icon--badge").backgroundImage is a data:image/svg+xml URI (length ~1217) containing the custom multi-color heart — custom red fill rgb(215,64,50) and the handover viewBox "0 0 35 32". It is NOT the Codex Heart icon.

Test Case 2: Custom button
✅ AC2: The badge button (#minerva-badge) carries custom Codex classes: cdx-button cdx-button--size-large cdx-button--icon-only cdx-button--weight-quiet. No MinervaNeue menu-button classes (minerva-icon-only-button / mw-ui-icon-element) are present.