Page MenuHomePhabricator

Build the wvui-typeahead-suggestion component for Vue.js search
Closed, ResolvedPublic5 Estimated Story Points

Assigned To
Authored By
Jun 22 2020, 6:13 PM
Referenced Files
F32243464: Peek 2020-09-03 07-50.webm
Sep 3 2020, 1:51 PM
F32242678: togif2(1).gif
Sep 2 2020, 10:15 PM
F32194667: placeholder-img.svg
Aug 25 2020, 5:44 PM
F32191183: image.png
Aug 25 2020, 4:22 PM
F32191192: image.png
Aug 25 2020, 4:22 PM
F32191181: image.png
Aug 25 2020, 4:22 PM
F32190333: image.png
Aug 25 2020, 4:22 PM
F32190176: image.png
Aug 25 2020, 4:22 PM


Referencing T255902 for guidance, build the wvui-typeahead-suggestion for Vue.js search.



image.png (768×1 px, 148 KB)

The results list follows OOUI guidelines in terms of styling and interactivity. Please refer to either OOUI or the demo for additional details.


image.png (662×827 px, 129 KB)

Styling of page title

The part of the page title that does not match the search term will be bolded, e.g.

image.png (469×496 px, 20 KB)

Image thumbnails

Each search result will have an image thumbnail to the left. In cases where there is no image available from the API we will use a placeholder image.

Open question can we show custom placeholder images for certain types of results? This is currently being done in the search experience within VE > insert link. The ones I would like to differentiate are:

  • disambiguation pages
  • redirects
  • user pages
  • special pages
Keyboard support

Keyboard support should match the current experience on Wikipedia. This can also be seen on the demo.

  • up/down keys to navigate to different search results
    • the text in the search box should update to reflect whatever result is currently selected
  • enter key to submit a search
hovering search result
image.png (190×457 px, 34 KB)
background darkens (#EAECF0)
initial load
image.png (80×525 px, 6 KB)
subsequent loads (if needed)
image.png (217×525 px, 35 KB)


Acceptance criteria

  • All component acceptance criteria in T255902 are covered.

Event Timeline

ovasileva set the point value for this task to 5.Aug 24 2020, 5:16 PM
Jdlrobson updated the task description. (Show Details)

I reviewed the storybook component and I notice strange behaviour when I press "up" arrow on long lists of item where the scroll bar is present - rather than jump to the bottom of the list it jumps to the last visible scrollable item:

Not sure if this is a big deal but wanted to flag it just in case:

Feel free to open a bug if that's needed
(sorry about the stretched image).

togif2(1).gif (360×640 px, 1 MB)

Sorry, I'm having trouble making sense of the gif andI haven't been able to repro. I see the Storybook scrollbar and the viewport kind of fighting. Using the up arrow from the top or down arrow from the bottom and carefully scrolling without highlighting the item shows correct selection behavior. Here are the steps I took:

  1. Visit
  2. Drop the viewport to mobile.
  3. Press "s"
  4. Tap up a few times.

I wasn't using mobile viewport - just a resized browser window. I think it's just something to test when we integrate this into Vector so have added this as a QA step to T249297