Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiFlyout] Make resizeIndicator configureable #7988

Closed
kertal opened this issue Aug 28, 2024 · 1 comment · Fixed by #8010
Closed

[EuiFlyout] Make resizeIndicator configureable #7988

kertal opened this issue Aug 28, 2024 · 1 comment · Fixed by #8010
Assignees

Comments

@kertal
Copy link
Member

kertal commented Aug 28, 2024

Is your feature request related to a problem? Please describe.
This problem surfaced in elastic/kibana#188940. In Kibana Discover users can expand a row in Discover's DataTable (EuiDataGrid), this is displayed in an EuiFlyout in push style. When the flyout is open it is difficult to click on the scrollbar because of the commend is superseeded by the flyoutinteraction allowing to resize the flyout.

Describe the solution you'd like
There should be a dedicated prop, something like resizeIndicator="border|handle" to mirror EuiResizableButton's styling (basically if the indicator style gets changed to handle, we'll move the drag handle on the inside of the flyout)

Describe alternatives you've considered
in a chat with @cee-chen and @mgadewoll they were thinking of using of https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter, but this was skipped due to lack of Safair support

Desired timeline
This ain't a high priority issue but it's one of those things that increase the usability of Kibana Discover, so we appreciate this enhancement!

Additional context
Image

@mgadewoll
Copy link
Contributor

🗒 A possible solution for this is to adjust the alignment of the resize button with the flyout.
The default behavior stays as is, the resize button is aligned centered on the flyout edge. Additionally we would provide the option to align the button with the edge of the flyout, keeping it fully inside the flyout to prevent overlaps with outer content.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants