Page MenuHomePhabricator

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

Description

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

Design

Terminology


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

Specs

Styling of page title

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

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
States
hovering search result
background darkens (#EAECF0)
initial load
demo: https://di-searchland-2.web.app/
subsequent loads (if needed)

Patches

https://github.com/wikimedia/wvui/pull/68
https://github.com/wikimedia/wvui/pull/70

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
alexhollender updated the task description. (Show Details)
alexhollender added a subscriber: ovasileva.
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:
http://localhost:3003/?path=/story/components-typeaheadsuggestion--with-input

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

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 https://wvui.dev/ui/?path=/story/components-typeaheadsuggestion--with-input
  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