Page MenuHomePhabricator

TypeaheadSearch: search input should expand width when menu opens
Closed, ResolvedPublic

Description

Description

Due to the thumbnail alignment challenge (context) the search input expands in width upon focus. To clarify the current sequence of events:

  1. someone focuses the search input
  2. the search input expands in width
  3. someone types a query in the search input
  4. the list/menu of search results appear

When we initially launched the new search we heard complaints that the expanding of the search input was distracting. After further investigation we've decided that it is less noticeable/distracting if we the search input expands at the same moment as the list/menu of search results appear.
To clarify the desired sequence of events:

  1. someone focuses the search input
  2. someone types a query in the search input
  3. the list/menu of search results appear & the search input expands in width

Prototype to demonstrate: https://di-search-delayed-bump.web.app/Exuma_(musician)

Video to demonstrate:


Acceptance criteria

  • CdxTypeaheadSearch component is updated to expand the input when the menu opens and un-expand the input when the menu closes
  • No regressions occur in the Vector implementation

Related Objects

StatusSubtypeAssignedTask
DuplicateNone
Resolved Sarai-WMDE
ResolvedJdlrobson
Resolvedovasileva
ResolvedNone
Resolved alexhollender_WMF
Duplicate alexhollender_WMF
ResolvedBUG REPORTJdlrobson
ResolvedJdlrobson
Resolvedovasileva
DuplicateNone
DuplicateNone
ResolvedLGoto
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTNone
Duplicate alexhollender_WMF
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
ResolvedJdlrobson
Resolvedovasileva
Resolvedovasileva
DuplicateNone
Resolvedovasileva
ResolvedBUG REPORTovasileva
ResolvedEdtadros
DeclinedNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedBUG REPORTovasileva
Resolvedovasileva
ResolvedDesignCCiufo-WMF
Resolved DAbad

Event Timeline

@Sarai-WMDE as you can see in the prototype and/or video in the task description, when the search input expands the search icon animates to it's new position. I'm curious what you think about this? I think it feels quite smooth, and maybe makes the expanding less jarring?

alexhollender_WMF renamed this task from Search field should wait to expand width until results have loaded to Search input should wait to expand width until results have loaded.Jul 7 2022, 9:12 PM

@ovasileva @Jdlrobson flagging this task: it's something I would like for us to do before the wider deployment of Vector 2022, and is unique because it needs to be done within Codex.

Hey @alexhollender_WMF. Sorry for the late response. I have a slight preference towards the new animation sequence. I personally find it smoother, but I can't be sure whether the expansion would really be less noticeable/distracting for users: were any impressions or feedback collected already?

Hey @alexhollender_WMF. Sorry for the late response. I have a slight preference towards the new animation sequence. I personally find it smoother, but I can't be sure whether the expansion would really be less noticeable/distracting for users: were any impressions or feedback collected already?

no testing has been done yet. I could ask around on the design team if that would be a helpful starting point?

Change 827525 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [WIP, do not merge] Expand icon padding on menu open

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

If it's helpful, I set up a demo of the proposed behavior in the Codex TypeaheadSearch component (see the first demo on the page)

If it's helpful, I set up a demo of the proposed behavior in the Codex TypeaheadSearch component (see the first demo on the page)

it's super helpful to see it with the actual component, thanks @AnneT.
I think it fixes the distraction/confusion. @stjn please see the demo @AnneT has created.

Thanks again for checking, @stjn! 🙏🏻

Looks like we should move ahead with this approach as a solution to T314179: New Vector's expanding search icon is confusing and distracting. This task has now been added to the "Needs refinement" column in the Codex board. Hope that's ok, @DAbad. We might want to assign a high priority to it since, based on the feedback from the Web team, this is a blocker for enwiki deployment of desktop improvements.

AnneT changed the task status from Open to In Progress.Sep 1 2022, 2:32 PM
AnneT claimed this task.
AnneT triaged this task as High priority.
AnneT updated the task description. (Show Details)

We should proceed with this work in the sprint as per our priority to unblock desktop improvements.

AnneT renamed this task from Search input should wait to expand width until results have loaded to TypeaheadSearch: search input should expand width when menu opens.Sep 1 2022, 5:47 PM
AnneT updated the task description. (Show Details)

Change 829053 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] TypeaheadSearch: Expand input on menu open

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

Change 829053 abandoned by Anne Tomasevich:

[design/codex@main] TypeaheadSearch: Expand input on menu open

Reason:

duplicate

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

Change 829054 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/skins/Vector@master] Remove unneeded expansion styles from search box code

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

Unfortunately, there are styles in Codex and Vector that are tightly coupled, and I couldn't think of a way to make a non-breaking change to resolve this task.

In Vector, when you focus on the server-rendered search box, there are styles in place to expand the input to ease the transition between the server-rendered search box and the Vue one (which is expanded when it first loads). Once the expansion no longer happens on focus, these styles should be removed. If they are removed before the change is made in Codex, that transition would jumpy. This may be acceptable, but it would be better if the Codex and Vector changes went out at the same time.

To summarize the patches:

  • Codex patch to expand the input when the menu opens
  • Vector patch to remove the expansion of the server-rendered search box on focus

The next release of Codex that contains this Codex change should be merged into MediaWiki core on the same day that the Vector patch is merged.

@AnneT could we start making Codex add a class to the html element ? e.g. codex-v-<version #>
That way we'd be able to make changes targetting different versions of Vector which avoids non-breaking changes.

@Jdlrobson I like this idea; I'll open a task for exploring it so we can avoid issues like this in the future

Change 827525 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch: Expand input on menu open

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

Change 831947 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.1.1 to v0.2.1

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

Change 831947 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.1.1 to v0.2.1

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

Change 829054 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove unneeded expansion styles from search box code

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

The fix for this is available on beta and will ride the train next week

The component appears to be displaying the new behavior as expected in beta. Checked in Firefox v104, Chrome 105 and Safari 15.6. Pinging @alexhollender_WMF, so he can do a final check. Thank you!

looks great, I'm super appreciative of this work 💙

Volker_E updated the task description. (Show Details)

This has made it already into Codex v0.2.0 and into MediaWiki core with it's direct successor v0.2.1