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

V15: Change drag and drop icon #18519

Open
wants to merge 5 commits into
base: v15/dev
Choose a base branch
from
Open

Conversation

madsrasmussen
Copy link
Contributor

@madsrasmussen madsrasmussen commented Feb 28, 2025

This PR changes the icon to indicate drag and drop in the Backoffice.

We currently use the "move/navigation" icon which is a bit "heavy" in the UI.

I have also introduced the use of the cursor: "grab" style when hovering over an item that can be dragged, and cursor: "grabbing" when actively dragging an item.

I have tried to implement the changes in as many places as possible to ensure the experience is as consistent as possible.

Using the new icon <uui-icon name="icon-drag"></uui-icon>

Example 1
Before:
Screenshot 2025-02-28 at 20 04 15

After:
Screenshot 2025-02-28 at 20 03 49

Example 2
Before:
Screenshot 2025-02-28 at 19 58 30

After:
Screenshot 2025-02-28 at 19 58 10

@madsrasmussen madsrasmussen added area/frontend release/15.4.0 category/ux User experience category/ui User interface and removed category/ux User experience labels Feb 28, 2025
@madsrasmussen madsrasmussen marked this pull request as ready for review February 28, 2025 19:06
@bjarnef
Copy link
Contributor

bjarnef commented Feb 28, 2025

@madsrasmussen perhaps we should add a <umb-drag-handle> component or similar wrapping this? Then most of places it only need to adjust icon once and may be easier for (package) developers to re-use and ensure consistency.

Some inspiration:
https://f36.contentful.com/components/drag-handle
https://reactflow.dev/examples/nodes/drag-handle
https://tiptap.dev/docs/editor/extensions/functionality/drag-handle

Maybe even a <uui-drag-handle>component to UI library sometime later.

And handle accessibility:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-grabbed

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

Successfully merging this pull request may close these issues.

2 participants