[EuiResizableButton] Add new indicator style prop

[cee-chen]

Summary

closes #7447

This PR updates <EuiResizableButton /> to accept a indicator={handle|border} prop, which allows rendering either the default grab handle or a thin subdued border. It also updates <EuiFlyoutResizable /> to use this new prop.

Screencaps

QA

• https://eui.elastic.co/pr_7455/#/layout/resizable-container#resizable-button-indicator
  • Confirm the new border appearance looks works as expected in all states (hover, active, etc)
  • Confirm that all other drag handle indicators on the page behave as before/on production in all states, with no visual regressions
• https://eui.elastic.co/pr_7455/storybook/?path=/story/euiresizablebutton--playground
  • Confirm that changing alignIndicator when indicator is set to border does nothing
  • Confirm that switching between indicator border/handle works as expected

General checklist

• Browser QA
  • Checked in both light and dark modes
  • 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
  • Tested Storybook
    - [ ] Added or updated jest and cypress 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
  - [ ] Updated the Figma library counterpart - Resizable container doesn't appear to be in our Figma library

[cee-chen]

@MichaelMarcialis Do you mind taking a look at this and confirming if it looks good to you / if Discover would be able to use it?

[1Copenut]

👍 LGTM! I went through the manual QA with four evergreen browsers and quick verified the screen reader announcement for horizontal and vertical scroll handles.

[JasonStoltz]

Code LGTM

[MichaelMarcialis]

Wow, that was very fast! Please forgive me for the late review. Amazing work as usual, @cee-chen. This addition looks fantastic.

I imagine that this would indeed allow us to replace some of the current implementations of the resizable buttons in Discover (such as the one in the unified search interface and the ones dividing other sections of the app that are currently utilizing CSS overrides to achieve this style). CCing @stratoula and @jughosta, in case they wanted to take a look as well.

The only comment I have on the PR is regarding the prop name and values. Is there any concern that the new showIndicator={false} prop may give the false impression that there will be no affordance for the resizeable button whatsoever (when in reality, affordance is still provided on hover and focus, and is just displayed as a standard border rather than resembling one of our grab icons by default)? Would changing the prop name and it's values to something like handle="icon" (which would be the default) and handle="border" be easier to understand? I'll defer to ya'll on this, but wanted to bring it up for discussion.

In any case, that alone isn't worth holding you up over. Regardless of what direction you wish to go with the prop name and values, I'll go ahead and approve now. Thanks again!

[cee-chen]

Ooo, changing the API name to be clearer is a great call - thanks Michael!! I'll make that change here shortly!

To match the existing alignIndicator prop, I'm thinking indicator={handle|border} - WDYT? The prop itself having handle in the name is a bit confusing to me personally. I see a handle as something small like a doorknob, and not like a whole border. 🤔

[stratoula]

This is fantastic! In ES|QL editor I am already using the EUI one but I can use this prop to make it closer to what @MichaelMarcialis wants!!

[davismcphee]

Hey team, thanks for adding this, and we'll definitely use it in Discover instead of overriding the CSS! One thing to note though is that we also override the blue shadow around the drag border, keeping just the dark blue highlighting on the border:

This won't prevent us from using this new prop though of course, and only overriding the shadow (or doing whatever our design friends instruct us to 😁), just wanted to note it here as well.

[JasonStoltz]

@davismcphee Thank you for the callout @davismcphee! My 2 cents, unless there's something super unique about Discover that requires the blue shadow, I'd vote to remove that override to keep consistent.

[cee-chen]

++ to what Jason said. I personally don't think removing the slight blue shade on focus/active is necessary, and it provides important visual context for mouse users with, e.g. low vision.

I asked @MichaelMarcialis about this in the originating issue (#7447 (comment)) and he didn't push back on it, which I assume means he's in total agreement 😆 (just kidding, please feel free to chime in Marcialis!)

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7455/
• Storybook: https://eui.elastic.co/pr_7455/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1812e86

History

• 💔 Build #1257 failed 60d3439
• 💚 Build #1253 succeeded 9e5c42a
• 💚 Build #1251 succeeded fa0cd4f

[davismcphee]

Thanks both! Your points both make sense and I don't really have a strong opinion on it either way, so I'll defer to @andreadelrio and @MichaelMarcialis as the design leads on the Discover design refresh.

[MichaelMarcialis]

To match the existing alignIndicator prop, I'm thinking indicator={handle|border} - WDYT? The prop itself having handle in the name is a bit confusing to me personally. I see a handle as something small like a doorknob, and not like a whole border. 🤔

I like it. Let's go with your proposed wording, @cee-chen.

++ to what Jason said. I personally don't think removing the slight blue shade on focus/active is necessary, and it provides important visual context for mouse users with, e.g. low vision.

I asked @MichaelMarcialis about this in the originating issue (#7447 (comment)) and he didn't push back on it, which I assume means he's in total agreement 😆 (just kidding, please feel free to chime in Marcialis!)

Oh yeah, I forgot to respond to that! Yeah, I'm good with keeping the light blue aura/shadow on focus and active states. That way the only difference between the two resizable buttons is whether it shows as a drag handle or a border. If we start encountering issues with the blue aura/shadow thing in our designs at a later date, we can revisit.

[cee-chen]

Huzzah! Thanks y'all, this was a great discussion! I'm going to go ahead and merge in this PR, it should be in Kibana main sometime next week. I miiiight try to go ahead and remove/replace the custom CSS in Discover with this new prop as part of the next EUI upgrade, but no promises (if it turns out to be too tricky for me to handle). Feel free to shout Davis or Stratoula, if you have any issues using the new prop!