Add toolbar button styles

[ryankeairns]

Perhaps this could instead be a discussion topic, but Lens and the presentation toolbar (Dashboard, Canvas) are using the same toolbar button styles which smells like a possible EUI addition (e.g. new button group variation?).

They've been operating with separate sets of styles and, as of this writing, are having to make simultaneous adjustments due to the Amsterdam switch in order to gain more contrast with the underlying background color.

The latest design proposal is here (adding a border):

[elizabetdev]

Thanks @ryankeairns,

For sharing this. The Maps app also has toolbar buttons.

I think in EUI we could definitely create a toolbar button and toolbar button groups to create some consistency across all apps.

[chandlerprall]

Related: ARIA toolbar proposal #2405

[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.

[cchaos]

This issue is still valid, but it would be helpful if the EUI team had a more thorough design spec to go off of. @ryankeairns Is there someone on your team who is familiar with all the states/configurations that can build this out in Figma?

[ryankeairns]

@cchaos yep, @MichaelMarcialis can assist with that although it won't be real soon. Let's consider that a next step and he'll get to it as his workload allows.

[daveyholler]

@MichaelMarcialis and @ryankeairns - do y'all still wanna get this implemented in EUI?

[MichaelMarcialis]

From my perspective, I believe it still makes sense to support this at the EUI level. The current landscape is a bit all over the place:

• Lens uses the ToolbarButton shared component in Kibana.
• Dashboard and Canvas use a mix of a deprecated QuickButtonGroup component alongside EuiButton components with style overrides.
• Maps also uses its own set of toolbar button markup and styles.

In any case, either a new component or enhancement to the existing button components at the EUI level would likely help provide better consistency across the apps and help us retire some of these redundant, bespoke solutions.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[MichaelMarcialis]

I believe this is still a relevant issue, and I'm seeing that I probably owe ya'll some additional spec details. I'll put it on my to-do list to write something up as soon as I'm able.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[MichaelMarcialis]

Still relevant.

[MichaelMarcialis]

I think this issue might be taken care of as part of the working being done for the visual refresh buttons (as the new secondary button styles can more easily be used in locations where we've previously used these rogue toolbar button styles): https://github.com/elastic/platform-ux-team/issues/396. CCing @ek-so to confirm whether I'm correct.

[ek-so]

Hey @MichaelMarcialis that is right. Our "text" buttons have the style I believe can be used for that exact purpose.
Screenshot of the button styles in a current design state for the context.

[ryankeairns]

Note to future selves:

1. close this issue once the new button styles are merged
2. create an issue in Kibana to remove custom styles on their ToolbarButton component (assign to SharedUX)