[Discover] Add discover SplitButton component by AlexGPlay · Pull Request #231786 · elastic/kibana

AlexGPlay · 2025-08-14T10:46:56Z

Summary

Adds a split button that can be later used in the new background search implementation.

Example	Screenshot
Both icons
Default
Danger
Success
Warning
Disabled

There are more examples in the storybook.

How to test?

To test it you can go to the component storybook by running yarn storybook unified_search and going to http://localhost:9001/?path=/story/split-button--default

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Unit or functional tests were updated or added to match the most common scenarios
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

AlexGPlay · 2025-08-20T10:41:23Z

src/platform/plugins/shared/unified_search/.storybook/main.js

-import { defaultConfig } from '@kbn/storybook';
-import { merge as webpackMerge } from 'webpack-merge';
-import { resolve } from 'path';
-
-const mockConfig = {
-  resolve: {
-    alias: {
-      '@kbn/esql/public': resolve(__dirname, '../public/mocks/esql_editor.tsx'),
-    },
-  },
-};
-
-module.exports = {
-  ...defaultConfig,
-  webpackFinal: (config) => webpackMerge(config, mockConfig),
-};


I updated this storybook config to the basic one - this one crashed and after testing the default one it was working as expected

elasticmachine · 2025-08-20T13:10:28Z

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

...atform/plugins/shared/unified_search/public/query_string_input/split_button/split_button.tsx

akowalska622

LGTM, thanks for changes!

ThomThomson

Can we move the split button itself into a package? I know it will be useful in other places -the Dashboard top nav for instance.

I assume this is only meant to be temporary until EUI supports split-buttons? Still, it might be best to have our temporary code in one place.

l-suarez · 2025-08-27T10:28:43Z

LGTM, great work @AlexGPlay!

For smaller screens, I want to recommend using the combo Text | Icon to avoid leaving the CTA with just two icons. cc @ninoslavmiskovic

Split button on smaller screens following current behaviour:

Split button with new behaviour:

As a side note, I noticed that we are going to "responsive mode" quite early, at the 1440px mark. Could we revise this limit and apply these styles at 768px like the appBar, for example? cc @ThomThomson

responsiveness.mp4

kertal

Thx for the move to the package, FYI @andreadelrio
I think we need to adjust code ownership for this until EUI takes over , else nobody owns this

https://github.com/elastic/kibana/blob/main/.github/CODEOWNERS

kertal

LGTM, just had a quick look, @akowalska622 had a closer one, so data discovery is covered. just one question about the yarn.lock

yarn.lock

elasticmachine · 2025-09-01T09:52:27Z

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/split-button`	-	2	+2

Unknown metric groups

API count

id	before	after	diff
`@kbn/split-button`	-	2	+2

History

💚 Build #333045 succeeded 1c66daa
💚 Build #332985 succeeded f692508
💔 Build #332958 failed 9202271
💛 Build #331389 was flaky c4e60f5
💔 Build #329617 failed f776b0a
💔 Build #329605 failed f39a4ff

cc @AlexGPlay

## Summary Closes elastic#225702 Adds a split button that can be later used in the new background search implementation. | Example | Screenshot | |--|--| | Both icons | <img width="169" height="47" alt="image" src="https://github.com/user-attachments/assets/71c9af0d-f6e6-4030-9525-0ec49e4fb98d" /> | | Default | <img width="167" height="54" alt="image" src="https://github.com/user-attachments/assets/fdb31a84-c521-445f-ad20-f23fee6c3976" /> | | Danger | <img width="165" height="50" alt="image" src="https://github.com/user-attachments/assets/7370076f-b7b7-4a96-b915-d6122cecc02d" /> | | Success | <img width="161" height="48" alt="image" src="https://github.com/user-attachments/assets/0348edb4-f02f-4286-8319-b326ede24572" /> | | Warning | <img width="161" height="51" alt="image" src="https://github.com/user-attachments/assets/611a2ef3-5a62-46c4-b12d-050f3000a01a" /> | | Disabled | <img width="165" height="53" alt="image" src="https://github.com/user-attachments/assets/5412881a-7cd5-49c0-bab1-9533ec50049c" /> | There are more examples in the storybook. #### How to test? To test it you can go to the component storybook by running `yarn storybook unified_search` and going to http://localhost:9001/?path=/story/split-button--default ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

AlexGPlay force-pushed the 225702-split-search-button branch from f776b0a to 86611c1 Compare August 20, 2025 10:30

AlexGPlay self-assigned this Aug 20, 2025

AlexGPlay added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// Feature:Search Sessions labels Aug 20, 2025

AlexGPlay commented Aug 20, 2025

View reviewed changes

AlexGPlay marked this pull request as ready for review August 20, 2025 13:10

AlexGPlay requested a review from a team as a code owner August 20, 2025 13:10

akowalska622 reviewed Aug 21, 2025

View reviewed changes

AlexGPlay force-pushed the 225702-split-search-button branch from c4e60f5 to 571a487 Compare August 25, 2025 06:44

kertal requested review from akowalska622 and l-suarez August 25, 2025 08:11

akowalska622 approved these changes Aug 26, 2025

View reviewed changes

ThomThomson reviewed Aug 26, 2025

View reviewed changes

AlexGPlay force-pushed the 225702-split-search-button branch from 31b8469 to f692508 Compare August 27, 2025 09:02

kertal reviewed Aug 27, 2025

View reviewed changes

kertal approved these changes Aug 28, 2025

View reviewed changes

yarn.lock Show resolved Hide resolved

AlexGPlay and others added 8 commits September 1, 2025 09:12

Add discover SplitButton component

6fa35b6

[CI] Auto-commit changed files from 'node scripts/notice'

cb2ece2

Update storybook config

583300d

Update to useEuiTheme and design token

a4f9fe9

Move split button to package

78e9f34

[CI] Auto-commit changed files from 'node scripts/notice'

70ad7f9

Update tsconfig types

43a9494

Add kbn-split-button codeowners

52a976b

AlexGPlay force-pushed the 225702-split-search-button branch from 1c66daa to 52a976b Compare September 1, 2025 07:12

AlexGPlay merged commit ad496c1 into elastic:main Sep 1, 2025
14 checks passed

kibanamachine added the v9.2.0 label Sep 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Add discover SplitButton component#231786

[Discover] Add discover SplitButton component#231786
AlexGPlay merged 8 commits intoelastic:mainfrom
AlexGPlay:225702-split-search-button

AlexGPlay commented Aug 14, 2025 •

edited

Loading

Uh oh!

AlexGPlay Aug 20, 2025

Uh oh!

elasticmachine commented Aug 20, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

akowalska622 left a comment

Uh oh!

ThomThomson left a comment

Uh oh!

l-suarez commented Aug 27, 2025

Uh oh!

kertal left a comment

Uh oh!

kertal left a comment

Uh oh!

Uh oh!

elasticmachine commented Sep 1, 2025

API count

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

AlexGPlay commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test?

Checklist

Uh oh!

AlexGPlay Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Aug 20, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

akowalska622 left a comment

Choose a reason for hiding this comment

Uh oh!

ThomThomson left a comment

Choose a reason for hiding this comment

Uh oh!

l-suarez commented Aug 27, 2025

Uh oh!

kertal left a comment

Choose a reason for hiding this comment

Uh oh!

kertal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Sep 1, 2025

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

API count

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

AlexGPlay commented Aug 14, 2025 •

edited

Loading