Dual list - Add empty state

[mmenestr]

Is this a new component or an extension of an existing one?
This is for an existing component: The dual list selector.

Describe the feature
Would like to add an empty state to the dual list selected that appears inside the "results" box when a search is applied that doesn't match any of the options.

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
No visuals, but here is a description: maybe just adding a small or xs empty state using the text and icon here: https://www.patternfly.org/v4/components/empty-state#no-match-found

Let me know if you do need a mock and I can whip one up!

cc: @nicolethoen

[nicolethoen]

@mmenestr my only question is whether this empty state message should be different if there are no filters and it's just an empty list? That may be the starting state in many cases for the chosen options side of the dual list selector.

either way, I imagine a final solution here would also allow the user to override the empty state message and provide their own if they wanted.

[mmenestr]

Yes, we probably should have an empty state on the chosen side when there is nothing there as well, and maybe on the selection side too if all items have been selected and moved to the chosen side.

Proposed message for empty chosen side:
Header: No items have been chosen yet
Body: Use the arrows to select options from the available list

Proposed message for empty available list:
Header: No more available items
Body: All available items have been moved to the chosen list

But yes, I would probably allow for override if the use case calls for a different 'header' than "Available list" and "Chosen list"

[mcarrano]

@nicolethoen Will this issue require any core work, first?

[nicolethoen]

I dont think so - only if they want to update any demos/examples to include the empty state

[mmenestr]

Here is a hacky mock for this:

Would want to use the XS Empty state, and for it to have a default message as shown above, with the option to customize if product teams want to! Empty state should be centered in the box.