Description

Per design feedback, we need to make some updates to the suggestion widget design:

Move checkmark to right side
Avoid changing the widget's width when adding/removing a checkmark. To achieve this, we'll need to add extra horizontal padding initially, then move the text to the left when the checkmark appears. We'll also need a nice CSS transition to make sure this action is smooth and not jarring

We're going for something like this, except with the text centered for unconfirmed suggestions:

Details

	Subject	Repo	Branch	Lines +/-
	Update suggestion widget design so buttons don't change width	mediawiki/extensions/MachineVision	wmf/1.35.0-wmf.5	+44 -8
	Update suggestion widget design so buttons don't change width	mediawiki/extensions/MachineVision	master	+44 -8

Customize query in gerrit

Related Objects

Mentioned In: T242414: Consider adding suggestion widget to OOUI
T239287: Change confirmed tag color from green to blue
T238610: Newcomer tasks: include topics in intro overlay

Event Timeline

AnneT created this task.Nov 6 2019, 10:10 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 6 2019, 10:10 PM

AnneT moved this task from Triage to Current Work on the Structured-Data-Backlog board.Nov 6 2019, 10:11 PM

AnneT edited projects, added Structured-Data-Backlog (Current Work); removed Structured-Data-Backlog.

AnneT moved this task from Backlog to Ready for dev on the MachineVision board.

Based on separate convos with both Anne and @RHo: something like this could help make the tags look/work better:

(example by Rita)

Change 549870 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/MachineVision@master] Update suggestion widget design so buttons don't change width

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

gerritbot added a project: Patch-For-Review.Nov 8 2019, 3:40 PM

egardner moved this task from Incoming to Doing on the Structured-Data-Backlog (Current Work) board.Nov 12 2019, 5:12 PM

egardner moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.

egardner moved this task from Code Review to Doing on the Structured-Data-Backlog (Current Work) board.

egardner moved this task from Ready for dev to In development on the MachineVision board.

Change 549870 merged by jenkins-bot:
[mediawiki/extensions/MachineVision@master] Update suggestion widget design so buttons don't change width

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.8; 2019-11-26).Nov 13 2019, 4:00 PM

Maintenance_bot removed a project: Patch-For-Review.Nov 13 2019, 4:10 PM

Change 550780 had a related patch set uploaded (by Mholloway; owner: Anne Tomasevich):
[mediawiki/extensions/MachineVision@wmf/1.35.0-wmf.5] Update suggestion widget design so buttons don't change width

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

gerritbot added a project: Patch-For-Review.Nov 14 2019, 3:15 AM

Change 550780 merged by jenkins-bot:
[mediawiki/extensions/MachineVision@wmf/1.35.0-wmf.5] Update suggestion widget design so buttons don't change width

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.5; 2019-11-05); removed MW-1.35-notes (1.35.0-wmf.8; 2019-11-26).Nov 14 2019, 3:00 PM

Maintenance_bot removed a project: Patch-For-Review.Nov 14 2019, 3:10 PM

AnneT moved this task from In development to Done on the MachineVision board.Nov 14 2019, 5:03 PM

• PDrouin-WMF moved this task from Backlog 📚 to Done/Handed off 📮 on the Structured-Data-Design board.Nov 14 2019, 8:47 PM

RHo mentioned this in T238610: Newcomer tasks: include topics in intro overlay.Nov 20 2019, 8:42 PM

AnneT moved this task from Doing to Needs QA on the Structured-Data-Backlog (Current Work) board.Nov 25 2019, 5:12 PM

• PDrouin-WMF mentioned this in T239287: Change confirmed tag color from green to blue.Nov 26 2019, 10:06 PM