Page MenuHomePhabricator

TagItemWidget is imbalanced in start padding and font-size for its use case
Closed, ResolvedPublic

Assigned To
Authored By
Volker_E
Oct 25 2018, 3:18 AM
Referenced Files
F27021801: image.png
Nov 2 2018, 7:06 PM
F27021794: image.png
Nov 2 2018, 7:06 PM
F26988893: image.png
Oct 30 2018, 8:46 PM
F26988897: image.png
Oct 30 2018, 8:46 PM
F26778835: T207917 TagItems smaller (NP).png
Oct 25 2018, 3:20 AM

Description

We've been identifying that TagItemWidget's current layout misses harmonious padding on label-only tags and could profit from decreasing font-size by 1px and possibly bold weight.
@Nirzar has shared a quick mock with his ideas for improvement:

T207917 TagItems smaller (NP).png (43×512 px, 9 KB)

Success criteria

  • We need to make sure that we don't end up using more horizontal space, but preferred a bit less
  • Readability is ensured at lower font-size x-browser/platform
  • Combinations of icons and labels work as well

Most prominent use case currently is RecentChanges (here enwiki)


BeforeAfter
image.png (334×2 px, 90 KB)
image.png (248×2 px, 62 KB)

Event Timeline

Change 469552 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Make TagItemWidgets slightly less obstrusive

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

We're currently boldening only higher-priority action items like buttons and tab items. TagItemWidget doesn't fall under the same category, to guide user focus, I'd recommend staying with normal text on tag items.
The other ideas – harmonising padding and reducing font-size slightly are very useful and are provided in patch above.

Volker_E edited projects, added OOUI (OOUI-0.29.3); removed OOUI.

This makes the font size of the text input and the tags different, which means it will shift after the input is confirmed and changed to a tag. I think this is a regression.

@matmarex No, that's intended. It's not the most elegant, but not a regression. We will pick this up again for other reasons.

Volker_E triaged this task as Low priority.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Change 469552 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Make TagItemWidgets slightly less obstrusive

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

Change 470967 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.29.3

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

Change 470967 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.29.3

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

The updated Before/After shows well, that the new treatment fulfills all needs from success criteria, and that it takes up less space while providing good readability. cc: @Pginer-WMF @Nirzar