#181
Pull Requests/stylessh/diffkit/#181

feat: add cursor-pointer rule for all clickable elements

Opengregor-tokarevwants to merge intofrom
2 commits1 file changed+74-0

Summary

Added CSS rules cursor: pointer for all clickable elements.

Changes

  • global.css

Summary by CodeRabbit

  • Style
    • Improved cursor behavior for interactive controls: enabled elements now show a pointer cursor for clearer affordance, while disabled controls show a not-allowed cursor to indicate unavailability.
    • Disabled detection now respects common disabled states and attributes so visual feedback remains consistent across buttons, links, inputs, and role-based controls.

Activity

5
G
feat: add cursor-pointer rule for all clickable elements
c3630a8
coderabbitai[bot]6mo ago
📝 Walkthrough

Walkthrough

Adds global CSS rules in @layer base that set cursor: pointer for a broad set of interactive elements when enabled and cursor: not-allowed when disabled, detecting disabled state via :disabled, aria-disabled="true", and data-disabled attributes. (≤50 words)

Changes

Global cursor rules

Layer / File(s)Summary
Selector set
packages/ui/src/styles/globals.css		Introduces a comprehensive selector group targeting buttons, links, inputs, and various [role=...] / [data-slot=...] interactive elements.
Enabled cursor rule
packages/ui/src/styles/globals.css		Adds cursor: pointer for those selectors when not disabled (negating :disabled, aria-disabled="true", and data-disabled).
Disabled cursor rule
packages/ui/src/styles/globals.css		Adds complementary selectors that apply cursor: not-allowed when :disabled, aria-disabled="true", or data-disabled indicate disabled state.
Placement / Layering
packages/ui/src/styles/globals.css		Rules are added inside the @layer base block to ensure global base-level cursor behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Description check⚠️ WarningThe description is incomplete and lacks required sections. It is missing detailed 'Changes' section, 'Test Plan' with checklist items, and 'Screenshots' section specified in the template.Expand the 'Changes' section with specific file details and line changes. Add a 'Test Plan' section with testing steps. Include 'Screenshots' section if UI changes are visible, or note N/A if not applicable.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately describes the main change: adding cursor-pointer styling rules for interactive elements in the global CSS.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]reviewed6mo ago
coderabbitai[bot]6mo ago

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

📥 Commits

Reviewing files that changed from the base of the PR and between 94ca24080d10dd2e59513db729b3a5135410e51d and c3630a8c74ac15b5ed87e37494dfacbd912a6761.

📒 Files selected for processing (1)
  • packages/ui/src/styles/globals.css
G
fix: from coderabbit review
7e69f8e
coderabbitai[bot]reviewed6mo ago
coderabbitai[bot]6mo ago

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

📥 Commits

Reviewing files that changed from the base of the PR and between c3630a8c74ac15b5ed87e37494dfacbd912a6761 and 7e69f8e840daeb5cbd4ac058ce99a3959cce3bc9.

📒 Files selected for processing (1)
  • packages/ui/src/styles/globals.css