feat: set cursor-pointer on buttons (#2752)

Author: aryanpingle

CONTRIBUTING.md

@@ -452,7 +452,7 @@ The command palette is a first-class navigation surface. When you add a new user
 
 ### Cursor and navigation
 
-**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_).
+**npmx** uses `cursor: pointer` for links and buttons to match users’ everyday experience. For all other interactive elements, use the default cursor (_or another appropriate cursor to indicate state_).
 
 > [!NOTE]
 > A link is any element that leads to another content (_go to another page, authorize_)

app/components/Button/Base.vue

@@ -44,7 +44,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    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="group gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 cursor-pointer disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
       'inline-flex': !block,
       'flex': block,

app/components/Compare/FacetBarChart.vue

@@ -152,6 +152,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           })
         },
       },
+      useCursorPointer: true,
     },
     skeletonDataset: skeletonDataset.value,
     skeletonConfig: {

app/components/Compare/FacetScatterChart.vue

@@ -166,6 +166,7 @@ const config = computed<VueUiScatterConfig>(() => {
           })
         },
       },
+      useCursorPointer: true,
     },
     style: {
       backgroundColor: colors.value.bg,

app/components/InstantSearch.vue

@@ -29,7 +29,11 @@ onPrehydrate(el => {
           <strong>{{ $t('search.instant_search_on') }}</strong>
         </template>
         <template #action>
-          <button type="button" class="underline" @click="settings.instantSearch = false">
+          <button
+            type="button"
+            class="underline cursor-pointer"
+            @click="settings.instantSearch = false"
+          >
             {{ $t('search.instant_search_turn_off') }}
           </button>
         </template>
@@ -44,7 +48,11 @@ onPrehydrate(el => {
           <strong>{{ $t('search.instant_search_off') }}</strong>
         </template>
         <template #action>
-          <button type="button" class="underline" @click="settings.instantSearch = true">
+          <button
+            type="button"
+            class="underline cursor-pointer"
+            @click="settings.instantSearch = true"
+          >
             {{ $t('search.instant_search_turn_on') }}
           </button>
         </template>

app/components/Package/TimelineChart.vue

@@ -411,6 +411,7 @@ const config = computed<VueUiXyConfig>(() => {
               },
             }),
         },
+        useCursorPointer: true,
       },
       zoom: {
         show: settings.value.timelineChart.showZoom,

app/components/Package/TrendsChart.vue

@@ -1460,6 +1460,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               },
             }),
         },
+        useCursorPointer: true,
       },
       grid: {
         position: 'start',

app/components/Package/VersionDistribution.vue

@@ -238,6 +238,7 @@ const chartConfig = computed<VueUiXyConfig>(() => {
               },
             }),
         },
+        useCursorPointer: true,
       },
       grid: {
         stroke: colors.value.border,