Page MenuHomePhabricator

Special Block [Codex]: Change buttons to progressive
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
HMonroy
Feb 21 2025, 6:57 PM
Referenced Files
F58585156: 2025-03-03_11-50-09.mp4.gif
Mar 3 2025, 7:55 PM
F58585154: 2025-03-03_10-46-46.mp4.gif
Mar 3 2025, 7:55 PM
F58585151: 2025-03-03_11-51-26.mp4.gif
Mar 3 2025, 7:55 PM
F58584543: 2025-03-03_10-02-45.png
Mar 3 2025, 7:55 PM
F58584541: 2025-03-03_10-01-44.png
Mar 3 2025, 7:55 PM
F58584536: 2025-03-03_10-04-47.png
Mar 3 2025, 7:55 PM
F58584533: 2025-03-03_09-59-21.png
Mar 3 2025, 7:55 PM
F58584531: 2025-03-03_09-59-03.png
Mar 3 2025, 7:55 PM

Description

Change "Add Block" and "Update Block" buttons to progressive styles, per updated figma design.

image.png (242×511 px, 20 KB)

The confirmation pop up when an admin is blocking themselves should stay destructive.

Derived Requirements

  1. Update Button Styles to Progressive:
    • The "Add Block" and "Update Block" buttons should be updated to use the progressive button style as per the latest Figma design.
  1. Maintain Destructive Styling for Self-Block Confirmation:
    • The confirmation popup shown when an admin attempts to block themselves should retain the destructive button style.
Test Steps

Test Case 1: Ensure "Add Block" and "Update Block" Buttons Use Progressive Style

  1. Navigate to Special:Block.
  2. Locate the "Add Block" button.
  3. ✅❓❌⬜ AC1: Confirm that the "Add Block" button uses the progressive button style as per the Figma design.
  4. Block a user and then edit the block.
  5. Locate the "Update Block" button.
  6. ✅❓❌⬜ AC2: Verify that the "Update Block" button also uses the progressive button style.

Test Case 2: Ensure Self-Block Confirmation Pop-Up Retains Destructive Styling

  1. Log in as an admin.
  2. Attempt to block yourself using Special:Block.
  3. Observe the confirmation pop-up.
  4. ✅❓❌⬜ AC3: Confirm that the destructive button style is used for the confirmation pop-up.

QA Results - Test Wiki

ACStatusDetails
1T387043#10598072
2T387043#10598072
3T387043#10598072

Event Timeline

Change #1122247 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/core@master] SpecialBlock [Codex]: change destructive buttons to be progressive

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

@JSengupta-WMF When an Admin tries to block themselves there's a confirmation popup that asks You are about to block yourself! Are you sure you want to do that?. Should that 'Yes' button also be progressive? I thought in our conversations, it was said destructive but now I'm wondering.

Screenshot from 2025-02-24 14-41-26.png (402×908 px, 25 KB)

Thanks!

Let's keep it a destructive button.

To be clear, blocking self and hideuser confirmation buttons are destructive. Everything else is progressive.

Change #1122247 merged by jenkins-bot:

[mediawiki/core@master] SpecialBlock [Codex]: change add/submit block buttons to progressive

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

Yes. As discussed, blocking self will be considered as an accidental action and hideuser confirmation as per @MusikAnimal is a non reversible action so we decided to keep those two buttons destructive.

@MusikAnimal Confirmed that blocking self and hideuser confirmation buttons are destructive, while the rest are progressive as seen in the screenshots and gifs below. I will mark this as "Resolved". Thanks for all your work!

Test Result - TestWiki

Status: ✅ PASS
Environment: TestWiki
OS: macOS Sonoma 15.3.1
Browser: Chrome 133, Firefox 135, Safari 18.3
Device: MBA

Test Artifact(s):

Test Steps

Test Case 1: Ensure "Add Block" and "Update Block" Buttons Use Progressive Style

  1. Navigate to Special:Block.
  2. Locate the "Add Block" button.
  3. AC1: Confirm that the "Add Block" button uses the progressive button style as per the Figma design.
TopBottom
2025-03-03_09-59-03.png (582×997 px, 91 KB)
2025-03-03_09-59-21.png (839×926 px, 98 KB)
  1. Block a user and then edit the block.
  2. Locate the "Update Block" button.
  3. AC2: Verify that the "Update Block" button also uses the progressive button style.
2025-03-03_10-04-47.png (753×892 px, 83 KB)

Test Case 2: Ensure Self-Block Confirmation Pop-Up Retains Destructive Styling

  1. Log in as an admin.
  2. Attempt to block yourself using Special:Block.
  3. Observe the confirmation pop-up.
  4. AC3: Confirm that the destructive button style is used for the confirmation pop-up.
Hide UserBlock Yourself
2025-03-03_10-01-44.png (760×823 px, 95 KB)
2025-03-03_10-02-45.png (775×919 px, 80 KB)

Browsers/Skins

Chrome- MinervaFirefox- MonobookSafari- Timeless
2025-03-03_11-51-26.mp4.gif (886×1 px, 1 MB)
2025-03-03_10-46-46.mp4.gif (836×986 px, 3 MB)
2025-03-03_11-50-09.mp4.gif (848×1 px, 2 MB)
GMikesell-WMF updated the task description. (Show Details)