Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,22 @@ Query parameters work as expected:
<NuxtLink :to="{ name: 'compare', query: { packages: pkg.name } }">Compare</NuxtLink>
```

### Cursor and navigation

We prefer consistency in user everyday experience

npmx uses `cursor-pointer` only for links. For all other elements, including buttons, use the default cursor (_or other appropriate cursors to show state_).
Comment thread
knowler marked this conversation as resolved.
Outdated

**What counts as a link**

A link is any element that change or show meaningful content:

- **Not meaningful content:** burger menu, "likes" button - the user does not get substantive information from them.
- **Meaningful content:** a dialog with a chart, auth button, tabs with new data—they convey new or important information.

> [!IMPORTANT]
> Always prefer implementing such changes as real links so they can be opened in a new tab, shared or reloaded, and so the same content is available at a stable URL.
Comment thread
knowler marked this conversation as resolved.
Outdated

#### Package routes

For package links, use the auto-imported `packageRoute()` utility from `app/utils/router.ts`. It handles scoped/unscoped packages and optional versions:
Expand Down
2 changes: 1 addition & 1 deletion app/components/Button/Base.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ defineExpose({
<template>
<button
ref="el"
class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
class="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
:class="{
'inline-flex': !block,
'flex': block,
Expand Down
Loading