[Unified search] Make resizable button as the EUI one

[stratoula]

Summary

Part of #136950

Make the custom resizable button to look and feel like the EUIResizableButton (not exported by EUI).

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServicesSv)

[stratoula]

@MichaelMarcialis I think I managed to move the styles from eui to our editor. 🤞

[MichaelMarcialis]

Amazing, @stratoula! Thanks so much for putting this together. I've left some comments below for your review.

Would it be possible to move the resizable button so that it appears on top of the border that divides the unified search UI and the rest of the page content (see example GIF below)? I think doing so would be a nice touch.

[cchaos]

My walking away piece of advice:

Don't copy/paste direct EUI styles/code. Ask EUI to export this button at the top level: https://github.com/elastic/eui/blob/main/src/components/resizable_container/resizable_button.tsx

It'll keep in sync with any a11y or style changes and you can request general improvements that will benefit all usages. 😸

[stratoula]

Yes @cchaos you are right. I created an issue here elastic/eui#6100
@MichaelMarcialis does it make sense to wait for EUI team to respond on my request and continue with this PR depending on the decision?

[MichaelMarcialis]

Yes @cchaos you are right. I created an issue here elastic/eui#6100
@MichaelMarcialis does it make sense to wait for EUI team to respond on my request and continue with this PR depending on the decision?

Thanks for that advice, @cchaos. @stratoula, since you've already done the work here, I say going ahead with this PR and then switching when EUI exports the button makes sense to me. The issue you created will remind us not to forget to make the switch.

[stratoula]

@MichaelMarcialis I think I addressed everything!

[MichaelMarcialis]

Thanks for making these updates, @stratoula. Leaving you a few additional comments below for your review.

Also, I noticed that in expanded mode the space between editor footer and border is smaller than the space space between border and page content. On initial glance, it looks like this might be happening because of the negative margining that exists on the editor footer's EuiFlexGroup. Would it be possible to fix this issue so that the space between both areas is equal (8px from border)?

[MichaelMarcialis]

Hey, @stratoula. I've opened a quick design PR for this branch. Once that gets merged in, this looks good from my perspective. Approving now so I don't hold you up further. Thanks!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: e5b11f3

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
unifiedSearch	220	226	+6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
unifiedSearch	228.1KB	232.6KB	+4.5KB

History

• 💚 Build #63477 succeeded e2cafff
• 💚 Build #63268 succeeded b7319ab
• 💚 Build #63085 succeeded 8a0a47c
• 💚 Build #63070 succeeded 1083809
• 💚 Build #62415 succeeded eab01f9
• 💚 Build #62047 succeeded 4fcfec2

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[jloleysens]

Did not test locally, but code changes LGTM