ref(components): extracted a DragReorderButton component#110982
ref(components): extracted a DragReorderButton component#110982JoshuaKGoldberg merged 1 commit intomasterfrom
Conversation
github-actions
bot
added
the
Scope: Frontend
JoshuaKGoldberg
force-pushed
the
drag-reorder-button
branch
from
fedd98e to
4351e7e
Compare
| @@ -14,7 +15,7 @@ export interface QueryFieldProps { | |||
| fieldOptions: React.ComponentProps<typeof TableQueryField>['fieldOptions']; | |||
| onChange: (newValue: QueryFieldValue) => void; | |||
| value: QueryFieldValue; | |||
| attributes?: UseDraggableArguments['attributes']; | |||
| attributes?: DraggableAttributes; | |||
There was a problem hiding this comment.
While we're here 😄
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| size="zero" | ||
| priority="transparent" | ||
| /> | ||
| <StyledDragReorderButton /> |
There was a problem hiding this comment.
Inline cursor style overrides ghost's grabbing cursor
Medium Severity
The Ghost styled component uses button { cursor: grabbing; } to show a "grabbing" cursor on all buttons during an active drag. Previously, the old DragAndReorderButton didn't set any inline cursor style, so the Ghost's CSS worked. Now, DragReorderButton always applies style={{cursor: 'grab'}} as an inline style, which has higher specificity than any CSS class rule and cannot be overridden by the Ghost's button { cursor: grabbing; } selector. This causes the drag handle in the ghost overlay to incorrectly show a grab cursor instead of grabbing while dragging.
Additional Locations (1)
There was a problem hiding this comment.
[Question] 🤔 I'm not sure which way is better... the custom ghost-y one before, or aligning to the new way?
There was a problem hiding this comment.
I believe this comment is wrong. This is already visually buggy. Both in dev and on prod, the standard cursor is shown and the ghost visualization is offset too far to the right:
There was a problem hiding this comment.
(I'm talking with product about filing an issue)
There was a problem hiding this comment.
JoshuaKGoldberg
force-pushed
the
drag-reorder-button
branch
from
4351e7e to
17240f6
Compare
JoshuaKGoldberg
force-pushed
the
drag-reorder-button
branch
from
17240f6 to
5a0695c
Compare
2 participants
As noted in #110842 (comment), we have a lot of very similar drag-to-reorder buttons. This extracts a shared
DragReorderButtoncomponent for all of them.One notable change:
style={{cursor: 'grab'}}was only added in one existing component, under rules/uptime/assertions. Now it's in the shared one.I'm checking with design today and we might end up changing it - but I don't think the single cursor style should block review.Confirmed we prefer the grabby one.Fixes EXP-856