Custom resize cursors #3535
Custom resize cursors #3535
Conversation
|
Build successful! 🎉 |
|
What's the plan for the aria hooks? Will we somehow fall back to the standard ones? Embed these? |
I decided to move it out entirely, there's enough information coming from the hook to set whatever cursor you want. Reason being that it seemed like a rendering concern more than aria. Especially since you need to set the cursor on hover as well as setting the entire document, every element, with !important during drag. Without creating a stylesheet on the fly, setting it for every element would be impossible. |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
…um into custom-resize-cursors
|
Build successful! 🎉 |
|
The most recent storybook v18 build isn't showing the new cursor. It is showing a cursor, but it doesn't look like the one I see in files nor the first version of storybook with this PR. |
|
Build successful! 🎉 |
There was a problem hiding this comment.
The behavior seems good to me, but I'm not sure if #3535 (comment) is blocking/resolved (just not even sure what exactly it means heh).
Some extra things that are out of scope/can be done as followup/maybe non-issues:
- Can/should we bump up the default min width of a resizable column? Now that we have a chevron some of the story columns are quite cramped at the min width.
This maybe a non-issue since the user could define a nicer min width themselves but perhaps we can approximate a new default min width value that is a 3 or 4 letter word + chevron
- Should these column header buttons be truncating text? They currently don't. It would also be nice if it was like Picker where the chevron was prioritized over the text, at least when it is visible (display: none when not hovered?)
|
Build successful! 🎉 |
|
I didn't consider what Daniel reported as an issue, but since we are this doesn't seem right. Give it keyboard focus and then mouse over it. |
Will be fixed by #3560 update: fixed |
|
Build successful! 🎉 |
# Conflicts: # packages/@react-spectrum/table/src/TableView.tsx
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Closes
Moves the sort icon to the start of its header cell
Shows a chevron indicating a menu on column headers for hover/focus, this can be seen on any resizable column or any resizable and sortable column
Displays a custom cursor for resizing
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: