fix: restore default cursor and add commitment in docs by kalu5 · Pull Request #1261 · npmx-dev/npmx.dev

kalu5 · 2026-02-09T08:37:09Z

Restore the return cursor and delete the cursor of the basic button.

…ton.

vercel · 2026-02-09T08:37:18Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 13, 2026 7:03pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 13, 2026 7:03pm
npmx-lunaria	Ignored		Feb 13, 2026 7:03pm

codecov · 2026-02-09T08:39:18Z

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!

coderabbitai · 2026-02-09T08:40:11Z

📝 Walkthrough

Walkthrough

This pull request removes the cursor-pointer utility class from the Button component's root element in app/components/Button/Base.vue and adds a new "Cursor and navigation" section to CONTRIBUTING.md. The documentation section prescribes cursor behaviour: use cursor-pointer for links and the default cursor for other interactive elements, defines criteria for meaningful links versus non-meaningful ones, and emphasises favouring real link elements for stable URLs. The new documentation content is present twice in the file.

Possibly related PRs

feat: use default cursor for non-link items #1216: Removes explicit pointer cursors for UI controls across multiple components, related to cursor-pointer removals.
style: cursor pointer to back button #1257: Adjusts cursor-pointer usage on button implementations, touching similar UI cursor decisions.
fix: localization for "go back home" button on error page #1470: Alters cursor-pointer usage on Button/Base.vue, directly overlapping this file's cursor change.

Suggested reviewers

whitep4nth3r

🚥 Pre-merge checks | ✅ 1 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	⚠️ Unable to check for merge conflicts: Invalid branch name format

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the core changes: removing cursor-pointer from the basic button and updating documentation regarding cursor behavior.

_{✏️ 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

⚔️ Resolve merge conflicts (beta)

Auto-commit resolved conflicts to branch fix/#1074
Post resolved changes as copyable diffs in a comment

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

coderabbitai

Actionable comments posted: 4

coderabbitai · 2026-02-09T08:40:14Z

 <button
 type="button"
- class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
 @click="router.back()"


⚠️ Potential issue | 🟡 Minor
Remove per-button focus-visible utility (global rule already covers it).
The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already applied globally.
Suggested change
- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
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.”
📝 Committable suggestion
‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
<button
type="button"
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
@click="router.back()"
<button
type="button"
class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
`@click`="router.back()"

coderabbitai · 2026-02-09T08:40:14Z

 <button
 type="button"
- class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
 @click="router.back()"


⚠️ Potential issue | 🟡 Minor
Remove per-button focus-visible utility (global rule already covers it).
The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already applied globally.
Suggested change
- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
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.”
📝 Committable suggestion
‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
<button
type="button"
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
@click="router.back()"
<button
type="button"
class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
`@click`="router.back()"

coderabbitai · 2026-02-09T08:40:14Z

 <button
 type="button"
- class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
 @click="router.back()"


⚠️ Potential issue | 🟡 Minor
Remove per-button focus-visible utility (global rule already covers it).
The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already applied globally.
Suggested change
- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"+ class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
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.”
📝 Committable suggestion
‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
<button
type="button"
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
@click="router.back()"
<button
type="button"
class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
`@click`="router.back()"

kalu5 · 2026-02-09T08:46:45Z

I suggest adding the description of this problem to the contribution document to remind everyone to consider it when adding the cursor.
Also pay attention to this issue during the review to avoid style overwriting.
What do you think? @alexdln

kalu5 · 2026-02-09T08:49:26Z

I found that the default style of Vue Data UI also uses "pointer". I'll submit an issue first.

essenmitsosse · 2026-02-09T11:45:56Z

I think the consensus was that all clickable things should get cursor: pointer. You can still add cursor-pointer to the plain buttons that don't have it yet, but this will also be fixed once I replace them with the ButtonBase component.

kalu5 · 2026-02-09T13:08:30Z

I think the consensus was that all clickable things should get cursor: pointer. You can still add cursor-pointer to the plain buttons that don't have it yet, but this will also be fixed once I replace them with the ButtonBase component.

Something like this: It is agreed that all buttons should use a unified component, such as ButtonBase. This component uses the default style. You can also use cursor: pointer to make it a Link Button.

essenmitsosse · 2026-02-09T13:12:53Z

No I meant, also all buttons are supposed to just keep cursor-pointer. I think no one wanted an extra treatment for non-link buttons.

kalu5 · 2026-02-09T13:23:40Z

No I meant, also all buttons are supposed to just keep cursor-pointer. I think no one wanted an extra treatment for non-link buttons.

Here is a discussion. #1074

whitep4nth3r · 2026-02-12T15:56:05Z

To make this cursor-pointer discussion a final final, can this PR include some guidelines about it summing up the discussions and decisions please?

Rules about:

what's defined in global CSS
when should cursor pointer be used
how to treat the ButtonBase component when it is a button and a link

Thank you!

danielroe · 2026-02-12T15:58:08Z

yes! apologies for the slow review but I think we need to set some consensus here or I fear we'll have alternating PRs reverting/implementing cursor 😆

essenmitsosse · 2026-02-12T20:50:33Z

how to treat the ButtonBase component when it is a button and a link

ButtonBase is always a button. LinkBase can look like a button.

coderabbitai

Actionable comments posted: 2

coderabbitai

Actionable comments posted: 5

alexdln · 2026-02-13T19:14:39Z

There are still some questions, but since we haven't made a final decision and the trigger-elements currently have different cursors, I'm merging it and leaving a new section in contributing guide that we use default cursor for buttons

We'll work through it further and, if necessary, we will update the contributing guide

Thanks for fixing ❤️

fix: restore the return cursor and delete the cursor of the basic but…
3360030
…ton.

vercelBotdeployed to Preview – npmx.dev February 9, 2026 08:39 View deployment

coderabbitaiBot reviewed Feb 9, 2026
View reviewed changes

Merge branch 'main' into fix/npmx-dev#1074
028de72

vercelBotdeployed to Preview – docs.npmx.dev February 10, 2026 02:43 View deployment

vercelBotdeployed to Preview – npmx.dev February 10, 2026 02:43 View deployment

danielroe requested a review from alexdln February 12, 2026 15:57

Merge branch 'main' into fix/npmx-dev#1074
a854ea8

vercelBotdeployed to Preview – docs.npmx.dev February 13, 2026 16:41 View deployment

vercelBotdeployed to Preview – npmx.dev February 13, 2026 16:41 View deployment

alexdln added 3 commits February 13, 2026 16:44

chore: describe cursor and navigation in contributing guide
0d1a725

chore: add anchor to contributing guide
2414cc0

chore: fix order in contributing guide
445af2a

vercelBotdeployed to Preview – npmx.dev February 13, 2026 16:49 View deployment

knowler reviewed Feb 13, 2026
View reviewed changes

Comment threadCONTRIBUTING.md Outdated
Comment threadCONTRIBUTING.md Outdated

coderabbitaiBot reviewed Feb 13, 2026
View reviewed changes

Comment threadCONTRIBUTING.md Outdated
Comment threadCONTRIBUTING.md Outdated

alexdln changed the title ~~fix: fix cursor miss~~fix: restore default cursor and add commitment in docsFeb 13, 2026

chore: update cursor and navigation guidance
637ef09

vercelBotdeployed to Preview – npmx.dev February 13, 2026 19:03 View deployment

coderabbitaiBot reviewed Feb 13, 2026
View reviewed changes

Comment threadCONTRIBUTING.md
Comment threadCONTRIBUTING.md
Comment threadCONTRIBUTING.md
Comment threadCONTRIBUTING.md
Comment threadCONTRIBUTING.md

alexdln enabled auto-merge February 13, 2026 19:14

alexdln approved these changes Feb 13, 2026
View reviewed changes

alexdln added this pull request to the merge queue Feb 13, 2026

Merged via the queue into npmx-dev:main with commit 391d28eFeb 13, 2026
17 checks passed

coderabbitaiBot mentioned this pull request Mar 22, 2026
feat: add cursor-pointer to ButtonBase component #2202
Closed

Uh oh!

Uh oh!

Conversation

kalu5 commented Feb 9, 2026

Uh oh!

vercelBot commented Feb 9, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecovBot commented Feb 9, 2026

Codecov Report

Uh oh!

coderabbitaiBot commented Feb 9, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitaiBotFeb 9, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitaiBotFeb 9, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitaiBotFeb 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kalu5 commented Feb 9, 2026

Uh oh!

kalu5 commented Feb 9, 2026

Uh oh!

essenmitsosse commented Feb 9, 2026

Uh oh!

kalu5 commented Feb 9, 2026

Uh oh!

essenmitsosse commented Feb 9, 2026

Uh oh!

kalu5 commented Feb 9, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

whitep4nth3r commented Feb 12, 2026

Uh oh!

danielroe commented Feb 12, 2026

Uh oh!

essenmitsosse commented Feb 12, 2026

Uh oh!

Uh oh!

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexdln commented Feb 13, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

vercelBot commented Feb 9, 2026•
edited
Loading

coderabbitaiBot commented Feb 9, 2026•
edited
Loading

kalu5 commented Feb 9, 2026•
edited
Loading

alexdln commented Feb 13, 2026•
edited
Loading