feat(ActionSheet): subname vertical align (#3726)

* feat(DropdownMenu): adjust default color to @red

* feat(ActionSheet): subname vertical align

example/pages/action-sheet/index.js

@@ -48,6 +48,7 @@ Page({
   toggleActionSheet5() {
     this.toggle('show5');
   },
+
   toggleActionSheet6() {
     this.toggle('show6');
   },

example/pages/action-sheet/index.wxml

@@ -4,7 +4,6 @@
     show="{{ show1 }}"
     actions="{{ action1 }}"
     bind:close="toggleActionSheet1"
-    bind:select="toggleActionSheet1"
   />
 </demo-block>
 
@@ -14,8 +13,6 @@
     show="{{ show2 }}"
     actions="{{ action2 }}"
     bind:close="toggleActionSheet2"
-    bind:cancel="toggleActionSheet2"
-    bind:select="toggleActionSheet2"
   />
 </demo-block>
 

packages/action-sheet/index.less

@@ -7,9 +7,10 @@
 
   &__item,
   &__cancel {
+    padding: 14px @padding-md;
     text-align: center;
     .theme(font-size, '@action-sheet-item-font-size');
-    .theme(line-height, '@action-sheet-item-height');
+    .theme(line-height, '@action-sheet-item-line-height');
     .theme(background-color, '@action-sheet-item-background');
 
     &--hover {
@@ -24,13 +25,12 @@
 
   &__cancel {
     .theme(color, '@action-sheet-cancel-text-color');
+  }
 
-    &::before {
-      display: block;
-      content: ' ';
-      .theme(height, '@action-sheet-cancel-padding-top');
-      .theme(background-color, '@action-sheet-cancel-padding-color');
-    }
+  &__gap {
+    display: block;
+    .theme(height, '@action-sheet-cancel-padding-top');
+    .theme(background-color, '@action-sheet-cancel-padding-color');
   }
 
   &__item--disabled {
@@ -42,9 +42,10 @@
   }
 
   &__subname {
-    .theme(margin-left, '@padding-base');
+    .theme(margin-top, '@padding-xs');
     .theme(font-size, '@action-sheet-subname-font-size');
     .theme(color, '@action-sheet-subname-color');
+    .theme(line-height, '@action-sheet-subname-line-height');
   }
 
   &__header {
@@ -74,6 +75,5 @@
 
   &__loading {
     display: flex !important;
-    .theme(height, '@action-sheet-item-height');
   }
 }

packages/action-sheet/index.wxml

@@ -49,19 +49,21 @@
     >
       <block wx:if="{{ !item.loading }}">
         {{ item.name }}
-        <text wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</text>
+        <view wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</view>
       </block>
       <van-loading wx:else custom-class="van-action-sheet__loading" size="22px" />
     </button>
   </view>
   <slot />
-  <view
-    wx:if="{{ cancelText }}"
-    class="van-action-sheet__cancel"
-    hover-class="van-action-sheet__cancel--hover"
-    hover-stay-time="70"
-    bind:tap="onCancel"
-  >
-    {{ cancelText }}
-  </view>
+  <block wx:if="{{ cancelText }}">
+    <view class="van-action-sheet__gap" />
+    <view
+      class="van-action-sheet__cancel"
+      hover-class="van-action-sheet__cancel--hover"
+      hover-stay-time="70"
+      bind:tap="onCancel"
+    >
+      {{ cancelText }}
+    </view>
+  </block>
 </van-popup>

packages/common/style/var.less

@@ -72,13 +72,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-padding: 0 @padding-md;