adobe / adobe/react-spectrum

Expose `[data-drag-preview]` on dragged preview div

Open
#8,499 9 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

I would like to implement a UX where the dragged item a GridList is slightly tilted, but all other styles remain, like so:

![Image](https://github.com/user-attachments/assets/0bb18a7a-8a74-49b0-a7c7-5465d0b4e2f8)

### 🤔 Expected Behavior?

![Image](https://github.com/user-attachments/assets/0bb18a7a-8a74-49b0-a7c7-5465d0b4e2f8)

### 😯 Current Behavior

Currently, there is no way to add purely additive styles. The only way to customize the appearance of the drag preview is by providing your own `renderDragPreview`.

The downside of this, is that relative styles are lost. For example, restoring the width of the `div` is difficult if its based on the size of its container.

### 💁 Possible Solution

Add a `data-drag-preview` attribute on the default drag preview, so that additional styles could be added to it easily.

### 🔦 Context

![Image](https://github.com/user-attachments/assets/0bb18a7a-8a74-49b0-a7c7-5465d0b4e2f8)

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Locate the GridList default drag-preview implementation and compare it with the renderDragPreview path. Add the requested data-drag-preview hook to the default preview without replacing its existing sizing behavior, then verify that consumers can apply additive styles while dragging.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.