Page MenuHomePhabricator

Tag-/CapsuleItemWidget: Use icon instead of indicator for the delete button
Closed, ResolvedPublic

Description

Before:After (20x20px icon size)After (18x18px icon size)
T159208 TagItem close _before OOjs UI Demos 2017-06-16.png (566×1 px, 88 KB)
T159208 TagItem close _after 20px OOjs UI Demos 2017-06-16.png (554×1 px, 84 KB)
T159208 TagItem close _after 18px OOjs UI Demos 2017-06-16.png (556×1 px, 86 KB)

Event Timeline

Change 340289 had a related patch set uploaded (by Prtksxna; owner: Prtksxna):
CapsuleItemWidget: Add breathing space and use icon instead of indicator

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

Change 340289 merged by jenkins-bot:
[oojs/ui] CapsuleItemWidget: Add breathing space and use icon instead of indicator

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

Change 341494 had a related patch set uploaded (by prtksxna):
[oojs/ui] CapsuleItemWidget: Add breathing space and use icon instead of indicator

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

Volker_E renamed this task from OO.ui.CapsuleItemWidget: Use icon instead of indicator for the dropdown button to OO.ui.CapsuleItemWidget: Use icon instead of indicator for the delete button.Jun 16 2017, 6:29 AM
Volker_E triaged this task as Medium priority.Jun 16 2017, 6:37 AM
Volker_E added a subscriber: Pginer-WMF.

@Pginer-WMF has requested a test with more margin to the 20x20px variant. Therefore repeating from the task description and adding specific tests.
Before:

T159208 TagItem close _before OOjs UI Demos 2017-06-16.png (566×1 px, 88 KB)

After (20x20px icon size):
T159208 TagItem close _after 20px OOjs UI Demos 2017-06-16.png (554×1 px, 84 KB)

After (20x20px icon size & increased margin: 2px each side):
T159208 TagItem close _after 20px more margin OOjs UI Demos 2017-06-26.png (546×1 px, 83 KB)

After (20x20px icon size & increased margin: 1px each side):
T159208 TagItem close _after 20px 2px more margin OOjs UI Demos 2017-06-26.png (546×1 px, 84 KB)

Honestly, I don't think that extra margin is needed, especially given the different shape of proposed icon with more icon inherit white space.
After (18x18px icon size)

T159208 TagItem close _after 18px OOjs UI Demos 2017-06-16.png (556×1 px, 86 KB)

@Pginer-WMF has requested a test with more margin to the 20x20px variant. Therefore repeating from the task description and adding specific tests.

My concern was with the "X" becoming a bit too close to the label. If we want to keep the standard 20px icon size we can adjust the space between the label and the icon.
I made an exploration of some possibilities (F8535674) and I think it works well to do the following:

  • Add 1px of additional space between the label and the icon.
  • Add 1px of additional space before the label.

The mockups below show the result:

tag-extra-space.png (169×190 px, 9 KB)

the mockup below shows in blue where to add the extra space:

tag-extra-space-lines.png (169×190 px, 9 KB)

Change 341494 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Use icon instead of indicator in Tag-/CapsuleItemWidget

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

Volker_E moved this task from Doing to OOjs-UI-0.22.2 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.22.2); removed OOUI.
Volker_E renamed this task from OO.ui.CapsuleItemWidget: Use icon instead of indicator for the delete button to Tag-/CapsuleItemWidget: Use icon instead of indicator for the delete button.Jun 28 2017, 5:15 PM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.

Change 361912 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Align appearance of tags' close icon to WikimediaUI theme

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

Change 361912 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Align appearance of tags' close icon to WikimediaUI theme

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