Skip to content

fix: add cursor pointer to button and list items - #1317

Merged
whitep4nth3r merged 1 commit into
npmx-dev:mainfrom
NandkishorJadoun:fix/cursor-pointer-dropdown
Feb 10, 2026
Merged

fix: add cursor pointer to button and list items#1317
whitep4nth3r merged 1 commit into
npmx-dev:mainfrom
NandkishorJadoun:fix/cursor-pointer-dropdown

Conversation

@NandkishorJadoun

Copy link
Copy Markdown
Contributor

Description

Previously, the trigger button and dropdown options showed the default arrow cursor, which made the UI feel non interactive. This pr updates the cursor style for the package manager selector to use a pointer cursor on interactive elements.

Changes:

  • Added cursor-pointer to the dropdown trigger
  • Added cursor-pointer to clickable dropdown options

@vercel

vercelBot commented Feb 10, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentFeb 10, 2026 6:53am
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredPreviewFeb 10, 2026 6:53am
npmx-lunariaIgnoredIgnoredFeb 10, 2026 6:53am

Request Review

@coderabbitai

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

The pull request modifies the ManagerSelect component to add cursor-pointer styling classes to interactive elements. Specifically, the cursor-pointer utility class is added to the trigger button and each option item within the component. The change consists of two lines added and two lines removed, affecting only the class bindings without altering control flow, event handling, data bindings, or accessibility properties.

Possibly related PRs

Suggested reviewers

  • alexdln
  • danielroe
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check nameStatusExplanation
Description check✅ PassedThe pull request description accurately describes the changeset, explaining the cursor style improvements to interactive elements in the package manager selector.

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

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Comment on lines 88 to 92
<button
ref="triggerRef"
type="button"
class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
class="cursor-pointer flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"
:aria-expanded="isOpen"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove the per-element focus-visible utility from the button class.

Focus-visible styling for buttons is already handled globally; keeping focus-visible:outline-accent/70 here conflicts with the project rule. Please drop it while you’re touching this class list.

Proposed change
- class="cursor-pointer flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70 hover:text-fg"+ class="cursor-pointer flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover hover:text-fg"

Based on learnings: “In the npmx.dev project, ensure that focus-visible styling for button and select elements is implemented globally in app/assets/main.css… Do not apply per-element inline utility classes like focus-visible:outline-accent/70 on these elements.”

@codecov

codecovBot commented Feb 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@whitep4nth3r
whitep4nth3r added this pull request to the merge queueFeb 10, 2026
Merged via the queue into npmx-dev:main with commit f0e38c1Feb 10, 2026
17 checks passed
@NandkishorJadoun
NandkishorJadoun deleted the fix/cursor-pointer-dropdown branch February 10, 2026 10:00
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@NandkishorJadoun@whitep4nth3r