From b338aef41f885c30ae76cb54a340c7b178d893d1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 24 Jan 2022 20:45:34 +0800
Subject: [PATCH] style: improve cursor of haptics elements (#10232)

---
 packages/vant/src/dropdown-menu/index.less          |  1 -
 packages/vant/src/image-preview/index.less          |  1 -
 packages/vant/src/nav-bar/index.less                |  1 -
 packages/vant/src/number-keyboard/index.less        |  1 -
 packages/vant/src/picker/index.less                 |  1 -
 packages/vant/src/popup/index.less                  |  1 -
 packages/vant/src/share-sheet/index.less            |  1 -
 packages/vant/src/stepper/index.less                |  1 -
 packages/vant/src/style/base.less                   |  8 ++++++--
 packages/vant/src/tag/Tag.tsx                       | 13 +++++++++++--
 packages/vant/src/tag/index.less                    |  1 -
 .../src/tag/test/__snapshots__/demo.spec.ts.snap    |  2 +-
 12 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less
index c5ac3aae7..1df17e863 100644
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/packages/vant/src/dropdown-menu/index.less
@@ -36,7 +36,6 @@
     align-items: center;
     justify-content: center;
     min-width: 0; // hack for flex ellipsis
-    cursor: pointer;
 
     &--disabled {
       .van-dropdown-menu__title {
diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less
index d91124545..fa500f7e7 100644
--- a/packages/vant/src/image-preview/index.less
+++ b/packages/vant/src/image-preview/index.less
@@ -88,7 +88,6 @@
     z-index: var(--van-image-preview-close-icon-z-index);
     color: var(--van-image-preview-close-icon-color);
     font-size: var(--van-image-preview-close-icon-size);
-    cursor: pointer;
 
     &--top-left {
       top: var(--van-image-preview-close-icon-margin);
diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less
index 3a4e664fa..45f918a1c 100644
--- a/packages/vant/src/nav-bar/index.less
+++ b/packages/vant/src/nav-bar/index.less
@@ -64,7 +64,6 @@
     align-items: center;
     padding: 0 var(--van-padding-md);
     font-size: var(--van-font-size-md);
-    cursor: pointer;
   }
 
   &__left {
diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less
index b42d69e6f..9de1bc6fa 100644
--- a/packages/vant/src/number-keyboard/index.less
+++ b/packages/vant/src/number-keyboard/index.less
@@ -74,7 +74,6 @@
     font-size: var(--van-number-keyboard-close-font-size);
     background-color: transparent;
     border: none;
-    cursor: pointer;
   }
 
   &__sidebar {
diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less
index 7ac7fcfd1..d8a5c0c1f 100644
--- a/packages/vant/src/picker/index.less
+++ b/packages/vant/src/picker/index.less
@@ -37,7 +37,6 @@
     font-size: var(--van-picker-action-font-size);
     background-color: transparent;
     border: none;
-    cursor: pointer;
   }
 
   &__confirm {
diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less
index d5cfabec0..ab4a72243 100644
--- a/packages/vant/src/popup/index.less
+++ b/packages/vant/src/popup/index.less
@@ -116,7 +116,6 @@
       z-index: var(--van-popup-close-icon-z-index);
       color: var(--van-popup-close-icon-color);
       font-size: var(--van-popup-close-icon-size);
-      cursor: pointer;
 
       &--top-left {
         top: var(--van-popup-close-icon-margin);
diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less
index 26b45088d..d6b45fc7c 100644
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@@ -62,7 +62,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    cursor: pointer;
     user-select: none;
   }
 
diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less
index 627a6afac..b3e38db17 100644
--- a/packages/vant/src/stepper/index.less
+++ b/packages/vant/src/stepper/index.less
@@ -32,7 +32,6 @@
     vertical-align: middle;
     background: var(--van-stepper-background-color);
     border: 0;
-    cursor: pointer;
 
     &::before {
       width: 50%;
diff --git a/packages/vant/src/style/base.less b/packages/vant/src/style/base.less
index 3fd06565f..3b493208e 100644
--- a/packages/vant/src/style/base.less
+++ b/packages/vant/src/style/base.less
@@ -31,8 +31,12 @@
   padding-bottom: env(safe-area-inset-bottom);
 }
 
-.van-haptics-feedback:active {
-  opacity: var(--van-active-opacity);
+.van-haptics-feedback {
+  cursor: pointer;
+
+  &:active {
+    opacity: var(--van-active-opacity);
+  }
 }
 
 [class*='van-hairline'] {
diff --git a/packages/vant/src/tag/Tag.tsx b/packages/vant/src/tag/Tag.tsx
index ccf655809..a21815cde 100644
--- a/packages/vant/src/tag/Tag.tsx
+++ b/packages/vant/src/tag/Tag.tsx
@@ -5,7 +5,12 @@ import {
   type CSSProperties,
   type ExtractPropTypes,
 } from 'vue';
-import { truthProp, makeStringProp, createNamespace } from '../utils';
+import {
+  truthProp,
+  makeStringProp,
+  createNamespace,
+  HAPTICS_FEEDBACK,
+} from '../utils';
 import { Icon } from '../icon';
 
 const [name, bem] = createNamespace('tag');
@@ -66,7 +71,11 @@ export default defineComponent({
       }
 
       const CloseIcon = closeable && (
-        <Icon name="cross" class={bem('close')} onClick={onClose} />
+        <Icon
+          name="cross"
+          class={[bem('close'), HAPTICS_FEEDBACK]}
+          onClick={onClose}
+        />
       );
 
       return (
diff --git a/packages/vant/src/tag/index.less b/packages/vant/src/tag/index.less
index a0411cabb..e7760dc9c 100644
--- a/packages/vant/src/tag/index.less
+++ b/packages/vant/src/tag/index.less
@@ -114,6 +114,5 @@
 
   &__close {
     margin-left: 2px;
-    cursor: pointer;
   }
 }
diff --git a/packages/vant/src/tag/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tag/test/__snapshots__/demo.spec.ts.snap
index c82acc0aa..a745010c9 100644
--- a/packages/vant/src/tag/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tag/test/__snapshots__/demo.spec.ts.snap
@@ -112,7 +112,7 @@ exports[`should render demo and match snapshot 1`] = `
       <transition-stub>
         <span class="van-tag van-tag--medium van-tag--primary">
           Tag
-          <i class="van-badge__wrapper van-icon van-icon-cross van-tag__close">
+          <i class="van-badge__wrapper van-icon van-icon-cross van-tag__close van-haptics-feedback">
           </i>
         </span>
       </transition-stub>