From 0a3cafcedb368ca5e1e10d4df135a34fa9a184d5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 29 Apr 2020 20:12:30 +0800
Subject: [PATCH] style(ActionSheet): improve text size adjust (#6175)

---
 src/action-sheet/index.less                            |  9 +++------
 src/action-sheet/index.tsx                             |  7 ++++---
 src/action-sheet/test/__snapshots__/index.spec.js.snap | 10 ++++++++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less
index 4e7081ad3..c2ccebc5e 100644
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@@ -8,10 +8,10 @@
   &__cancel {
     display: block;
     width: 100%;
+    height: @action-sheet-item-height;
     padding: 0;
     font-size: @action-sheet-item-font-size;
-    line-height: @action-sheet-item-height;
-    text-align: center;
+    line-height: 20px;
     background-color: @action-sheet-item-background;
     border: none;
     cursor: pointer;
@@ -22,8 +22,6 @@
   }
 
   &__item {
-    height: @action-sheet-item-height;
-
     &--loading,
     &--disabled {
       color: @action-sheet-item-disabled-text-color;
@@ -48,11 +46,10 @@
     font-size: @action-sheet-subname-font-size;
   }
 
-  &__cancel::before {
+  &__gap {
     display: block;
     height: @action-sheet-cancel-padding-top;
     background-color: @action-sheet-cancel-padding-color;
-    content: ' ';
   }
 
   &__header {
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index 3bd38b011..cc7089c11 100644
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@@ -121,11 +121,12 @@ function ActionSheet(
 
   function CancelText() {
     if (cancelText) {
-      return (
+      return [
+        <div class={bem('gap')} />,
         <button type="button" class={bem('cancel')} onClick={onCancel}>
           {cancelText}
-        </button>
-      );
+        </button>,
+      ];
     }
   }
 
diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
index 09499d477..d961c16f6 100644
--- a/src/action-sheet/test/__snapshots__/index.spec.js.snap
+++ b/src/action-sheet/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,9 @@
 exports[`callback events 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading van-hairline--top">
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>
+  </button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
+  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+</div>
 `;
 
 exports[`close-icon prop 1`] = `
@@ -21,7 +23,11 @@ exports[`description prop 1`] = `
 </div>
 `;
 
-exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>`;
+exports[`disable lazy-render 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
+</div>
+`;
 
 exports[`render title and default slot 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">