Updated with a design spec. Unassigned myself, removed priority, and moved to incoming for next sprint for triage, estimation, and implementation. There's lots of fiddly colours in this one, so I included the dev spec figma file for folks to look at.

@Catrope let me know:

it looks like this IconButtonOnly variant isn't implemented at all! The SearchInput Vue component doesn't let you have an icon-only button (or even an icon+text)

Not sure if this impacts scope/implementation.

@JScherer_WMF I'm looking at the proposed design, aside from fixing icon colors in dark mode, I'm seeing a change where the search icon is moved from the left to the right and the removal of the "x" clear button? This is different from both the current mobile search experience and the codex search, is this intended?

@Jdlrobson I know the technical goal behind this task is to investigate if Codex can be leveraged for this task, but is this possible given the design differences?

@JScherer-WMF also, is the intent behind moving the search icon to the right to make it into a search button? Because that would also increase the scope of this work, and relates to previous design decisions to move away from that pattern. I dont have a whole lot of context behind this, but i believe Typeahead search used to do this, and moved away from it for some design/accessibility reasons? This is how the legacy search works as well

In T358904#9655656, @bwang wrote:

@JScherer-WMF also, is the intent behind moving the search icon to the right to make it into a search button? Because that would also increase the scope of this work, and relates to previous design decisions to move away from that pattern. I dont have a whole lot of context behind this, but i believe Typeahead search used to do this, and moved away from it for some design/accessibility reasons? This is how the legacy search works as well

Yes, the intention was to use the codex search component to replace the one that's in there now.

I just took the small icon only button variant from Codex because that's what they have spec'd in the Figma components, but it turns out that it hasn't been implemented anywhere. @ovasileva do you have any context around why having a search button in the field would be non-accessible?

Yes, the intention was to use the codex search component to replace the one that's in there now.

@JScherer-WMF Ah I see. My analysis is that that goal requires 2 larger tickets: first one for implementing the "mobile version" of the typeahead search component in Codex (i imagine this would likely need coordination with DST as im not sure if our proposed design is a general solution), and a second for using typeahead search inside Minerva. I know @Jdlrobson you were hoping there would be a lower lift way we could transition to that goal, but Im not sure if thats really possible given the design changes and the fact that its already a decent chunk of work to replace the search code in Minerva with Codex

My suggestion for this task would be to simplify it as much as possible, to just getting search to work with dark mode (i.e. no moving of the search icon, no adding/removing buttons, no changes to functionality). This is with the assumption this task will be modifying Minerva search code that we want to throw away down the line

In T358904#9662275, @bwang wrote:

Yes, the intention was to use the codex search component to replace the one that's in there now.

@JScherer-WMF Ah I see. My analysis is that that goal requires 2 larger tickets: first one for implementing the "mobile version" of the typeahead search component in Codex (i imagine this would likely need coordination with DST as im not sure if our proposed design is a general solution), and a second for using typeahead search inside Minerva. I know @Jdlrobson you were hoping there would be a lower lift way we could transition to that goal, but Im not sure if thats really possible given the design changes and the fact that its already a decent chunk of work to replace the search code in Minerva with Codex

My suggestion for this task would be to simplify it as much as possible, to just getting search to work with dark mode (i.e. no moving of the search icon, no adding/removing buttons, no changes to functionality). This is with the assumption this task will be modifying Minerva search code that we want to throw away down the line

I think that's a fair reduction in scope. I'll update the ticket accordingly so that it's just icons and colours changing.

We do want the codex search in there eventually, though, right? That would give us a responsive search across Vector and Minerva. cc @ovasileva .

This is the non-codex version. I will update the reqs to include it as the recommended experience.

We do want the codex search in there eventually, though, right? That would give us a responsive search across Vector and Minerva. cc @ovasileva .

We do want the codex search eventually. I think the plan was to do that work as we're looking into the search empty state so that we can combine efforts across desktop/mobile. I can set up a separate goal ticket that can collect all the work related to that.

In T358904#9662535, @JScherer-WMF wrote:

This is the non-codex version. I will update the reqs to include it as the recommended experience.

thank you, this looks good and ill use this for QA for this task

In T358904#9662653, @JScherer-WMF wrote:

If we used the whole TypeAheadSearch component as it's spec'd in Codex. It would look like this:

Would it be more or less work to do it this way @bwang ?

I think this could be possible, we could hide the big "Search" button since its too big, and i guess the current search on mobile doesnt have one anyway. The big difference in functionality is the lack of the clear and close button. In my in mind the close button seems pretty important at the very least, not sure about clear, but it seems like these warrant some discussion/research.

In T358904#9664446, @ovasileva wrote:

We do want the codex search in there eventually, though, right? That would give us a responsive search across Vector and Minerva. cc @ovasileva .

We do want the codex search eventually. I think the plan was to do that work as we're looking into the search empty state so that we can combine efforts across desktop/mobile. I can set up a separate goal ticket that can collect all the work related to that.

Thank you for making that ticket olga! that makes sense to me considering theres some design decisions to be made, and at least 1 other separate task for adding typeahead search to minerva

@bwang we lost the estimation on this. Can you add points to it?

Change #1015636 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/MobileFrontend@master] Update mobile search for dark mode

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

@JScherer-WMF I'm a bit confused about the colors in the figma. When I look at the variables used in the figma and their associated values, I see its entirely different than what we have defined in the code. Could you clarify what variables I should be using and where these values are coming from?

In figma

@DTorsani-WMF ^^ did we change the figma colours since we implemented the palette?

For now @bwang please go by the variable names for what we have in prod to unblock dev. I will make sure to double check them in QA.

@JScherer-WMF The biggest discrepancy between the figma colors and prod is with background-color-interactive-subtle, which is applied to the "Search within pages" button

Dark mode
Using the CSS variable:

Light mode
Using the CSS variable:

Change #1015636 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Update mobile search for dark mode, remove unused functions in MobilePage.php

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

@ovasileva and others: Please see https://en.wikivoyage.org/wiki/Wikivoyage:Travellers%27_pub#Change_of_Mobile_View_Watchlist for a potentially urgent problem that's likely related to this.

Change #1019178 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/extensions/MobileFrontend@master] Second attempt at "Update mobile search for dark mode, remove unused functions in MobilePage.php""

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

Change #1019178 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Second attempt at "Update mobile search for dark mode, remove unused functions in MobilePage.php""

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

In T358904#9664446, @ovasileva wrote:

We do want the codex search in there eventually, though, right? That would give us a responsive search across Vector and Minerva. cc @ovasileva .

We do want the codex search eventually. I think the plan was to do that work as we're looking into the search empty state so that we can combine efforts across desktop/mobile. I can set up a separate goal ticket that can collect all the work related to that.

@ovasileva did you ever get the chance to make the goal for replacing the Mobile search with codex?

AC4, AC6, AC9 LGTM! Thanks @Edtadros

In T358904#9723667, @bwang wrote:

In T358904#9664446, @ovasileva wrote:

We do want the codex search in there eventually, though, right? That would give us a responsive search across Vector and Minerva. cc @ovasileva .

We do want the codex search eventually. I think the plan was to do that work as we're looking into the search empty state so that we can combine efforts across desktop/mobile. I can set up a separate goal ticket that can collect all the work related to that.

@ovasileva did you ever get the chance to make the goal for replacing the Mobile search with codex?

Discussed this within the steering group and think we might need more planning for the empty search state for next FY before setting up the work. Once we're committed and ready to begin that work, replacing mobile search would be considered a technical enabler (subtask) of that epic.