Remove logic to display button on hover from TypeaheadSearch component
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• Sarai-WMDE
	Jun 1 2022, 3:27 PM

Description

Background/Goal

The Codex TypeaheadSearch component has been designed and built on top of the SearchInput component. Like its "parent", TahS should present two static anatomic variants:

A variant that features only a single input type search
A variant that also includes a 'Search' button besides the input

Nevertheless, in order to meet the behavior of the Vector 2022 version of TypeaheadSearch, the Codex component doesn't feature a static search button: instead it only displays it on hover.

We consider that this logic is not core to the Codex component, and therefore would like to remove it.

Considerations

The behavior will need to be introduced in context, as part of the new Vector 2022 skin implementation of the TahS component, and distributed from there.

Acceptance criteria

The logic that makes the TypeaheadSearch's button to be displayed on hover is removed: the button is either consistently present (in the 'with button' variant of TahS) or absent (in case of the input-only/default variant).

Details

Subject	Repo	Branch	Lines +/-
Search: Use Codex and Vue 3 instead of WVUI and Vue 2.	mediawiki/skins/Vector	master	+6 K -3 K
search: Make TypeaheadSearch button only appear on hover	mediawiki/skins/Vector	master	+48 -7
TypeaheadSearch: Remove hover effect from button	design/codex	main	+27 -53

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Duplicate	None	T299666 Add TypeaheadSearch component to Codex
Resolved	• Sarai-WMDE	T297025 Add TypeaheadSearch to Codex
Resolved	• EUdoh-WMF	T309722 Remove logic to display button on hover from TypeaheadSearch component

Event Timeline

• Sarai-WMDE created this task.Jun 1 2022, 3:27 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 1 2022, 3:27 PM

• Sarai-WMDE mentioned this in T307203: Decide how to handle TypeaheadSearch's button display logic.Jun 1 2022, 3:28 PM

• Sarai-WMDE added a parent task: T297025: Add TypeaheadSearch to Codex.Jun 2 2022, 11:09 AM

AnneT claimed this task.Jun 2 2022, 1:56 PM

AnneT edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.

AnneT moved this task from Committed to Ready for Development on the Design-System-Team (Design-System-Sprint) board.

Jdlrobson moved this task from Incoming to Search on the Desktop Improvements (Vector 2022) board.Jun 2 2022, 6:15 PM

@Catrope feel free to grab this one if you want to!

Change 803378 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] TypeaheadSearch: Remove hover effect from button

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

gerritbot added a project: Patch-For-Review.Jun 7 2022, 1:52 AM

• Catrope claimed this task.Jun 7 2022, 1:53 AM

• Catrope moved this task from Ready for Development to Code Review on the Design-System-Team (Design-System-Sprint) board.

• Catrope added a subscriber: AnneT.

Change 803381 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/skins/Vector@master] search: Make TypeaheadSearch button only appear on hover

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

As part of making this change, I noticed that the hover transition looked a bit weird, and found that it was because the button appeared in 100ms but the border next to it appeared as part of the border color change transition which lasts 250ms. To make it look better, I slowed down the button appear transition to 250ms as well. But if that's not desirable, we could instead speed up the border transition to 100ms.

Hey @Catrope. Great catch! I think your approach makes total sense. At the same time, it looks like the Vector 2022 TahS doesn't have any transitions applied to it, so we should make sure we get design approval on this: should we ping Alex Hollender to take a look at the Vector patch?

Edit: I just checked the patch TypeaheadSearch: Remove hover effect from button and it looks amazing! So glad to have consistent SearchInput and TypeahSearch components 🎉

I've merged the Codex patch, but will leave this in the code review column until the Vector patch is resolved. Based on comments in the Less, transition styles were disabled in the Vector implementation to avoid showing a transition in the following scenario:

User starts typing in the server-rendered search box before JS loads
Vue app loads, replaces server-rendered search box, and focuses on the Vue search input for seamless UX

So we may need to consider disabling the button transition here, too. That said, this is probably a common case with an input that replaces a server-rendered version, so we may want to think about accommodating this in Codex via a prop. See the patch for more discussion.

Change 803378 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch: Remove hover effect from button

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

AnneT changed the task status from Open to In Progress.Jun 7 2022, 5:06 PM

In T309722#7985373, @Sarai-WMDE wrote:

Hey @Catrope. Great catch! I think your approach makes total sense. At the same time, it looks like the Vector 2022 TahS doesn't have any transitions applied to it, so we should make sure we get design approval on this: should we ping Alex Hollender to take a look at the Vector patch?

You're right, I missed the fact that the transition was disabled completely, because of what Anne explains in her comment.

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

[mediawiki/skins/Vector@master] Use Codex and Vue 3 instead of WVUI and Vue 2.

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

Change 803381 abandoned by Anne Tomasevich:

[mediawiki/skins/Vector@master] search: Make TypeaheadSearch button only appear on hover

Reason:

Squashed into base patch as part of patchset 28 https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/758961/27..28

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

As noted above, the separate patch that implemented this fix has been approved by both Jon and me, and I have squashed it into the main Vector patch to implement CdxTypeaheadSearch. Once that patch has been merged, this can be moved into Design Sign-off.

• Sarai-WMDE moved this task from Code Review to Pending Release on the Design-System-Team (Design-System-Sprint) board.Jun 28 2022, 10:14 AM

• Sarai-WMDE moved this task from Pending Release to Code Review on the Design-System-Team (Design-System-Sprint) board.

Change 758961 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Search: Use Codex and Vue 3 instead of WVUI and Vue 2.

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

AnneT reassigned this task from • Catrope to • EUdoh-WMF.Jul 19 2022, 3:20 PM

AnneT moved this task from Code Review to QTE Sign-off on the Design-System-Team (Design-System-Sprint) board.

Volker_E removed a project: Patch-For-Review.Jul 19 2022, 5:09 PM

Jdlrobson mentioned this in T313562: Design review the visual enhancement and layout changes.Jul 21 2022, 10:54 PM

Hi @Catrope, just confirming my experience on Beta:

When the Wiki page loads for the first time, there is no "Search" button on hover-over.
If the user clicks in the search box, clicks out and then hovers over the input field, the "Search" button is displayed.

Is the aim of this ticket to remove the functionality completely?

No, the aim of this ticket was to move the code for this functionality, but keep the functionality intact. What you describe is the expected behavior.

Thanks for the clarification!

Product sign-off complete

Jdlrobson moved this task from Search to Work with other teams on the Desktop Improvements (Vector 2022) board.Aug 11 2022, 6:05 PM

ldelench_wmf closed this task as Resolved.Aug 14 2022, 11:16 PM

Remove logic to display button on hover from TypeaheadSearch componentClosed, ResolvedPublicActions