style(ActionSheet): subname vertical align (#6756)

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 },
       ],

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 },
       ],

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 },
       ];

src/action-sheet/index.less

@@ -9,10 +9,8 @@
   &__cancel {
     display: block;
     width: 100%;
-    height: @action-sheet-item-height;
+    padding: 14px @padding-md;
-    padding: 0;
     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 {

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>,
       ];
     }
 

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>
 `;

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;