Donor badge experiment: Prefix remaining CSS classes
Closed, ResolvedPublic1 Estimated Story Points
Actions

Description

Background

There are a few remaining unprefixed CSS classes: is-hidden, is-visible, is-cooldown and fly-heart-box/fly-heart. These were leftovers from the static HTML and should have already been transformed in the original patch adding to WikimediaCustomizations.

Goal

In order to follow our CSS coding guidelines and not risk side-effects, let's prefix them.

Acceptance criteria for done

No unprefixed class is remaining in 'styles.less'

BDD

Feature: Donor badge CSS classes are namespaced

  Scenario: No unprefixed leftover classes ship in the badge stylesheet
    Given the donor badge styles are loaded on a treatment pageview
    When I inspect the donor badge CSS rules
    Then is-hidden, is-visible, is-cooldown, fly-heart-box and fly-heart
    And each appears only in its ext-wc- prefixed form
    And no bare (unprefixed) selector for any of them is present

Test Plan

Test Case 1: Leftover classes are prefixed with ext-wc-
On a treatment-b-simple pageview, scan document.styleSheets cssRules for each token.
AC1: is-hidden, is-visible, is-cooldown, fly-heart-box, fly-heart appear as .ext-wc-<token> selectors.
AC2: zero bare (unprefixed) selectors for any of those tokens are present in the loaded stylesheet.

Test Results

AC	Status	Details for test run T427956#12008055
1	✅	all five tokens present only as ext-wc- selectors — see T427956_beta_AC1_1.png
2	✅	0 bare selectors for is-hidden/is-visible/is-cooldown/fly-heart-box/fly-heart

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Donor Delight Badge, styles, build: Fix class prefixes by namespacing with `ext-wc-`	VolkerE	mediawiki/extensions/WikimediaCustomizations	master	+96 -73

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	T427956 Donor badge experiment: Prefix remaining CSS classes

Event Timeline

Volker_E created this task.Jun 2 2026, 4:26 PM

Volker_E triaged this task as Low priority.

@Jdlrobson I repeat what I shared on a patch much earlier. The right thing would not be to prefix them wikimedia- or mw-, but minerva- or ext-wikimedia-customizations-. Latter is giving me cold showers.

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

HFan-WMF raised the priority of this task from Low to Medium.Jun 2 2026, 5:31 PM

HFan-WMF moved this task from Incoming to REx Sprint 22 [Q4 Jun 2 - Jun 15] on the Reader Experience Team board.Jun 2 2026, 5:37 PM

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

HFan-WMF set the point value for this task to 1.Jun 2 2026, 5:45 PM

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

Jdlrobson-WMF moved this task from Ready to Needs code review on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.Jun 3 2026, 9:08 PM

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

[mediawiki/extensions/WikimediaCustomizations@master] styles, build: Show badge container exclusively on experiment in treatment

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

gerritbot added a project: Patch-For-Review.Jun 3 2026, 9:53 PM

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

[mediawiki/extensions/WikimediaCustomizations@master] Donor Delight Badge, styles, build: Fix class prefixes by namespacing with `ext-wc-`

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

Volker_E claimed this task.Jun 5 2026, 2:58 PM

Change #1298302 merged by jenkins-bot:

[mediawiki/extensions/WikimediaCustomizations@master] Donor Delight Badge, styles, build: Fix class prefixes by namespacing with `ext-wc-`

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

Volker_E removed a project: Patch-For-Review.Jun 5 2026, 4:38 PM

Volker_E updated the task description. (Show Details)

Volker_E moved this task from Needs code review to Needs QA on the Reader Experience Team (REx Sprint 22 [Q4 Jun 2 - Jun 15]) board.

ReleaseTaggerBot added a project: MW-1.47-notes (1.47.0-wmf.6; 2026-06-09).Jun 5 2026, 5:00 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: Leftover classes are prefixed with ext-wc-
✅ AC1 / ✅ AC2: scanning the loaded donor-badge CSS rules, each formerly-unprefixed token now appears only in ext-wc- form, with 0 bare occurrences:

is-hidden -> #minerva-badge.ext-wc-is-hidden, #minerva-badge-popover.ext-wc-is-hidden (3 rules, 0 bare)
is-visible -> #minerva-badge-button-remove.ext-wc-is-visible (1 rule, 0 bare)
is-cooldown -> #minerva-badge.ext-wc-is-cooldown (1 rule, 0 bare)
fly-heart-box -> .ext-wc-fly-heart-box (0 bare)
fly-heart -> .ext-wc-fly-heart-box, .ext-wc-fly-heart (5 rules, 0 bare)

Satisfies the AC "No unprefixed class is remaining in styles.less". Also confirmed the variant html class is prefixed: ext-wc-donor-badge-treatment-b-simple. (test-kitchen-experiment-* and minerva-* are framework/skin classes, not the donor-badge extension styles.less, so out of scope.)