Page MenuHomePhabricator

Vector: Simple search needs to provide standard appearance
Closed, ResolvedPublic

Description

Search input doesn't follow standard input behaviour, resulting for example in no clear visual focus feedback:

CurrentProposed

Additionally the distance of the search icon should be amended, so it's same distance as placeholder and input value padding on the starting side (left in LTR):

CurrentProposed

This has minor positive side-effect of upping clickable area from ~20px to ~24px reducing affordability.

Details

Related Gerrit Patches:
mediawiki/skins/Vector : masterLighten up search input background slightly
mediawiki/skins/Vector : masterIncrease distance of button to container
mediawiki/skins/Vector : masterSimpleSearch: Standardize input appearance

Event Timeline

Volker_E created this task.Jun 7 2019, 9:07 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptJun 7 2019, 9:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 515176 had a related patch set uploaded (by Isarra; owner: VolkerE):
[mediawiki/skins/Vector@master] SimpleSearch: Standardize input appearance

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

Change 515176 merged by jenkins-bot:
[mediawiki/skins/Vector@master] SimpleSearch: Standardize input appearance

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

SerDIDG added a subscriber: SerDIDG.Jul 2 2019, 8:52 PM

Additionally, some visual bugs appeared in iOS Safari (12.3.1):



Need to change css styles from -webkit-appearance: textfield; to -webkit-appearance: none;.

Volker_E added a comment.EditedJul 11 2019, 6:21 PM

@SerDIDG Hi, on iOS 11/12 Safari does show the right treatment:


On rather old versions like iOS 9 Saf it shows the treatment as outlined by you.

Not sure though if this shouldn't be a 'wontfix' as we might end up with side-issues in other browsers/OS when putting the appearance to none.
A textfield assigned field might get different keyboard treatment for example…

@Volker_E I will duplicate the message I left in the patch, I apologize for this :( Are you sure about transparent color for <input>? This color interrupts the color above and it turns out that the search bar will be gray. And because of this, the text color of the placeholder has bad contrast with the background.

Volker_E updated the task description. (Show Details)Sep 26 2019, 7:15 PM

Change 537768 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Increase distance of button to container

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

Change 537768 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Increase distance of button to container

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

@Iniquity I understand your question, and as much as I was not sure in the beginning as the visual difference seems low, I think you are on a correct path here. We won't make the input completely white, in order to stay in line with the remaining Vector look & feel. But lighten up the gradient background slightly, so the color contrast is sufficiently established.

Change 540355 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Lighten up search input background slightly

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

Volker_E closed this task as Resolved.Oct 2 2019, 7:23 PM
Volker_E removed a project: Patch-For-Review.

Resulting appearance:

Change 540355 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Lighten up search input background slightly

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