[DRAFT] Add EuiButtonSplit

[ryankeairns]

Relates to #4171

Important

Using the PR to gauge interest in the component before committing to adding it to the library.
For those interested / with use cases, please check the documentation preview link.

Summary

Having been granted access to Windsurf, I wanted to put it to the test. I consider this PR a reference for what it can do and for a future PR toward a new split button.

TODO

• Add 1px divider/spacer to text + fill version

Screenshots

• Under the hood this uses an EuiButton and EuiButtonIcon wrapped in an EuiPopover.
• Color, size, and fill are enforced to be consistent.
• Storybook and test were also created with Windsurf.

Dark mode, text color with border style

Light mode, filled, primary color with 1px gap

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[ryankeairns]

De-prioritized. Can reference in the future.

[ryankeairns]

Gathering feedback on potential use cases to determine if we want to take this out of draft/pursue adding it.

[ryankeairns]

Isabela and Julian shared recent examples; Andrea expressed interest for Discover.
We also have several existing example of the 'two button' pattern already in the product.

Personally, I'm feeling like there is enough demand to go forward, but we can give it more time to marinate.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 537fff7
• Documentation website
• Storybook

History

• 💚 Build #939 succeeded 537fff7
• 💚 Build #929 succeeded 1f8dc44
• 💚 Build #928 succeeded 1f8dc44
• 💚 Build #894 succeeded 10b7e93
• 💚 Build #893 succeeded 10b7e93
• 💚 Build #880 succeeded 6e3f376

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 537fff7

History

• 💚 Build #4494 succeeded 1f8dc44
• 💚 Build #4465 succeeded 10b7e93
• 💚 Build #4457 succeeded 6e3f376
• 💚 Build #4296 succeeded 0d0e587

[ryankeairns]

Laura brought up a good point that we could consider replacing some existing use cases of popover buttons (image below).

'Popover buttons' are a documented usage pattern on the EuiButton page (here) but the new split button seems a superior interaction. In order to swap them out, one would need to define a main (left button) action. Supposing we replace even some of these, that tacks on a few more use cases to the cause.

Side note: Consider removing the 'Popover buttons' section from the EuiButton page as part of these work. It would still be possible - to trigger a popover from a button - but we could instead promote EuiButtonSplit for such multi-action use cases.

[ryankeairns]

Closing this; being used as reference only for new, forthcoming PR.