Page MenuHomePhabricator

Add a link: desktop hoverstate on card
Closed, ResolvedPublic

Description

NOTE: this task is completely independent of the new "add links" task type and can be deployed to production as soon as it's ready.

Based on our user testing, we want to make it clearer to the desktop user that they should click on a task card in the suggested edits module.

  • When the user hovers over a card, an outline shows up around the card.
  • The outline should be a two-pixel border in accent 50.

Mockup showing desktop with and without hover state as of 2021-01-12:

image.png (551×715 px, 178 KB)

NOTE: Refer to Figma for up-to-date detailed redline mocks and specs:
Mobile: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=181%3A65
Desktop: https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=112%3A0

Event Timeline

Change 666218 had a related patch set uploaded (by MewOphaswongse; owner: MewOphaswongse):
[mediawiki/extensions/GrowthExperiments@master] Hover state for suggested edits task card

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

Hover state on desktop:

desktop_hoverstate.png (2×2 px, 1 MB)

Also checked mobile to make sure that no outline is applied there.

Change 666218 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Hover state for suggested edits task card

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

Checked in testwiki wmf.35 - looks according to the specs.