Combobox, FormTokenField: show message when no matches found #66142

vykes-mac · 2024-10-15T19:24:00Z

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?

Displays a "No items found" message when no suggestions are 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

…tions are found

… are empty

github-actions · 2024-10-15T19:24:16Z

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: mirka <0mirka00@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>

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

ciampo · 2024-10-16T09:47:53Z

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 · 2024-10-16T10:42:40Z

@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 · 2024-10-16T10:46:03Z

Something like "No items found".

Sounds good to me. Any downsides?

tyxla · 2024-10-16T10:50:29Z

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 · 2024-10-16T11:08:23Z

@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 · 2024-10-16T13:15:50Z

Thanks for implementing this @vykes-mac. 🙌

vykes-mac · 2024-10-16T17:46:43Z

@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 · 2024-10-16T17:51:31Z

@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 · 2024-10-16T19:35:40Z

@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

mirka

Thank you for the follow-up! I found a styling issue, but otherwise it's testing well both in FormTokenField and ComboboxControl.

mirka · 2024-10-17T06:56:53Z

packages/components/src/form-token-field/suggestions-list.tsx

@@ -156,6 +157,11 @@ export function SuggestionsList<
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */
 			} ) }
+			{ suggestions.length === 0 && (
+				<li className="components-form-token-field__suggestion is-empty">


Were you planning on styling the is-empty modifier? I'm thinking we at least need to move the cursor style:

&:not(.is-empty) { cursor: pointer; }

the class is more of placeholder so that where the component is used the user can easily overide the styling with is-empty class. But your suggestion here make sense, I'll add it

where the component is used the user can easily overide the styling with is-empty class.

That is something that we actively discourage — internal classnames are not public APIs and should not be considered as such.

Please do not use the .is-empty classname as a way to apply style overrides.

mirka · 2024-10-17T06:58:41Z

packages/components/CHANGELOG.md

@@ -19,6 +19,7 @@

 -   `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)).
 -   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
+-   `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142)) 


Looks like this also affects the FormTokenField component when the __experimentalExpandOnFocus prop is enabled.

ciampo

LGTM 🚀

Before merging, could you move the two CHANGELOG entries under the "Unreleased" section? This is necessary because a new version of the package was released since this PR was opened.

Thank you 🙏

packages/components/CHANGELOG.md

Mamaduka · 2024-10-22T02:24:46Z

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: #64086 (comment).

ciampo · 2024-10-22T10:02:43Z

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.

Mamaduka · 2024-10-22T10:07:12Z

V2 sounds good 👍

…ss#66142) Co-authored-by: vykes-mac <vykesmac@git.wordpress.org> Co-authored-by: mirka <0mirka00@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>

vykes-mac added 4 commits October 15, 2024 14:12

add experimental prop for rendering a custom component when no sugges…

bfb3f06

…tions are found

render custom no suggestion found element if provided and suggestions…

7037c79

… are empty

add storybook example

e945b6e

update readme file with prop

c824183

vykes-mac requested a review from ajitbohra as a code owner October 15, 2024 19:24

add changelog entry

e12aec4

tyxla assigned vykes-mac Oct 16, 2024

tyxla added [Package] Components /packages/components [Type] Enhancement A suggestion for improvement. labels Oct 16, 2024

tyxla requested a review from a team October 16, 2024 07:21

vykes-mac added 3 commits October 16, 2024 14:46

remove extra prop and always show the items not found copy

0bc3703

update changelog

16ca239

remove the extra prop

edb25fd

mirka reviewed Oct 17, 2024

View reviewed changes

vykes-mac added 2 commits October 17, 2024 14:04

show pointer only when items are available

c017455

update changelog

f47c999

ciampo approved these changes Oct 18, 2024

View reviewed changes

update changelog entries to unreleased

16de046

ciampo reviewed Oct 21, 2024

View reviewed changes

packages/components/CHANGELOG.md Outdated Show resolved Hide resolved

ciampo changed the title ~~Combobox/add custom element when suggestions not found~~ Combobox, FormTokenField: show message when no matches found Oct 21, 2024

update changelog

604bce9

ciampo enabled auto-merge (squash) October 21, 2024 15:21

ciampo merged commit 6fbca55 into WordPress:trunk Oct 21, 2024
62 checks passed

github-actions bot added this to the Gutenberg 19.6 milestone Oct 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Combobox, FormTokenField: show message when no matches found #66142

Combobox, FormTokenField: show message when no matches found #66142

vykes-mac commented Oct 15, 2024 •

edited by ciampo

Loading

github-actions bot commented Oct 15, 2024 •

edited

Loading

ciampo commented Oct 16, 2024

tyxla commented Oct 16, 2024

jasmussen commented Oct 16, 2024

tyxla commented Oct 16, 2024

ciampo commented Oct 16, 2024 •

edited

Loading

matt-west commented Oct 16, 2024

vykes-mac commented Oct 16, 2024

mirka commented Oct 16, 2024

vykes-mac commented Oct 16, 2024

mirka left a comment

mirka Oct 17, 2024

vykes-mac Oct 17, 2024

ciampo Oct 18, 2024 •

edited

Loading

mirka Oct 17, 2024

ciampo left a comment

Mamaduka commented Oct 22, 2024

ciampo commented Oct 22, 2024

Mamaduka commented Oct 22, 2024

Combobox, FormTokenField: show message when no matches found #66142

Combobox, FormTokenField: show message when no matches found #66142

Conversation

vykes-mac commented Oct 15, 2024 • edited by ciampo Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

github-actions bot commented Oct 15, 2024 • edited Loading

ciampo commented Oct 16, 2024

tyxla commented Oct 16, 2024

jasmussen commented Oct 16, 2024

tyxla commented Oct 16, 2024

ciampo commented Oct 16, 2024 • edited Loading

matt-west commented Oct 16, 2024

vykes-mac commented Oct 16, 2024

mirka commented Oct 16, 2024

vykes-mac commented Oct 16, 2024

mirka left a comment

Choose a reason for hiding this comment

mirka Oct 17, 2024

Choose a reason for hiding this comment

vykes-mac Oct 17, 2024

Choose a reason for hiding this comment

ciampo Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

mirka Oct 17, 2024

Choose a reason for hiding this comment

ciampo left a comment

Choose a reason for hiding this comment

Mamaduka commented Oct 22, 2024

ciampo commented Oct 22, 2024

Mamaduka commented Oct 22, 2024

vykes-mac commented Oct 15, 2024 •

edited by ciampo

Loading

github-actions bot commented Oct 15, 2024 •

edited

Loading

ciampo commented Oct 16, 2024 •

edited

Loading

ciampo Oct 18, 2024 •

edited

Loading