Currently, the EuiResizableButton component is designed to appear like our grab and grabHorizontal icons by default. When hovering, these faux icons transition to 2px wide gray border, extending the full width/height of the parent EuiResizableContainer. When active/focus, the border color changes to blue, with a lower opacity blue emanating from the border.

Current

While these styles work fine in some circumstances, I often find myself wishing we could provide a more minimalist option in some interfaces (ex. ES|QL editor vertical resizing). Would it be possible to add a new prop to the EuiResizableButton that functions as follows in the different states?

• Default: 1px wide euiTheme.colors.lightShade border, extending the full width/height of the parent EuiResizableContainer.
• Hover: Border width transitions to 2px and color transitions to euiTheme.colors.mediumShade.
• Active/Focus: Border color transitions to euiTheme.colors.primary.

Here's a quick mockup of what I was thinking. Thoughts?

Default

Hover

Active/Focus

CCing @cee-chen, as we chatted about this in the last Figma EUI library working group meeting.