Page MenuHomePhabricator

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



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

Design requirements

See T255603.

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

Results list

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)

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)

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

Acceptance criteria

  • All component acceptance criteria in T255902 are covered

Create a a) new single file component file, b) UI Storybook story, and c) Jest test.
Add the minimal HTML5 template and JavaScript needed for the search use case.
Add the best-practice following descriptive ARIA roles and attributes.
Aim for the above to be merged.
Copy CSS properties from OOUI that apply to the minimal template. Aim to get this merged.
Change as needed. When changing the structure, copy any relevant styles from OOUI. For changes that require extensive discussion and are optional for search, consider forking the component within WVUI to a new directory.
Update the migration guide with lessons learned.

  • Ensure finished form satisfies the design requirements above

Event Timeline

Niedzielski set the point value for this task to 5.Aug 5 2020, 6:12 PM

Pointed as a large by Web devs asynchronously.

ovasileva added a subscriber: ovasileva.

@Niedzielski, @Anribolon - is this ready to go/currently worked on?

This is in progress. @Anribolon will have a patch up today.

ovasileva updated the task description. (Show Details)

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

Niedzielski added a subscriber: Anribolon.

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

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

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

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

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

nray removed phuedx as the assignee of this task.Oct 26 2020, 6:46 PM
nray added a subscriber: phuedx.