Challenges
If we directly adapt our current component, several issues arise:

• Two icons inside the search bar and a cancel button outside the search bar leave very little room for the actual text inside the search bar.

• Using a text button for the cancel affordance gets even trickier in languages where the word for "Cancel" is much longer than in English.
• The width of the results window is tied to the width of the search input which make type ahead results and empty state recommendations wrap a lot. On a small device, there would only be room for one result above the keyboard.

• Using an icon-only button for the cancel affordance creates a lot of ambiguity with the clear affordance. A user is presented with two "x" icons right beside one another.

Solution
If we make some tweaks to the TAhS component at mobile resolutions we can fix the issues above.

Focus state

• Focus state drops the magnifying glass icon
• Instead of a cancel, we use a back affordance with a chevron. This eliminates both the long "Cancel" text button issue and the ambiguity with the clear icon inside the field.
• The results pane is anchored to the bottom of the header instead of the field itself. It also uses the full width of the viewport.

Active state

• When a user begins typing, the clear affordance appears. The type ahead results appear in the results pane.

Results pane

Long queries

RTL

• Using a back affordance instead of a cancel affordance also removes the ambiguity effect of the double X icons for RTL languages.

Here's a quick prototype showing the interactions

Assuming the Epic task was mistakenly pulled from the parent task.

@JScherer-WMF what about tablet devices? Currently they show the same as mobile but look pretty terrible. Do we want that to work more like Vector 2022? Tablets account for a notable portion of mobile traffic.

In T392119#10763642, @Jdlrobson-WMF wrote:

@JScherer-WMF what about tablet devices? Currently they show the same as mobile but look pretty terrible. Do we want that to work more like Vector 2022? Tablets account for a notable portion of mobile traffic.

Here is the way the Minerva Search would break down to a tablet viewport size.

• The max width of the Menu items and the search bar is 640px.
• The overlay behind it should be the semi-transparent codex overlay that we use for dialogues.
• It should be centred on the viewport and the back chevron should stay in the same left alignment as on the mobile viewport sizes.
• Tapping outside the menu should dismiss it.

Is it possible to avoid using the codex semi transparent overlay? I'd expect this to increase the scope of this work a bit more, as the tablet design is adapted from the original Minerva design, which has a regular overlay and we werent planning on using codex for it. I.e. this is what it looks like now.

Done! https://phabricator.wikimedia.org/T393410