-
Notifications
You must be signed in to change notification settings - Fork 91
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
fix(drag-drop) : improves drop indicator positioning in draggable context #1538
Conversation
0a8a69e
to
98a37b0
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A couple of observations on the pattern demo:
- The drop indicator is not available with keyboard (non-mouse) interaction
- In vertical mode, the drop indicator shows at the top of the list by default, but the item goes to the bottom when dropped
I'm not sure if these are working as expected or represent short-comings with dnd-kit
. Depending on the outcome, I may have a follow-on comment/concern re: the WAI-ARIA approach with the drop indicator <li>
.
@jzempel I believe it's related to dnd-kit but I'll look into it today. 👌🏻 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a particular treatment that hasPlaceholder
is supposed to have on the demo?
6e60131
to
1f412dd
Compare
@jzempel (in the above, "Corn" is being dragged) |
112a565
to
0d0a0de
Compare
…ne; adds drop indicator for keyboard navigation
d8b413d
to
3752f45
Compare
Detail
While enhancing the drag and drop pattern with
DraggableList.DropIndicator
, it became clear it wasn't fully compatible with CSS transform (commonly used in dnd libraries).This PR does two things:
DraggableList.DropIndicator
's compatibility with CSStransform
; the result is significantly less overhead, e.g. spacing offsets and testsThe only thing not covered in the pattern overhaul is showing danger state on
Dropzone
, but that'll be included in website docs.Checklist
👌 design updates will be Garden Designer approved (add the designer as a reviewer)(no change)yarn start
)?bedrock
)♿ tested for WCAG 2.1 AA accessibility compliance(no change)