Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Oct 21, 2024
Merged

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

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bfb3f06
add experimental prop for rendering a custom component when no sugges…
vykes-mac Oct 15, 2024
7037c79
render custom no suggestion found element if provided and suggestions…
vykes-mac Oct 15, 2024
e945b6e
add storybook example
vykes-mac Oct 15, 2024
c824183
update readme file with prop
vykes-mac Oct 15, 2024
e12aec4
add changelog entry
vykes-mac Oct 15, 2024
0bc3703
remove extra prop and always show the items not found copy
vykes-mac Oct 16, 2024
16ca239
update changelog
vykes-mac Oct 16, 2024
edb25fd
remove the extra prop
vykes-mac Oct 16, 2024
c017455
show pointer only when items are available
vykes-mac Oct 17, 2024
f47c999
update changelog
vykes-mac Oct 17, 2024
16de046
update changelog entries to unreleased
vykes-mac Oct 18, 2024
604bce9
update changelog
vykes-mac Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

- `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142))
- `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142))

ciampo marked this conversation as resolved.
Show resolved Hide resolved
### Bug Fixes

- `Tooltip`: add `aria-describedby` to the anchor only if not redundant ([#65989](https://github.com/WordPress/gutenberg/pull/65989)).
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/form-token-field/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@
padding: $grid-unit-10 $grid-unit-15;
min-height: $button-size-compact;
margin: 0;
cursor: pointer;
box-sizing: border-box;

&.is-selected {
Expand All @@ -189,4 +188,8 @@
background-color: $components-color-accent-transparent-40;
}
}

&:not(.is-empty) {
cursor: pointer;
}
}
6 changes: 6 additions & 0 deletions packages/components/src/form-token-field/suggestions-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { MouseEventHandler, ReactNode } from 'react';
* WordPress dependencies
*/
import { useRefEffect } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
	}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@ciampo ciampo Oct 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

{ __( 'No items found' ) }
</li>
) }
</ul>
);
}
Expand Down
Loading