From a75e4cfb18ca7adc7ac4765be7463f06695683aa Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 8 Aug 2019 20:48:24 +0800
Subject: [PATCH] [new feature] ActionSheet: add color option (#4073)

---
 src/action-sheet/README.md                            |  3 ++-
 src/action-sheet/README.zh-CN.md                      |  5 +++--
 src/action-sheet/demo/index.vue                       |  4 +++-
 src/action-sheet/index.tsx                            |  2 ++
 .../test/__snapshots__/index.spec.js.snap             |  6 ++++++
 src/action-sheet/test/index.spec.js                   | 11 +++++++++++
 src/radio/README.zh-CN.md                             |  4 ++--
 7 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
index 960421ebc..e7041a76a 100644
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@@ -58,7 +58,7 @@ export default {
     return {
       show: false,
       actions: [
-        { name: 'Option' },
+        { name: 'Option', color: '#07c160' },
         { loading: true },
         { name: 'Disabled Option', disabled: true }
       ]
@@ -124,6 +124,7 @@ export default {
 |------|------|------|
 | name | Title | `string` |
 | subname | Subtitle | `string` |
+| color | Text color | `string` |
 | className | className for the option | `any` |
 | loading | Whether to be loading status | `boolean` |
 | disabled | Whether to be disabled | `boolean` |
diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md
index 27dc1e64c..51a15ad5c 100644
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@@ -61,8 +61,8 @@ export default {
     return {
       show: false,
       actions: [
-        { name: '选项' },
-        { name: '选项', loading: true },
+        { name: '选项', color: '#07c160' },
+        { loading: true },
         { name: '禁用选项', disabled: true }
       ]
     };
@@ -133,6 +133,7 @@ export default {
 |------|------|------|
 | name | 标题 | `string` |
 | subname | 二级标题 | `string` |
+| color | 选项文字颜色 | `string` |
 | className | 为对应列添加额外的 class | `any` |
 | loading | 是否为加载状态 | `boolean` |
 | disabled | 是否为禁用状态 | `boolean` |
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 94fa057c9..12b922602 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -66,6 +66,8 @@
 </template>
 
 <script>
+import { GREEN } from '../../utils/color';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -106,7 +108,7 @@ export default {
 
     statusActions() {
       return [
-        { name: this.$t('option') },
+        { name: this.$t('option'), color: GREEN },
         { loading: true },
         { name: this.$t('disabledOption'), disabled: true }
       ];
diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx
index 7b7f802e5..321199a9f 100644
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@@ -12,6 +12,7 @@ import { PopupMixinProps } from '../mixins/popup/type';
 
 export type ActionSheetItem = {
   name: string;
+  color?: string;
   subname?: string;
   loading?: boolean;
   disabled?: boolean;
@@ -96,6 +97,7 @@ function ActionSheet(
     return (
       <div
         class={[bem('item', { disabled }), item.className, 'van-hairline--top']}
+        style={{ color: item.color }}
         onClick={onClickOption}
       >
         {OptionContent()}
diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
index cb292bf78..e6d13368f 100644
--- a/src/action-sheet/test/__snapshots__/index.spec.js.snap
+++ b/src/action-sheet/test/__snapshots__/index.spec.js.snap
@@ -12,6 +12,12 @@ exports[`callback events 1`] = `
 </div>
 `;
 
+exports[`color option 1`] = `
+<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></div>
+</div>
+`;
+
 exports[`disable lazy-render 1`] = `
 <div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
   <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
diff --git a/src/action-sheet/test/index.spec.js b/src/action-sheet/test/index.spec.js
index a56b9c82f..c185258b6 100644
--- a/src/action-sheet/test/index.spec.js
+++ b/src/action-sheet/test/index.spec.js
@@ -151,3 +151,14 @@ test('round prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('color option', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option', color: 'red' }]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index 338888df6..0ced8678d 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -114,7 +114,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| name | 标识符 | 任意类型 | - | - |
+| name | 标识符 | `any` | - | - |
 | shape | 形状，可选值为 `square` | `string` | `round` | 1.6.0 |
 | disabled | 是否为禁用状态 | `boolean` | `false` | - |
 | icon-size | 图标大小，默认单位为`px` | `string | number` | `20px` | 2.0.0 |
@@ -126,7 +126,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| v-model | 当前选中项的标识符 | 任意类型 | - | - |
+| v-model | 当前选中项的标识符 | `any` | - | - |
 | disabled | 是否禁用所有单选框 | `boolean` | `false` | - |
 
 ### Radio Events