forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: restore default cursor and add commitment in docs (#1261)
Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com>
Co-authored-by: Vordgi <sasha2822222@gmail.com>
authored by
Jialong Lu
Alex Savelyev
Vordgi
and committed by
GitHub
391d28e2
859cc4f5
+14
-1
+13
CONTRIBUTING.md
+13
CONTRIBUTING.md
···
41
41
- [Naming conventions](#naming-conventions)
42
42
- [Vue components](#vue-components)
43
43
- [Internal linking](#internal-linking)
44
+
- [Cursor and navigation](#cursor-and-navigation)
44
45
- [RTL Support](#rtl-support)
45
46
- [Localization (i18n)](#localization-i18n)
46
47
- [Approach](#approach)
···
391
392
| `org` | `/org/:org` | `org` |
392
393
| `~username` | `/~:username` | `username` |
393
394
| `~username-orgs` | `/~:username/orgs` | `username` |
395
+
396
+
### Cursor and navigation
397
+
398
+
**npmx** uses `cursor: pointer` only for links to match users’ everyday experience. For all other interactive elements, including buttons, use the default cursor (_or another appropriate cursor to indicate state_).
399
+
400
+
> [!NOTE]
401
+
> A link is any element that leads to another content (_go to another page, authorize_)
402
+
> A button is any element that operates an action (_show tooltip, open menu, "like" package, open dropdown_)
403
+
> If you're unsure which element to use - feel free to ask question in the issue or on discord
404
+
405
+
> [!IMPORTANT]
406
+
> Always Prefer implementing navigation as real links whenever possible. This ensures they can be opened in a new tab, shared or reloaded, and so the same content is available at a stable URL
394
407
395
408
## RTL Support
396
409
+1
-1
app/components/Button/Base.vue
+1
-1
app/components/Button/Base.vue
···
28
28
<template>
29
29
<button
30
30
ref="el"
31
-
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)"
31
+
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)"
32
32
:class="{
33
33
'inline-flex': !block,
34
34
'flex': block,