Page MenuHomePhabricator

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

Description

Description

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

Design requirements

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)

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
image.png (190×457 px, 34 KB)
background darkens (#EAECF0)
initial load
image.png (80×525 px, 6 KB)
demo: https://di-searchland-2.web.app/
subsequent loads (if needed)
image.png (217×525 px, 35 KB)

Please note the "Search within pages" link at the bottom of the list.

Acceptance criteria

  • All component acceptance criteria in T255902 are covered.
  • Design requirements are met

Patch

https://gerrit.wikimedia.org/r/c/wvui/+/626478

Event Timeline

On question of clarifying tab order (cc: @nray).
Most useful take from my POV, similar to RCFilters, implemented in MenuTagMultiselectWidget also similar to Google:

  1. Tabbing into input
  2. Input text
  3. Autocomplete results are loaded

Either

  1. Arrow keys are activating autocomplete results
  2. Tabbing over any activated result will change input to last activated result. Open Question: Is first tab focussing the button or the search input again? I'd lean towards Google's approach, going directly to button. Seems more efficient after selecting an autocomplete that you're not adding more text to it and saves one step.

Or

  1. Tabbing directly to search button

This may or may not be useful to you all since our use cases are fairly different and since this task is already in progress, but I figured I'd share our recently completed AutocompleteSearchInput component, which emits input to its parent component and receives an array of text suggestions that are displayed in a SelectMenu component (which is also used by our Select component).

ovasileva set the point value for this task to 3.Sep 1 2020, 5:23 PM

@alexhollender The design spec is currently missing the menu dropdown box-shadow. We've unified it, while using only a very subtle one, for anything that is above the page content: @box-shadow-menu: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );. Please verify.

@alexhollender The design spec is currently missing the menu dropdown box-shadow. We've unified it, while using only a very subtle one, for anything that is above the page content: @box-shadow-menu: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );. Please verify.

I suppose it depends what you mean by "missing". The correct box-shadow is in the demo. I have not been giving specific CSS specs in most cases — instead saying "refer to OOUI or the demo"

image.png (522×1 px, 160 KB)

@alexhollender To clarify my comment further, I mean the first image in the task description and the demo linked. Neither of them feature the box-shadow.

Change 626478 had a related patch set uploaded (by Niedzielski; owner: Anribolon):
[wvui@master] Add basic html, css and js. add network client

https://gerrit.wikimedia.org/r/626478

@Jdrewniak, as discussed, Anri has put in a lot of work into building out this component but now the patch is quite large because it encompasses both this typeahead-search component and also the search form (T256041). If it helps reviewers, I suggest splitting out the input + dropdown (this task) from the form (T256041) into a separate patch and focusing on getting that merged first.

Change 632949 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[wvui@master] [component/typeahead-suggestion-title] Bold title after match

https://gerrit.wikimedia.org/r/632949

Change 633720 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[wvui@master] [component/typeahead-suggestion] Pass in URL generator

https://gerrit.wikimedia.org/r/633720

Change 633721 had a related patch set uploaded (by Phuedx; owner: Phuedx):
[wvui@master] [components/typeahead-suggestion] Extract mock response data

https://gerrit.wikimedia.org/r/633721

Change 633720 merged by jenkins-bot:
[wvui@master] [component/typeahead-suggestion] Pass in URL generator

https://gerrit.wikimedia.org/r/633720

Change 633721 merged by jenkins-bot:
[wvui@master] [components/typeahead-suggestion] Extract mock response data

https://gerrit.wikimedia.org/r/633721

Change 632949 merged by jenkins-bot:
[wvui@master] [component/typeahead-suggestion-title] Bold title after match

https://gerrit.wikimedia.org/r/632949

@alexhollender Could we limit the menu footer to 40px + 2px border?

@alexhollender Could we limit the menu footer to 40px + 2px border?

to clarify, this is what you're suggesting?

image.png (627×580 px, 126 KB)

Change 626478 merged by jenkins-bot:
[wvui@master] [components][typeahead-search] Add TypeaheadSearch component

https://gerrit.wikimedia.org/r/626478

This has been merged now. Should we make a ticket for the debouncer work?

nray added a subscriber: phuedx.