feat(ActionSheet): adjust header style (#3720)

example/pages/action-sheet/index.js

@@ -11,21 +11,21 @@ Page({
     action1: [
       { name: '选项' },
       { name: '选项' },
-      { name: '选项', subname: '副文本' }
+      { name: '选项', subname: '描述信息' },
     ],
     action2: [
-      { name: '选项', color: '#07c160' },
+      { name: '着色选项', color: '#ee0a24' },
       { loading: true },
-      { name: '禁用选项', disabled: true }
+      { name: '禁用选项', disabled: true },
     ],
     action6: [
       { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
-    ]
+    ],
   },
 
   toggle(type) {
     this.setData({
-      [type]: !this.data[type]
+      [type]: !this.data[type],
     });
   },
 
@@ -53,5 +53,5 @@ Page({
   },
   onGetUserInfo(e) {
     console.log(e.detail);
-  }
+  },
 });

example/pages/action-sheet/index.wxml

@@ -52,7 +52,7 @@
   </van-action-sheet>
 </demo-block>
 
-<demo-block title="微信开发能力" padding>
+<demo-block title="微信开放能力" padding>
   <van-button type="primary" bind:click="toggleActionSheet6">弹出菜单</van-button>
   <van-action-sheet
     show="{{ show6 }}"

packages/action-sheet/README.md

@@ -38,7 +38,7 @@ Page({
       },
       {
         name: '选项',
-        subname: '副文本',
+        subname: '描述信息',
         openType: 'share',
       },
     ],
@@ -71,7 +71,7 @@ Page({
   data: {
     show: false,
     actions: [
-      { name: '选项', color: '#07c160' },
+      { name: '着色选项', color: '#ee0a24' },
       { loading: true },
       { name: '禁用选项', disabled: true },
     ],

packages/action-sheet/index.less

@@ -15,6 +15,11 @@
     &--hover {
       .theme(background-color, '@active-color');
     }
+
+    // reset weapp default border
+    &::after {
+      border-width: 0;
+    }
   }
 
   &__cancel {
@@ -51,7 +56,7 @@
 
   &__description {
     text-align: center;
-    .theme(padding, '@padding-md');
+    .theme(padding, '20px @padding-md');
     .theme(color, '@action-sheet-description-color');
     .theme(font-size, '@action-sheet-description-font-size');
     .theme(line-height, '@action-sheet-description-line-height');

packages/action-sheet/index.wxml

@@ -11,15 +11,15 @@
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClickOverlay"
 >
-  <view wx:if="{{ title }}" class="van-hairline--bottom van-action-sheet__header">
+  <view wx:if="{{ title }}" class="van-action-sheet__header">
     {{ title }}
     <van-icon
-      name="close"
+      name="cross"
       custom-class="van-action-sheet__close"
       bind:click="onClose"
     />
   </view>
-  <view wx:if="{{ description }}" class="van-action-sheet__description">
+  <view wx:if="{{ description }}" class="van-action-sheet__description van-hairline--bottom">
     {{ description }}
   </view>
   <view wx:if="{{ actions && actions.length }}">
@@ -29,7 +29,7 @@
       wx:key="index"
       open-type="{{ item.openType }}"
       style="{{ item.color ? 'color: ' + item.color : '' }}"
-      class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} van-hairline--top {{ item.className || '' }}"
+      class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} {{ item.className || '' }}"
       hover-class="van-action-sheet__item--hover"
       data-index="{{ index }}"
       bind:tap="onSelect"

packages/common/style/var.less

@@ -67,9 +67,9 @@
 
 //ActionSheet
 @action-sheet-max-height: 90%;
-@action-sheet-header-height: 44px;
+@action-sheet-header-height: 48px;
 @action-sheet-header-font-size: @font-size-lg;
-@action-sheet-description-color: @gray-7;
+@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;
@@ -77,11 +77,11 @@
 @action-sheet-item-font-size: @font-size-lg;
 @action-sheet-item-text-color: @text-color;
 @action-sheet-item-disabled-text-color: @gray-5;
-@action-sheet-subname-color: @gray-7;
+@action-sheet-subname-color: @gray-6;
 @action-sheet-subname-font-size: @font-size-sm;
-@action-sheet-close-icon-size: 18px;
+@action-sheet-close-icon-size: 22px;
-@action-sheet-close-icon-color: @gray-6;
+@action-sheet-close-icon-color: @gray-5;
-@action-sheet-close-icon-padding: 0 @padding-sm;
+@action-sheet-close-icon-padding: 0 @padding-md;
 @action-sheet-cancel-text-color: @gray-7;
 @action-sheet-cancel-padding-top: @padding-xs;
 @action-sheet-cancel-padding-color: @background-color;