Background

In T419638: Roll out new donate button design to all wikis the donate button needed to be styled with a progressive icon and text. This was achieved using a ID CSS selector #pt-sitesupport-2 .cdx-button--fake-button--enabled.cdx-button--weight-quiet added in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1266394

Since Codex supports progressive icons, we want to achieve this by using Codex markup.

Proof of concept: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1266344 ; https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1266342

User story

• Add user story in the format: “As a [persona], I want to [X], so that [Y]”

Requirements

• VectorComponentLinks::updateMenuItemStyles supports an option ['button' => [ 'progressive' => true, 'icon' => 'clock' ] ]
• Templates are updated so that icons inside buttons receive the cdx-button__icon class which is needed to style the icon progressive. https://doc.wikimedia.org/codex/latest/components/demos/button.html

BDD

• For QA engineer to fill out

Test Steps

• For QA engineer to fill out

Design

• Add mockups and design requirements

Acceptance criteria

• Add acceptance criteria

Communication criteria - does this need an announcement or discussion?

• Add communication criteria

Rollback plan

• What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.2.0 of the Web team task template using phabulous