Page MenuHomePhabricator

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


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


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):


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

Event Timeline

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

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

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

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

@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.

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

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

@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

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