Differentiating toolbars and button groups

[rshen91]

In working on elastic/kibana#124372, I'm opening this issue to start a discussion if this component should be taken into EUI vs migration into the shared_ux directory.

[elizabetdev]

Hi @rshen91,

I'm looking at the storybook preview, are these the same buttons used in Lens?

In the past, we started a discussion about adding toolbar buttons in EUI:

• Add toolbar button styles #4730

But it was an early discussion and we need a better spec to know what we should build. At the time, we agreed that @MichaelMarcialis is going to pass us the design spec and after that, we can build the new component.

So I think for now the component should live in the shared-ux and soon we let you know the plans for the EUI toolbar button component.

CC / @cchaos @MichaelMarcialis @ryankeairns @chandlerprall

[cchaos]

I agree with @miukimiu that there are no short-term plans to create this button, so don't hold up the Kibana conversion/plugin move.

I do think it's worth evaluating the details of the component to see how it differs from our own buttons and the override nature of the styles. I think somehow this toolbar button was duplicated in Kibana instead of re-used since there's a presentation_util version as well. So I think the first step is to gather up all the similar types of components that exist in Kibana, the similar issues that exist in EUI and start a spec doc.

[ryankeairns]

I recall @cqliu1 dug into the possibility of re-using what existing in Lens, initially, but we ran into some technical roadblocks with that approach so, in the essence of time, made the decision to come back to making these styles reusable.

FWIW, the current toolbar is used in Dashboard and Canvas, currently.

[ryankeairns]

Update: It looks like @andreadelrio did go back and clean this up, making it a shared Kibana component! (thank you) elastic/kibana#88386

[cchaos]

Right, but there are still 2 components within Kibana that seemingly look and behave similarly:

1. Solution toolbar: code; storybook
2. Toolbar button: original code; storybook from PR

At the very least, Shared-UX should evaluate the duplicity of these two components and hopefully consolidate. Then we can see a final set of needs and can evaluate from EUI.

[MichaelMarcialis]

But it was an early discussion and we need a better spec to know what we should build. At the time, we agreed that @MichaelMarcialis is going to pass us the design spec and after that, we can build the new component.

Yes, apologies for the delay on my part. I haven't had a chance to work on this spec since it was discussed in December that I'd assist with writing it up. I'm hoping to have a chance to tackle it towards the end of the 8.2 dev cycle. Will let ya'll know if that changes. Thanks!

[chandlerprall]

We would also want to ensure proper aria roles/labels exist, and include a full toolbar component (see #3500)

[ryankeairns]

Let's attempt to summarize the lot of related topics and propose some action items.

To start, there are several components at play:

1. EuiButton
2. EuiButtonGroup
3. EuiButtonIcon
4. [Kibana] ToolbarButton
5. EuiDataGrid → data_grid_toolbar & data_grid_toolbar_control

---

Re: custom button styles

With Borealis, (1) EuiButton gets new secondary styles that very closely resemble custom styles that exist on (4) ToolbarButton.

👉 Proposal part 1: Remove the no-longer-necessary styles instead using (3) EuiButtonIcon defaults (i.e. bordered, not shaded)

Note: this is blocked until the new buttons are added to EUI and Kibana is updated
Note: close #4730 once new default button styles are merged

Current custom toolbar buttons in Kibana using ToolbarButton

New default button styles for Borealis

---

Re: proper toolbar component

Related to a comment above, there is an ARIA toolbar role. Per MDN:

The toolbar role defines the containing element as a collection of commonly used function buttons or controls represented in a compact visual form.

This definition likely applies to (2) EuiButtonGroup when using the isIconOnly prop.

👉 Proposal part 2a: Add an ARIA role toolbar to EuiButtonGroup when isIconOnly is true

AND/OR

As noted in #7647 , a toolbar exists within (5) EuiDataGrid (see docs example).

👉 Proposal part 2b: Split the data_grid_toolbar out of EuiDataGrid and into a standalone component.

Note: The ARIA toolbar proposal applies here as well. Also, with a new toolbar component, we could then replace or deprecate the isIconOnly variant of EuiButtonGroup

Important

Unlike the icon-only variant of EuiButtonGroup, the data grid toolbar allows for popover menus. If we were to create a new toolbar component, then the Kibana ToolbarButton could potentially be replaced, as well.

Data grid toolbar with popover open

---

Re: base button groups

In the course of this assessment, it is notable that the variants ofEuiButtonGroup - default vs icon-only - serve different purposes. The former is intended for use in selection while the latter is intended for use as a toolbar. The only commonality is that they visually group buttons.

Guideline from EUI button group docs

An EuiButtonGroup is for indicating selection only. They utilize the type="single" or "multi" prop to determine whether multiple or only single selections are allowed per group.

👉 Proposal part 3: Update the docs to reflect the intent of the EuiButtongGroup variants.

• Move documentation for the default version (i.e. single and multi selection) into the Form > Selection controls section of the docs site.
• Move documentation for the icon-only version (i.e. the result of Proposal 2a/2b) as a standalone toolbar component.