Change Details

== User story As a wiki reader or editor, I would like easy access to the search bar, so that I can find the content I am looking for or discover new content == Reasoning Building the new search experience will take some time and broadly speaking, the work is iterative and never-before-done at the Foundation. For this reason, it makes sense to isolate the risk. This task helps do that by moving the old search experience to the new search bar where it will be ready to iterate on independently of the rest of #desktop_improvements. == Acceptance criteria - [] No new functionality. This is about moving the //existing// search experience to the new header. - [] Only the style changes needed to ship. Subsequent search work will be feature flagged after this task until the new experience is ready to ship to the [[ https://phabricator.wikimedia.org/T249297 | test wikis ]]. - [] We will be A/B testing this so a feature flag would be preferable so that we can deploy when the instrumentation is ready - [] The search is hidden in print mode (see T253842) - [] The layout will define a minimum width to clarify which browser displays we can support and avoid display issues on screen widths we currently don't support to avoid problems like T256373 == Sign-off criteria [] Test move menu and determine whether it is still necessary == Design spec Prototype: https://di-search.web.app/Tangerine | | logged-out | logged-in | wider window | {F31805158} | {F31805159} | narrower window (user links wrap) | {F31813007} | {F31813010} | below 1095px (or similar) | {F31813002} | {F31813003} ===== Alignment details {F31805234 width=600} ===== User link wrapping One aspect of moving the search bar to the header is dealing with the wrapping of the user links. The current thinking is that the search input will have a min-width, and once the min-width is hit the user links will start wrapping. However we want to avoid the user links wrapping to more than two lines, so either using a breakpoint or some flexbox magic we want to wrap the entire menu at that point. Example of state we want to avoid: {F31805238} Original design spec task: T249641 == Additional prototypes [[http://patchdemo.wmflabs.org/wikis/6cf9639d8bd2ddba0d03e2d873d35425/w/?useskinversion=2|DEMO latest spec]] as of May 6 [[ http://patchdemo.wmflabs.org/wikis/8db0db8c3dab429e1f76be26fa50ce80/w/ | Demo: Search in the middle + new drop-down personal menu ]] (patch [[https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/589809 | 589809 ]], login: "Guest" pass: "guestguest") [[ http://patchdemo.wmflabs.org/wikis/c89c626a5a64c898426448c3d78f7cf1/w/ | Demo: Search on left + old personal menu ]] (patch [[https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/585851 | 585851 ]]) = QA steps The following tests should be done on a variety of browsers, screen sizes, and languages. [] Basic usability test — type something in, wait for results list to appear, make sure you can a) click on a search result, b) click on the icon, c) press the enter key. All three options should submit the search. [] Advanced search page – make sure that clicking on the search icon, with nothing entered in the search box, takes you to the advanced search page [] Alignment check – there are only two positions the search box should ever appear in, depending upon screen size. For larger screens the search box should always be anchored to the right of the logo, approximately 58px apart. As the screen gets smaller the userlinks should start to wrap and stack. At a certain point the links should move below the search box, and the search box should move to the right side of the screen, anchored to the right. [] Max-width check – the search box should never be wider than 450px [] Input tools – check that if the input tools setting is on the little keyboard icon/button appears in the bottom corner of the search box [] Tablet devices – Verify the new header is usable on iPad with portrait mode and not broken - where broken is defined as no overlapping elements Example of "broken" {F31905387}