Page MenuHomePhabricator

Add message for no results in TypeaheadSearch
Closed, ResolvedPublic

Description

Description

Currently if there are no results for a search we show the option to search within pages:

Screen Shot 2021-07-19 at 11.23.11 AM.png (126×849 px, 21 KB)

The experience would be more clear/understandable if we also showed a message explaining that there are no matching pages:

image.png (151×789 px, 24 KB)

Notes

It would be good to eventually have alignment with mobile here, regarding icons, wording, and layout:

Screen Shot 2021-07-19 at 11.43.04 AM.png (195×497 px, 17 KB)

Event Timeline

This is how this works on mobile currently:

Screen Shot 2021-07-28 at 5.19.00 PM.png (348×870 px, 39 KB)

Perhaps this could be considered as part of porting the mobile search ?

This is how this works on mobile currently:

Screen Shot 2021-07-28 at 5.19.00 PM.png (348×870 px, 39 KB)

Perhaps this could be considered as part of porting the mobile search ?

when is that planned for? I think it's important to have this as part of the new desktop search first and foremost.

In T286922#7246761, @alexhollender wrote:

This is how this works on mobile currently:

Screen Shot 2021-07-28 at 5.19.00 PM.png (348×870 px, 39 KB)

Perhaps this could be considered as part of porting the mobile search ?

when is that planned for? I think it's important to have this as part of the new desktop search first and foremost.

About a month or two, which may be quicker than waiting for the sticky header work to finish, but don't think we should work on search bugs on an adhoc basis as would be a big context switch for engineers if they're not focusing on other search issues at the same time.

In T286922#7246761, @alexhollender wrote:

This is how this works on mobile currently:

Screen Shot 2021-07-28 at 5.19.00 PM.png (348×870 px, 39 KB)

Perhaps this could be considered as part of porting the mobile search ?

when is that planned for? I think it's important to have this as part of the new desktop search first and foremost.

About a month or two, which may be quicker than waiting for the sticky header work to finish, but don't think we should work on search bugs on an adhoc basis as would be a big context switch for engineers if they're not focusing on other search issues at the same time.

+1.

StevenSun added a project: Codex.
StevenSun added a subscriber: StevenSun.

I will implement this in Codex.

Change 771982 had a related patch set uploaded (by Steven Sun; author: Steven Sun):

[design/codex@main] TypeaheadSearch, styles, docs: Add message for empty result

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

What it looks like:

Snipaste_2022-03-19_18-43-40.png (148×892 px, 23 KB)

@StevenSun awesome. Are you able to do the styling so that it looks like the mockup in the task description (i.e. more spacing between the items, and a border)?

What it looks like:

Snipaste_2022-03-19_18-43-40.png (148×892 px, 23 KB)

@StevenSun awesome. Are you able to do the styling so that it looks like the mockup in the task description (i.e. more spacing between the items, and a border)?

@alexhollender_WMF Do you mean like this?

image.png (151×789 px, 24 KB)

(My current patch is in the same with the style of mobile skin)

@StevenSun yes, I am comparing the screenshot you posted with the mockup I posted:

your screenshotmy mockup
Snipaste_2022-03-19_18-43-40.png (148×892 px, 23 KB)
image.png (151×789 px, 24 KB)

Hey, @StevenSun. Thanks for your contribution!

This Codex task flew under the radar of the designers in the Design Systems Team. In our specifications for the "no results" state of the TypeaheadSearch component (you can find them in this Figma board), the "No matches found" message is indeed visually separated from the footer – following (with some small changes) the original design by @alexhollender_WMF. It seemed more straightforward to include this hint where results would heave been displayed, instead of modifying the component's footer.

Screenshot 2022-03-22 at 16.19.48.png (310×1 px, 48 KB)

@alexhollender_WMF @Sarai-WMDE Thanks for your explanation. But I have a question about the sperated message: should it emit search-result-click event? If yes, what index value will be in the event data? (Previously in T303481 the footer's index is set to the number of results)

Hey, @StevenSun. The "No results" message shouldn't be clickable/emit any events.

Implementation of this is not exactly well-supported in Codex at the moment, unfortunately.

The Menu component has a slot called footer for a final, non-interactive item such as a "no results" message. However, TypeaheadSearch's search footer is interactive, and is created by adding a fake final item to the searchResults array, then using the Menu component's menuItem slot to create custom content for the search footer. We implemented it this way so that the search footer would be included in the loop of menu items that users can navigate through via up and down arrow keys. So, if we use the Menu component's footer slot for the "no results" text, it will appear below the search footer.

We've had some discussions about menu footers and other interactive/non-interactive menu "items" in T300679, and it seemed like specifically handling common cases (rather than offering endless flexibility) was the way to go. Because of this, I would propose we change the Menu component's footerslot to only cover the use case of no-results text. The demos we have that use the footer slot only use it for this purpose, anyway. We could rename it noResults and move it above all the other actual menu items. The parent component will still need to determine whether the slot should display, though—we can't just display it when there are no menu items provided to menu, since TypeaheadSearch will always at least provide the search footer item.

I think I will update T300679 later today to better reflect the discussion we've had in the comments there, and to include the non-interactive footer/no results stuff. We can solidify the work that needs to be done in that task. @StevenSun I'll tag you there when it's updated so we can figure out how to move forward—we want to support your contribution and make sure it doesn't linger in code review for too long!

Change 771982 abandoned by Steven Sun:

[design/codex@main] TypeaheadSearch, styles, docs: Add message for empty result

Reason:

See discussion on phabricator

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

@StevenSun now that T304457 is resolved, work on this task can resume. The TypeaheadSearch component can use the Menu component's no-results slot. Because the search footer menu item will always exist in TypeaheadSearch, we can't rely on the Menu component's default behavior of displaying the no-results slot when there are zero menuItems. Instead, TypehaeadSearch will need to pass the showNoResultsSlot prop to tell Menu to show the no-results slot when there are zero searchResults in TypeaheadSearch.

Let me know if you have any questions or feedback!

@StevenSun now that T304457 is resolved, work on this task can resume. The TypeaheadSearch component can use the Menu component's no-results slot. Because the search footer menu item will always exist in TypeaheadSearch, we can't rely on the Menu component's default behavior of displaying the no-results slot when there are zero menuItems. Instead, TypehaeadSearch will need to pass the showNoResultsSlot prop to tell Menu to show the no-results slot when there are zero searchResults in TypeaheadSearch.

Let me know if you have any questions or feedback!

Thanks! I will upload a new patch for this task later.

Change 776290 had a related patch set uploaded (by Steven Sun; author: Steven Sun):

[design/codex@main] Typeaheadsearch: Add message for no result

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

STH renamed this task from [Search] Add message for no results to Add message for no results in TypeaheadSearch.Apr 15 2022, 9:06 PM

Change 776290 merged by jenkins-bot:

[design/codex@main] Typeaheadsearch: Add message for no result

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

Signing this off since pending design fixes have been documented in a separate task T306350: Update search footer styles to match the design spec. Thanks, @StevenSun !

STH changed the task status from Open to In Progress.Apr 28 2022, 6:56 PM