Page MenuHomePhabricator

TextInputWidget: Icon color should be de-emphasized in non-focus state
Closed, ResolvedPublic

Description

TextInputWidget's icon is over-emphasized with its black color similar to ButtonWidget, specifically when Placeholder text or no value comes into place before user has added any input.
Let's fix this, by reducing to normal text color equivalent opacity on 'normal' state and full opacity on focus.

image.png (68×581 px, 7 KB)

BeforeAfter
image.png (558×1 px, 69 KB)
image.png (570×1 px, 69 KB)

Using opacity to come close to AAA Base 20 color in normal, non-focussed state.
In focussed state, the icon will remain in the same color as text.

Event Timeline

Volker_E renamed this task from TextInputWidget: Icon color should align to text to TextInputWidget: Icon color should be de-emphasized in non-focus state.Feb 28 2019, 9:56 PM

Change 494153 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: De-emphasize opacity on TextInputWidget icons

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

Volker_E triaged this task as Low priority.
Volker_E moved this task from Reviewing to OOUI-0.30.4 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.30.4); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.

Change 494153 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: De-emphasize opacity on TextInputWidget icons

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

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

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

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

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

Volker_E moved this task from OOUI-0.30.4 to Doing on the OOUI board.
Volker_E edited projects, added OOUI; removed OOUI (OOUI-0.30.4).
Volker_E added a subscriber: Nirzar.

@Nirzar shared further insight on that even more de-emphasizing the icon opacity in inputs, as the input value should precede over icon and full opacity on focus seems sufficient to him
Comparisons given:

image.png (68×496 px, 10 KB)

image.png (57×652 px, 4 KB)

Volker_E updated the task description. (Show Details)
Volker_E added a subscriber: Lea_WMDE.

Change 500875 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Reduce accessory icon's opacity in non-focussed state

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

Change 500875 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Reduce accessory icon's opacity in non-focussed state

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

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

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

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

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

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

Jdforrester-WMF added a subscriber: Jdforrester-WMF.

This landed in MediaWiki in the 1.33.0-wmf.25 alpha branch, and so will be on Wikimedia production from 2019-04-09.