Background
Moved from T249299: [Epic] Build the new Vue.js search experience
For reference, see Alex's prototype: https://di-community-round-2.web.app/Romania
Acceptance criteria
Input box
Layout
Current issues:
- 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
Interactivity
Hover state
| correct | current | |
|---|---|---|
| hover |  |  |
| hover (after having focused the input field) | (same as above) |  |
Current issues:
- 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:
| frame # | screenshot | issue(s) |
| 1 |  | |
| 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 |
| 4 |  | |
Final state:
| correct |  |
| current |  |
Current issues:
- 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)
Search button
Current issues:
- font-size should be 14px
Results list
Layout
Current issues:
- 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
Interactivity
Current issues
- remove text underlines when hovering a row – https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/650180
"Search for pages containing"
Current issues
- 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
QA Instructions
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...
