feat: add cursor-pointer rule for all clickable elements#181
feat: add cursor-pointer rule for all clickable elements#181gregor-tokarev wants to merge 2 commits intostylessh:mainfrom
Conversation
📝 WalkthroughWalkthroughAdds global CSS rules in ChangesGlobal cursor rules
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/styles/globals.css`:
- Around line 184-250: The interactive-selector group (notably the plain a[href]
and input[type="..."] selectors in the block containing button:not(:disabled)...
and a[href]) currently lacks explicit
:not([disabled])/:not([aria-disabled="true"])/:not([data-disabled]) exclusions
so elements like a[href][aria-disabled="true"] or
input[type="button"][data-disabled] still match the pointer rule; update the
group by adding the same exclusion list
(:not([disabled]):not([aria-disabled="true"]):not([data-disabled]):not([data-disabled="true"]))
to a[href] and each input[type="..."] selector (and any other plain selectors
such as label[for] or summary if needed) so disabled-marked elements no longer
receive cursor: pointer while keeping the existing disabled cursor rules intact.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1b13f094-7d21-4325-9795-1d77b11d2d80
📒 Files selected for processing (1)
packages/ui/src/styles/globals.css
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/src/styles/globals.css`:
- Around line 217-228: The global selector list including [role="menuitem"] and
[role="option"] is outside any `@layer` and is overriding Tailwind's
cursor-default utility on Radix components; fix by either removing
cursor-default from the component classNames on DropdownMenuItem,
DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuSubTrigger, and
SelectItem so the intent is explicit, or remove [role="menuitem"] and
[role="option"] from the selector list and move this cursor rule into an
appropriate `@layer` (e.g., `@layer` base) so it doesn't trump Tailwind utilities.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f9ba31bf-591e-4062-91a7-1de87717902d
📒 Files selected for processing (1)
packages/ui/src/styles/globals.css
| [role="menuitem"]:not([aria-disabled="true"]):not([data-disabled]):not( | ||
| [data-disabled="true"] | ||
| ), | ||
| [role="menuitemcheckbox"]:not([aria-disabled="true"]):not([data-disabled]):not( | ||
| [data-disabled="true"] | ||
| ), | ||
| [role="menuitemradio"]:not([aria-disabled="true"]):not([data-disabled]):not( | ||
| [data-disabled="true"] | ||
| ), | ||
| [role="option"]:not([aria-disabled="true"]):not([data-disabled]):not( | ||
| [data-disabled="true"] | ||
| ), |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify that DropdownMenuItem and SelectItem receive role="menuitem" / role="option" from Radix primitives.
rg -n "role=" --type=tsx -C 2 "dropdown-menu|select" packages/ui/src/components/ 2>/dev/null || \
rg -rn "role=" -C 2 packages/ui/src/components/Repository: stylessh/diffkit
Length of output: 1830
🏁 Script executed:
fd -type f -name "*dropdown*" packages/ui/src/components/Repository: stylessh/diffkit
Length of output: 231
🏁 Script executed:
fd -type f -name "*select*" packages/ui/src/components/Repository: stylessh/diffkit
Length of output: 231
🏁 Script executed:
sed -n '180,230p' packages/ui/src/styles/globals.cssRepository: stylessh/diffkit
Length of output: 1819
🏁 Script executed:
find packages/ui/src/components -name "*dropdown*" -o -name "*select*"Repository: stylessh/diffkit
Length of output: 143
🏁 Script executed:
cat packages/ui/src/components/dropdown-menu.tsxRepository: stylessh/diffkit
Length of output: 8099
🏁 Script executed:
cat packages/ui/src/components/select.tsxRepository: stylessh/diffkit
Length of output: 5741
[role="menuitem"] and [role="option"] will silently override cursor-default on DropdownMenuItem and SelectItem.
The entire cursor rule block (lines 184–248) sits outside any @layer, giving it higher cascade priority than Tailwind's @layer utilities. Radix UI automatically renders DropdownMenu.Item with role="menuitem" and Select.Item with role="option". Both components deliberately use cursor-default in their className, but that Tailwind utility will be overridden by these unlayered selectors, silently changing every enabled menu/select item from cursor: default to cursor: pointer.
Either remove cursor-default from DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuSubTrigger, and SelectItem to make the intent explicit, or remove [role="menuitem"] and [role="option"] from this selector list (and move the rule inside @layer base if relying on component-level classes alone).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/styles/globals.css` around lines 217 - 228, The global
selector list including [role="menuitem"] and [role="option"] is outside any
`@layer` and is overriding Tailwind's cursor-default utility on Radix components;
fix by either removing cursor-default from the component classNames on
DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem,
DropdownMenuSubTrigger, and SelectItem so the intent is explicit, or remove
[role="menuitem"] and [role="option"] from the selector list and move this
cursor rule into an appropriate `@layer` (e.g., `@layer` base) so it doesn't trump
Tailwind utilities.
1 participant
Summary
Added CSS rules cursor: pointer for all clickable elements.
Changes
Summary by CodeRabbit