Combobox/add custom element when suggestions not found

[vykes-mac]

What?

The PR adds a prop to the ComboxControl component so that an element can be passed to be rendered when there are no suggestions found based on the search query entered.

Why?

This PR is more of an enhancement and provides a better user experience when searching the the ComboboxControl

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

[github-actions]

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 <vykesmac@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: matt-west <mattwest@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

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".

[tyxla]

@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?

[jasmussen]

Something like "No items found".

Sounds good to me. Any downsides?

[tyxla]

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:

gutenberg/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

Line 139 in 6831711

<Item>{ __( 'No items found' ) }</Item>

[ciampo]

@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 🙏

[matt-west]

Thanks for implementing this @vykes-mac. 🙌

[vykes-mac]

@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 .

[mirka]

@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 .

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.

[vykes-mac]

@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 .

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