Repository navigation
Show the hand cursor on the icon buttons themselves, not their wrapper - #426
Merged
Merged
Conversation
The edit icons, confirm buttons, collapse chevron and custom buttons are real <button> elements, and the UA stylesheet gives every <button> `cursor: default`, which beats inheritance from the wrapper's `cursor: pointer`. So the icons showed the arrow while the gaps between them showed the hand. Host pages with a global button reset (such as the demo's Chakra UI reset) masked this, which is why the demo site looked fine. `cursor: pointer` is set on the button reset rule and on the unlabelled custom-button div, and removed from the wrapper, so only the controls themselves show the hand and the gaps show the normal arrow. Fixes #425 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Bundle size impact
|
| Format | Base raw | PR raw | Δ raw | Base gzip | PR gzip | Δ gzip |
|---|---|---|---|---|---|---|
| esm | 59.33 KB | 59.36 KB | 🔺 +37 B (+0.06%) | 20.99 KB | 21.00 KB | 🔺 +10 B (+0.05%) |
| cjs | 60.77 KB | 60.81 KB | 🔺 +37 B (+0.06%) | 21.01 KB | 21.03 KB | 🔺 +13 B (+0.06%) |
Measured from build/index.{cjs,esm}.js. Gzip at level 9.
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #425
The bug
The edit icons, confirm buttons, collapse chevron and custom buttons are real
<button>elements (since the a11y work in #268). The core stylesheet setcursor: pointeron the.jer-edit-buttons/.jer-confirm-buttonswrappers and relied on the buttons inheriting it. They don't: the user-agent stylesheet gives every<button>cursor: default, and an element's own UA value beats inheritance from a parent. So the icons showed the arrow while the gaps between them showed the hand, exactly as reported.Host pages with a global button reset masked this. The demo uses Chakra UI, whose CSS reset sets
cursor: pointeron everybuttonand[role="button"], which is why the demo site and the local demo looked fine while the reporter's plain CodeSandbox page did not.The fix
cursor: pointermoves off the wrappers and onto the shared button reset rule, which covers the edit icons, the confirm OK/Cancel buttons, labelled custom buttons, the collapse chevron and the string show-more/show-less buttons.div, so it gets its own one-line rule.cursorinherits from the wrapper is corrected.Verification
Checked in real Chrome against the local demo with Chakra's button-cursor reset rule deleted from the page, so the library's own CSS was doing the work. The wrapper and row compute to
auto; every Copy / Edit / Add / Delete button, the collapse chevron, the confirm OK / Cancel buttons and a synthesised unlabelled custom-buttondivcompute topointer.No Jest test, since jsdom doesn't apply user-agent styles and so can't exercise this cascade. The hidden
/raw-htmldemo page (no Chakra provider) is the place to eyeball it.🤖 Generated with Claude Code