-
Notifications
You must be signed in to change notification settings - Fork 829
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
Spike: Look into making EuiDataGrid columns draggable #7943
Comments
🗒 Looking at Important The investigation was done considering this previous update #7898 to support interactive header content.
🗺 There are a few considerations for this update:
⌨ Suggested keyboard navigation:
|
@MichaelMarcialis Are there any design concerns here? Do we want to show an icon to indicate dragging behavior? |
This is rad! |
Keyboard UX looks 👨🍳 💋 - very excited for that! We should make sure the
We generally have everything as a prop that can be optionally turned off. For this, I would suggest using the existing const columns = [{
id: 'someColumn',
actions: {
showDragHandle: false,
showMoveLeft: false,
showMoveRight: false,
},
}];
<EuiDataGrid columns={columns} /> |
@1Copenut Do you have additional thoughts on this intended update? |
This looks wonderful, @mgadewoll! Very well done!
Which icon do you mean here? Do you mean the Otherwise, no other major design concerns on my end. The only thing worth mentioning was the header offset that happens during the dragging event. I love the offset during the keyboard dragging event, but it feels slightly strange during the mouse dragging event. During a mouse drag, it looks like the user is grabbing the air above the heading, rather than the heading itself. Would it be possible to limit the offset to only the keyboard dragging event? |
Potentially related to dragging within a stacking context - the draggable area cannot have transforms etc sadly 😬 |
While we can't change the |
I was referring to the drag icon |
Thanks for that update, @mgadewoll! The mouse dragging looks great now. Is there any way we can limit the
I think the current hover/focus behavior you have is perfect. The only thing I would suggest is changing |
To separate those styling overrides we'd need to keep track of the different event modes storing them in a state and triggering an additional rerender because of it. Imho, it's not worth that to just have a slightly different positioning 🙈 |
Summary
A prep work for #7136
See if it's possible to implement this quickly and ensure keyboard navigation and overall accessibility requirements are met
Document findings in comments to this issue
The text was updated successfully, but these errors were encountered: