[EuiSelectable] Add support for Indeterminate values

[jportner]

#1107 added indeterminate values for EuiCheckbox, but EuiSelectable doesn't have an equivalent.

Kibana needs this in elastic/kibana#67380.

[hetanthakkar]

@cchaos We don't have styles for handling indeterminate value in EuiSelectable.right!?

[cchaos]

Yeah this is a broader decision that will need to be lead by design.

[MichaelMarcialis]

Per recent Slack conversations, I wanted to chime in on this issue with some added context regarding the desire to add an indeterminate state to items within the EuiSelectable component.

The case for adding an indeterminate state

In the Kibana issue @jportner references above, a new bulk action will be made available in the saved object management interface. This new bulk action will allow users to share multiple saved objects across multiple spaces. As users attempt to share multiple saved objects, there is a chance that a portion of those selected saved objects have already been shared across one or more spaces. As such, we need a way to indicate this to users. An example of the proposed interface can be seen below:

A similar case may also exist in the form of a future enhancement to tag management. Eventually, the hope is to allow users to share multiple tags across multiple spaces via bulk actions (which would also necessitate an indeterminate state if using the EuiSelectable component).

Why not use EuiCheckboxGroup instead?

Technically speaking, we could. However, EuiSelectable does come baked in with some nice features, including search, a scrolling container, support for icon prepends, etc. (all of which happened to be used in the cases mentioned above).

And then there’s also the aesthetic component. In the above use case, there would likely be many options available to select. The EuiCheckboxGroup component doesn’t look as nice as an EuiSelectable in situations with an exceedingly large list of options (at least IMO).

We could of course customize/style the contents of EuiChecboxGroup and work in support for search to accommodate, but my first instinct was to use EuiSelectable for the reasons above.

What is the thing in between the search bar and selectable items in the screenshots?

This is the proposed utility bar component.

[cchaos]

TBH, That's a lot of meaning to put on a simple square icon. I had to read your description to understand the screenshot, when at first glance I had no idea what that icon meant. I think it bears needing a tooltip to give user's this description and therefore, would need to be a custom icon which is what is currently being placed there instead of the internal check icon.

So my honest opinion is that it's too vague of an icon to be directly part of the selectable component. But since EuiSelectable supports a completely custom display, you absolutely can attain your desired design by still using that component.

[MichaelMarcialis]

So my honest opinion is that it's too vague of an icon to be directly part of the selectable component. But since EuiSelectable supports a completely custom display, you absolutely can attain your desired design by still using that component.

Yeah, I agree with you that the square icons I used to indicate indeterminate state in those screenshots is too vague. It was my poor attempt at being consistent with the indeterminate state of the EuiCheckbox component (which also utilizes such a square), but perhaps that consistency is unnecessary here, as it hurts the UX. Assuming a better/alternative icon was used, would that make it more amenable to include as part of the EuiSelectable component? Or would you still recommend the custom route?

[cchaos]

Assuming a better/alternative icon was used, would that make it more amenable to include as part of the EuiSelectable component?

That's the problem. I can't think of an "appropriate" icon that, in itself, can convey such a unique case without giving the user more feedback as to what it means. I would recommend the custom route because it allows you to wrap your chosen icon in a tooltip to provide that meaningful feedback.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.