For reference, see Alex's prototype: https://di-community-round-2.web.app/Romania
- height of input box should be 32px
- font-size for placeholder & input text should be 14px
- search icon is slightly too large
- search icon right & left padding doesn't match spec
- placeholder text should say "Search Wikipedia"
- remove invisible button at the end of the input box
|hover (after having focused the input field)||(same as above)|
- the search button is not showing when hovering (before having focused the field)
- the search box gets less wide after it has been focused
- upon hover (after having focused) the search button appears "outside" of the box rather than inside
- remove tooltip over magnifying glass icon
- change cursor from pointer (hand) to arrow when hovering over magnifying glass icon before WVUI loads
Active & focus states
The initial transition into the active/hover state has some slight issues. I suspect this is due to with swapping the Vue component in. Going frame-by-frame here are the issues I'm seeing:
|2||input text shifts right by ~5px, end of input text gets clipped slightly, search button doesn't appear immediately|
|3||blue border goes away|
- too much spacing around the icon
- icon opacity should switch to 1
- there seems to be a slight delay in the border/outline thickening, please reference OOUI demo (link)
- font-size should be 14px
- image thumbnails are too large (41x41px), should be 36x36px
- rows are too tall (57px), should be 54px -- I think this will resolve itself when we reduce the size of the image thumbnails
- There is a bottom margin on each row that should be removed (it is a rogue style coming from Vector) https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180 –
- remove text underlines when hovering a row – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180
"Search for pages containing"
- hover highlight color should be gray (same as other rows) – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180
- text should say "Search for pages containing [x]", currently it says "containing [x]"
- (same issue as mentioned above with margin below row) https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180 –
Thumbnails Enabled: https://patchdemo.wmflabs.org/wikis/4e5d48023fbd967911848c5a059863f2/w/index.php/Main_Page
Thumbnails Disabled: https://patchdemo.wmflabs.org/wikis/9ed1c233860587aa138e8a652fbf5e63/w/index.php/Main_Page
Further instructions pending...