WordPress
Combobox/add custom element when suggestions not found
What?
The PR allows the ComboxControl and FormTokenField components to show a message when there are no suggestions matching the input text.
Why?
This PR is more of an enhancement and provides a better user experience when searching the ComboboxControl and FormTokenField components.
How?
Accepts __experimentalRenderNoSuggestionsFound component and displays it when no suggestion is found in the SuggestionsList component.
Testing Instructions
Open Storybook and pick the Components > ComboboxControl component. Search for an item that doesn't exist
and you should see No items found state.
Screenshots or screencast
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Co-authored-by: vykes-mac <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: matt-west <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thank you for opening this PR!
@WordPress/gutenberg-components , what do we think about adding a similar feature directly to the component (no props) and displaying a more generic message? Something like "No items found".
@WordPress/gutenberg-components , what do we think about adding a similar feature directly to the component (no props) and displaying a more generic message? Something like "No items found".
Yeah, I think it might be a better experience than what we're doing now (showing nothing):
@WordPress/gutenberg-design any thoughts or preferences?
Something like "No items found".
Sounds good to me. Any downsides?
Can't think of any. Even that string exists already and will inherit existing translations immediately:
https://github.com/WordPress/gutenberg/blob/683171150bb91c750c717582f736607fafdf1671/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js#L139
@vykes-mac could you change this PR so that the message is always shown (no extra props needed) and the text reads "No items found" ? Thank you 🙏
@ciampo What if we want to customise the copy that's displayed there? Eg. the list is showing Authors instead of No items found I would like to pass my custom messaging No authors found .
@ciampo What if we want to customise the copy that's displayed there? Eg. the list is showing
Authorsinstead ofNo items foundI would like to pass my custom messagingNo authors found.
Would "No matches found" be a more generic wording in this case?
To be honest I prefer not adding a prop right now to customize this, as it will naturally be customizable in the planned version 2 of this component, which will be based on Ariakit and more modular.
@ciampo What if we want to customise the copy that's displayed there? Eg. the list is showing
Authorsinstead ofNo items foundI would like to pass my custom messagingNo authors found.Would "No matches found" be a more generic wording in this case?
To be honest I prefer not adding a prop right now to customize this, as it will naturally be customizable in the planned version 2 of this component, which will be based on Ariakit and more modular.
@mirka I'll proceed with the No items found found then since translation already exist for the string
As a follow-up, can we modify this by allowing a custom component? I think it might help us resolve the first item on this list: https://github.com/WordPress/gutenberg/issues/64086#issuecomment-2258070011.
As Lena mentioned above, we'd rather unlock this level of customizability in the v2 of the component, rather than putting in work on the v1 (unless we're talking about a very important feature / urgent hotfix). There's already a lot on our plate and we're trying to prioritise our focus where it's needed the most.