feat(ActionSheet): add description prop (#4691)

src/action-sheet/README.md

@@ -16,11 +16,7 @@ Vue.use(ActionSheet);
 Use `actions` prop to set options of action-sheet. 
 
 ```html
-<van-action-sheet
+<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
-  v-model="show"
-  :actions="actions"
-  @select="onSelect"
-/>
 ```
 
 ```javascript
@@ -48,10 +44,7 @@ export default {
 ### Status
 
 ```html
-<van-action-sheet
+<van-action-sheet v-model="show" :actions="actions" />
-  v-model="show"
-  :actions="actions"
-/>
 ```
 
 ```javascript
@@ -76,11 +69,37 @@ export default {
   v-model="show"
   :actions="actions"
   cancel-text="Cancel"
-  @select="onSelect"
   @cancel="onCancel"
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      show: false
+    };
+  },
+
+  methods: {
+    onCancel() {
+      this.show = false;
+      Toast('cancel');
+    }
+  }
+}
+```
+
+### Show Description
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  description="Description"
+/>
+```
+
 ### ActionSheet with title
 
 ```html
@@ -98,6 +117,7 @@ export default {
 | actions | Options | *Action[]* | `[]` | - |
 | title | Title | *string* | - | - |
 | cancel-text | Text of cancel button | *string* | - | - |
+| description | Description above the options | *string* | - | 2.2.8 |
 | overlay | Whether to show overlay | *boolean* | `true` | - |
 | round | Whether to show round corner | *boolean* | `true` | 2.0.9 |
 | close-on-click-action | Whether to close when click action | *boolean* | `false` | - |

src/action-sheet/README.zh-CN.md

@@ -16,11 +16,7 @@ Vue.use(ActionSheet);
 `ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
 
 ```html
-<van-action-sheet
+<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
-  v-model="show"
-  :actions="actions"
-  @select="onSelect"
-/>
 ```
 
 ```javascript
@@ -38,7 +34,8 @@ export default {
 
   methods: {
     onSelect(item) {
-      // 点击选项时默认不会关闭菜单，可以手动关闭
+      // 默认情况下，点击选项时不会自动关闭菜单
+      // 可以通过 close-on-click-action 属性开启自动关闭
       this.show = false;
       Toast(item.name);
     }
@@ -48,13 +45,10 @@ export default {
 
 ### 选项状态
 
-选项可以设置为加载状态或禁用状态
+选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色
 
 ```html
-<van-action-sheet
+<van-action-sheet v-model="show" :actions="actions" />
-  v-model="show"
-  :actions="actions"
-/>
 ```
 
 ```javascript
@@ -81,11 +75,39 @@ export default {
   v-model="show"
   :actions="actions"
   cancel-text="取消"
-  @select="onSelect"
   @cancel="onCancel"
 />
 ```
 
+```js
+export default {
+  data() {
+    return {
+      show: false
+    };
+  },
+
+  methods: {
+    onCancel() {
+      this.show = false;
+      Toast('cancel');
+    }
+  }
+}
+```
+
+### 展示描述信息
+
+设置`description`属性后，会在选项上方显示描述信息
+
+```html
+<van-action-sheet
+  v-model="show"
+  :actions="actions"
+  description="这是一段描述信息"
+/>
+```
+
 ### 展示标题栏
 
 通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
@@ -110,8 +132,9 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | actions | 菜单选项 | *Action[]* | `[]` | - |
-| title | 标题 | *string* | - | - |
+| title | 顶部标题 | *string* | - | - |
 | cancel-text | 取消按钮文字 | *string* | - | - |
+| description | 选项上方的描述信息 | *string* | - | 2.2.8 |
 | overlay | 是否显示遮罩层 | *boolean* | `true` | - |
 | round | 是否显示圆角 | *boolean* | `true` | 2.0.9 |
 | close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | - |

src/action-sheet/demo/index.vue

@@ -10,7 +10,7 @@
       <van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('showCancel')">
       <van-button type="primary" @click="show3 = true">{{ $t('buttonText') }}</van-button>
       <van-action-sheet
         v-model="show3"
@@ -21,9 +21,19 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="$t('showDescription')">
       <van-button type="primary" @click="show4 = true">{{ $t('buttonText') }}</van-button>
-      <van-action-sheet v-model="show4" :title="$t('title')">
+      <van-action-sheet
+        v-model="show4"
+        :actions="simpleActions"
+        close-on-click-action
+        :description="$t('description')"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('showTitle')">
+      <van-button type="primary" @click="show5 = true">{{ $t('buttonText') }}</van-button>
+      <van-action-sheet v-model="show5" :title="$t('title')">
         <p>{{ $t('content') }}</p>
       </van-action-sheet>
     </demo-block>
@@ -37,19 +47,23 @@ export default {
   i18n: {
     'zh-CN': {
       buttonText: '弹出菜单',
-      title2: '展示取消按钮',
-      title3: '展示标题栏',
       status: '选项状态',
-      description: '描述信息',
+      subname: '副文本',
-      disabledOption: '禁用选项'
+      disabledOption: '禁用选项',
+      showTitle: '展示标题栏',
+      showCancel: '展示取消按钮',
+      showDescription: '展示描述信息',
+      description: '这是一段描述信息'
     },
     'en-US': {
       buttonText: 'Show ActionSheet',
-      title2: 'ActionSheet with cancel button',
-      title3: 'ActionSheet with title',
       status: 'Status',
-      description: 'Description',
+      subname: 'Subname',
-      disabledOption: 'Disabled Option'
+      disabledOption: 'Disabled Option',
+      showTitle: 'ActionSheet with title',
+      showCancel: 'ActionSheet with cancel button',
+      showDescription: 'ActionSheet with description',
+      description: 'Description'
     }
   },
 
@@ -58,7 +72,8 @@ export default {
       show1: false,
       show2: false,
       show3: false,
-      show4: false
+      show4: false,
+      show5: false
     };
   },
 
@@ -67,7 +82,7 @@ export default {
       return [
         { name: this.$t('option') },
         { name: this.$t('option') },
-        { name: this.$t('option'), subname: this.$t('description') }
+        { name: this.$t('option'), subname: this.$t('subname') }
       ];
     },
 

src/action-sheet/index.less

@@ -51,6 +51,14 @@
     text-align: center;
   }
 
+  &__description {
+    padding: @padding-md;
+    color: @action-sheet-description-color;
+    font-size: @action-sheet-description-font-size;
+    line-height: @action-sheet-description-line-height;
+    text-align: center;
+  }
+
   &__close {
     position: absolute;
     top: 0;

src/action-sheet/index.tsx

@@ -27,6 +27,7 @@ export type ActionSheetProps = PopupMixinProps & {
   actions?: ActionSheetItem[];
   duration: number;
   cancelText?: string;
+  description?: string;
   closeOnClickAction?: boolean;
   safeAreaInsetBottom?: boolean;
 };
@@ -116,6 +117,10 @@ function ActionSheet(
     }
   }
 
+  const Description = props.description && (
+    <div class={bem('description')}>{props.description}</div>
+  );
+
   return (
     <Popup
       class={bem()}
@@ -132,6 +137,7 @@ function ActionSheet(
       {...inherit(ctx, true)}
     >
       {Header()}
+      {Description}
       {props.actions && props.actions.map(Option)}
       {Content()}
       {CancelText()}
@@ -145,6 +151,7 @@ ActionSheet.props = {
   actions: Array,
   duration: Number,
   cancelText: String,
+  description: String,
   getContainer: [String, Function],
   closeOnClickAction: Boolean,
   round: {

src/action-sheet/test/__snapshots__/demo.spec.js.snap

@@ -14,5 +14,8 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
     <!---->
   </div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+    <!---->
+  </div>
 </div>
 `;

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -8,6 +8,12 @@ exports[`callback events 1`] = `
 
 exports[`color option 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 class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
 
+exports[`description prop 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">
+  <div class="van-action-sheet__description">This is a description</div><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></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 class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
 
 exports[`render title and default slot 1`] = ``;

src/action-sheet/test/index.spec.js

@@ -162,3 +162,15 @@ test('color option', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('description prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      description: 'This is a description',
+      actions: [{ name: 'Option' }]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/style/var.less

@@ -49,6 +49,9 @@
 @action-sheet-max-height: 90%;
 @action-sheet-header-height: 44px;
 @action-sheet-header-font-size: @font-size-lg;
+@action-sheet-description-color: @gray-darker;
+@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;