| • alexhollender_WMF | |
| Jul 19 2021, 3:43 PM |
| F35020027: Screenshot 2022-03-22 at 16.19.48.png | |
| Mar 22 2022, 3:24 PM |
| F35011859: Snipaste_2022-03-19_18-43-40.png | |
| Mar 19 2022, 10:47 AM |
| F34568738: Screen Shot 2021-07-28 at 5.19.00 PM.png | |
| Jul 29 2021, 12:19 AM |
| F34556291: Screen Shot 2021-07-19 at 11.23.11 AM.png | |
| Jul 19 2021, 3:43 PM |
| F34556313: image.png | |
| Jul 19 2021, 3:43 PM |
| F34556317: Screen Shot 2021-07-19 at 11.43.04 AM.png | |
| Jul 19 2021, 3:43 PM |
Currently if there are no results for a search we show the option to search within pages:
The experience would be more clear/understandable if we also showed a message explaining that there are no matching pages:
It would be good to eventually have alignment with mobile here, regarding icons, wording, and layout:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Typeaheadsearch: Add message for no result | design/codex | main | +110 -6 | |
| TypeaheadSearch, styles, docs: Add message for empty result | design/codex | main | +62 -29 |
This is how this works on mobile currently:
Perhaps this could be considered as part of porting the mobile search ?
This is how this works on mobile currently:
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.
This is how this works on mobile currently:
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.
This is how this works on mobile currently:
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.
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
What it looks like:
@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:
@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?
@StevenSun yes, I am comparing the screenshot you posted with the mockup I posted:
| your screenshot | my mockup |
|---|---|
 | |
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.
@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)
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
@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!
Change 776290 had a related patch set uploaded (by Steven Sun; author: Steven Sun):
[design/codex@main] Typeaheadsearch: Add message for no result
Change 776290 merged by jenkins-bot:
[design/codex@main] Typeaheadsearch: Add message for no result
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 !