From 16e9829173f077477b175fec5da9578009f327db Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 11 Jul 2020 10:03:59 +0800
Subject: [PATCH] style(ActionSheet): subname vertical align (#6756)

---
 src/action-sheet/README.md                             | 2 +-
 src/action-sheet/README.zh-CN.md                       | 2 +-
 src/action-sheet/demo/index.vue                        | 4 ++--
 src/action-sheet/index.less                            | 9 +++++----
 src/action-sheet/index.tsx                             | 2 +-
 src/action-sheet/test/__snapshots__/index.spec.js.snap | 3 ++-
 src/style/var.less                                     | 3 ++-
 7 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index a79ac6ccc..819482acd 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -121,7 +121,7 @@ export default {
     return {
       show: false,
       actions: [
-        { name: 'Colored Option', color: '#07c160' },
+        { name: 'Colored Option', color: '#ee0a24' },
         { name: 'Disabled Option', disabled: true },
         { name: 'Loading Option', loading: true },
       ],
diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md
index 0993e4e71..afd55d34b 100644
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@@ -125,7 +125,7 @@ export default {
     return {
       show: false,
       actions: [
-        { name: '着色选项', color: '#07c160' },
+        { name: '着色选项', color: '#ee0a24' },
         { name: '禁用选项', disabled: true },
         { name: '加载选项', loading: true },
       ],
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index e909e348f..758420870 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { GREEN } from '../../utils/constant';
+import { RED } from '../../utils/constant';
 
 export default {
   i18n: {
@@ -123,7 +123,7 @@ export default {
 
     statusActions() {
       return [
-        { name: this.t('coloredOption'), color: GREEN },
+        { name: this.t('coloredOption'), color: RED },
         { name: this.t('disabledOption'), disabled: true },
         { loading: true },
       ];
diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less
index 4d86492d3..79ba786b9 100644
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@@ -9,10 +9,8 @@
   &__cancel {
     display: block;
     width: 100%;
-    height: @action-sheet-item-height;
-    padding: 0;
+    padding: 14px @padding-md;
     font-size: @action-sheet-item-font-size;
-    line-height: 20px;
     background-color: @action-sheet-item-background;
     border: none;
     cursor: pointer;
@@ -23,6 +21,8 @@
   }
 
   &__item {
+    line-height: @action-sheet-item-line-height;
+
     &--loading,
     &--disabled {
       color: @action-sheet-item-disabled-text-color;
@@ -42,9 +42,10 @@
   }
 
   &__subname {
-    margin-left: @padding-base;
+    margin-top: @padding-xs;
     color: @action-sheet-subname-color;
     font-size: @action-sheet-subname-font-size;
+    line-height: @action-sheet-subname-line-height;
   }
 
   &__gap {
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index 2453662c8..77808b419 100644
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@@ -102,7 +102,7 @@ function ActionSheet(
 
       return [
         <span class={bem('name')}>{item.name}</span>,
-        item.subname && <span class={bem('subname')}>{item.subname}</span>,
+        item.subname && <div class={bem('subname')}>{item.subname}</div>,
       ];
     }
 
diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
index e28dc8120..e71b51fbe 100644
--- a/src/action-sheet/test/__snapshots__/index.spec.js.snap
+++ b/src/action-sheet/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,8 @@
 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"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
     <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"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
+  </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
+    <div class="van-action-sheet__subname">Subname</div></button>
   <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
 </div>
 `;
diff --git a/src/style/var.less b/src/style/var.less
index aad337538..60cb31459 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -70,13 +70,14 @@
 @action-sheet-description-color: @gray-6;
 @action-sheet-description-font-size: @font-size-md;
 @action-sheet-description-line-height: 20px;
-@action-sheet-item-height: 50px;
 @action-sheet-item-background: @white;
 @action-sheet-item-font-size: @font-size-lg;
+@action-sheet-item-line-height: 22px;
 @action-sheet-item-text-color: @text-color;
 @action-sheet-item-disabled-text-color: @gray-5;
 @action-sheet-subname-color: @gray-6;
 @action-sheet-subname-font-size: @font-size-sm;
+@action-sheet-subname-line-height: 20px;
 @action-sheet-close-icon-size: 22px;
 @action-sheet-close-icon-color: @gray-5;
 @action-sheet-close-icon-active-color: @gray-6;