eui [Spec] Utility bar for meta information and bulk selection actions

Summary

I believe we have a need for a new EUI component that would allow us to prepend meta information and bulk actions to adjacent, related EUI components (namely the tabular-focused ones). The use case for such a supplementary component would be to:

Provide users basic meta information on object/row counts for tabular components (though there may be benefits in using such a component outside of tabular-only contexts).
Conditionally inform users of any current selection status (for example, selected object/row counts).
Conditionally make available bulk actions, if/when such selections are made.
Optionally provide an open area for additional controls and actions.
Provide a consistent means in which to deliver this information and actions to users across EUI and Kibana.

summary

History

Specifically regarding bulk selection and actions, past patterns have emerged across Kibana that required either:

Shuffling around other interface elements (for example, within an EuiSearchBar component) to make way for the conditional appearance of bulk action buttons.
Static appearance of bulk action buttons in a disabled state, until bulk selection occurs (at which point the buttons would become enabled for use).

shuffle

static

Neither of the above are desirable solutions. The shuffling of interface elements can be confusing and potentially obtrusive to users, as it usually demands diminishing the presence of other elements on the page (such as a search bar). The disabling of bulk action buttons artificially bloats the page with controls users are unable to interact with until a bulk selection is made. The hope is that this newly proposed component would alleviate both of these concerns and provide a consistent design pattern.

It's also worth mentioning that the arrival of the new EuiDataGrid component also brought with it a means in which designers and engineers are able to implement bulk actions, but it is currently not an independent component and is tied to EuiDataGrid. Ideally, this would be a separate, agnostic component that could be prepended to any existing EUI element (EuiDataGrid, EuiBasicTable, others) to provide meta information and bulk actions in a consistent and predictable manner.

datagrid

Desired Features

Functional

Default Meta Information

The component should be expected to always present the user with a minimum amount of information related to the content the are currently viewing. In the case of tabular data, the default expectation would be to show a total count of the current objects/rows being presented (based on the currently applied search/filter values or lack thereof).

Conditional Bulk Selection Information & Actions

Assuming the content related to the utility bar supports bulk actions, the selection of one or more objects/rows should cause a count of those selected objects/rows to appear adjacent to the aforementioned total count.

This selection count should also double as a button. Interacting with this button should open a context menu of bulk actions the user can perform on the selected objects/rows. The bulk action context menu should include the option to clear the current bulk selection and at least one additional bulk action at a minimum. This bulk selection count button (and by relation, the total count) should be left-aligned in order to maintain a close proximity to the related content's bulk selection controls (which typically appear in the first, left-hand column of tabular components).

If the related content (ex. tabular component) is paginated, then the use of any "select-all-objects-on-this-page" option should trigger the conditional appearance of a "Select everything on all pages" button (which will cause all objects/rows on all pages to be included within the current bulk selection). Choosing either the clear selection action from the bulk action context menu or interacting with the "select-all-objects-on-this-page" option again should clear the current bulk selection entirely (causing all conditional bulk actions to disappear again).

Optional Props & Children

Ideally, there would be an optional border prop included in this component, which would allow designers and developers to choose how the component should appear in close proximity to a variety of existing EUI components.

Assuming all meta information and bulk actions are left-aligned as detailed above, we can also utilize the right-hand portion of the proposed utility bar component by making it available as a freeform actions area (that accepts any React node). As we cannot assume all actions for content will always be bulk-oriented actions, this will give designers an additional area of possible interactivity without demanding additional space be used (further ensuring consistency). For example, here is an older example of the utility bar concept that was proposed for SIEM to allow users to perform aggregation and column customization actions, in addition the any bulk actions.

Aesthetic

In order to support the easy accompaniment of this component with a wide variety of EUI components, I believe that a minimal design would be best.

Open Questions

Should such a component as this replace or otherwise alter the current controls of the EuiDataGrid component? I assume the answer will be "yes" for consistency, but to what degree may be worth discussing in advance.
Assuming the current design from the provided examples is to be adopted to some degree, does this also warrant the need for a new button size (xxs) to be made available? I've personally desired a 12px font-size EuiButtonEmpty option in a number of circumstances, including here.
@hbharding from the Observability team recently extended this concept by including a bar chart to the proposed utility bar component to provide additional context to the related content. Do we wish to account for such possibilities as being part of the proposed utility bar component? We could keep the utility bar and bar chart separate from one another, however there may be semantic and accessibility value in keeping such a visualization and its legend together in the markup.

Additional Examples

Sep 04 '20 19:09 MichaelMarcialis

Related #3500 #2405

Mar 19 '21 19:03 cchaos

Hey, all! It's been asked that I update this issue with some more exact specifications for this proposed component. I'll attempt to break it down by section and elaborate below. If additional detail is desired, please let me know.

Utility Bar

"Kitchen sink" example

Section breakdown

Container

Overview

Border

Provide a prop to apply an optional border to the component container. Options should include none (default), bottom, top, and both. The reason to include this decorative border as a prop on the component rather than utilize EuiHorizontalRule is because using an hr element may not be semantic in all scenarios.

Padding

Provide a prop to adjust the vertical padding for the component container. Options should include none, 4px, 6px, and 8px (default). This will give developers control to match padding with common adjacent components (i.e. EuiBasicTable) and also control how close the border should appear to the component contents.

Primary content

Overview

Visible item count

A count of the total visible items this component is referencing should always appear within the primary content area. This count should be able to support automatic updates to reflect new item counts due to the application of a search/filter.

Customizable item name

Developers should be able to supply a string to be used as the item name to be displayed in various areas of the component (i.e. visible item count, selected item count). If no string is supplied, we can simply default to items as the string. It may also be useful for developers to account for both singular and plural item names within the component as well.

Dividing border

A dividing vertical border ($euiBorderThin) should conditionally appear after the visible item count when one or more items has been selected by the user. This will help visually separate the visible item count from the bulk actions portion of the primary content section.

Selected item count

A count of the currently selected items should conditionally appear when one or more items has been selected by the user. This count should also optionally be able to double as a button that triggers the bulk action context menu (described further below).

Button to select all items on all pages

A button to select all items on all pages should conditionally appear if the referenced component's items is paginated and all items on the currently viewed page are in a selected state. Interacting with this button should allow the user to perform bulk actions on all items in the referenced component, update the selected item count appropriately, and finally hide this button from the page (as it is no longer needed if all items are selected).

Bulk actions menu

The bulk actions menu appears by users interacting with the selected item count button. Developers should be able to add one or more bulk actions that they wish for users to be able to perform when items in the referenced component are selected. Each action should allow developers to provide an icon, text, onClick action, and the ability to disable.

Additionally, the bulk actions menu should always have Clear selection as the final option. Interacting with this option should clear all items from their selected state in the referenced component.

Supplementary content

The supplementary content section should allow developers to add optional supporting actions or information (i.e. any JSX.Element). In my personal exploration, these tended to take the form of simple buttons or links laid out in an EuiFlexGroup. Some other explorations by folks on the Observability team have also used the space to display a legend for a subsequent bar chart visualization. I think leaving it open to accept any type of content makes the most sense, given the potential diversity of items that may be desirable to add as the component gains adoption.

Other considerations

Button sizes

The intended font size for this component's text and buttons is 12px. Using the v7 theme, this would require either custom styles or the creation of a new smaller EuiButton size. The v8 (Amsterdam) theme changes the font sizes so that an EuiButton with size="xs" is now 12px (where it was previously 14px in v7). How do we best maintain visual consistency of the text/button font size between the two theme versions? Or should we be focusing our efforts on v8 and not be worrying about minor inconsistencies?

Jun 02 '21 20:06 MichaelMarcialis

@MichaelMarcialis Sorry it's taken so long, just trying to find the right time to tackle this one. Thanks for the detailed writeup/breakdown of the Spec. At one point I had also worked through some of the intricacies of table selection, especially across multiple pages. See this Whimsical. At the time I had use a more primitive version of this toolbar, but I think there is still some cross-over that I'd like to pull from that to this, mainly when it comes to the Primary Content which I have also started to pull into a Figma component.

My counter-proprosal:

Primary content

Customizable item name

Developers should be able to supply a string to be used as the item name to be displayed in various areas of the component (i.e. visible item count, selected item count). If no string is supplied, we can simply default to items as the string.

At the very least an "item name" or "title" should be required to name the list of things (if the toolbar exists since it will be optional). But we only need to display it once (not repeated in the bulk actions menu).

This matches the "Feature visibility" mockup provided

![image](https://user-images.githubusercontent.com/549577/132259328-2535db3c-1f99-422e-896d-63bc69dae7cc.png)

It may also be useful for developers to account for both singular and plural item names within the component as well.

Good call!

Visible item count

A count of the total visible items this component is referencing should always appear within the primary content area.

I think we need to take this a step further and show both total count and currently visible. My suggestion is the format of Showing 1-10 of 50.

Clear selection button

While having a "Clear selection" button in the bulk actions dropdown is very helpful, it's also not a quick action. I'd suggest rolling it into the utility bar itself.