From d27626ada238bc52c64cfa3e65a2fe74cc5f419e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 31 Jan 2021 18:36:11 +0800
Subject: [PATCH] feat(Popover): support config action color (#8049)

---
 src/popover/README.md                             |  1 +
 src/popover/README.zh-CN.md                       |  1 +
 src/popover/index.js                              |  3 ++-
 src/popover/test/__snapshots__/index.spec.js.snap |  6 +++---
 src/popover/test/index.spec.js                    | 14 ++++++++++++++
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/popover/README.md b/src/popover/README.md
index f05a80638..e9cf5946e 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -221,6 +221,7 @@ export default {
 | --------- | ----------------------- | --------------------------- |
 | text      | Action Text             | _string_                    |
 | icon      | Icon                    | _string_                    |
+| color     | Action Color            | _string_                    |
 | disabled  | Whether to be disabled  | _boolean_                   |
 | className | className of the option | _string \| Array \| object_ |
 
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 7df97a9ca..a4e108dae 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -237,6 +237,7 @@ export default {
 | --- | --- | --- |
 | text | 选项文字 | _string_ |
 | icon | 文字左侧的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
+| color | 选项文字颜色 | _string_ |
 | disabled | 是否为禁用状态 | _boolean_ |
 | className | 为对应选项添加额外的类名 | _string \| Array \| object_ |
 
diff --git a/src/popover/index.js b/src/popover/index.js
index b81125595..c228ef67c 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -124,11 +124,12 @@ export default createComponent({
     };
 
     const renderAction = (action, index) => {
-      const { icon, text, disabled, className } = action;
+      const { icon, text, color, disabled, className } = action;
       return (
         <div
           role="menuitem"
           class={[bem('action', { disabled, 'with-icon': icon }), className]}
+          style={{ color }}
           onClick={() => onClickAction(action, index)}
         >
           {icon && <Icon name={icon} class={bem('action-icon')} />}
diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap
index c3e38fdc0..90adbf6e6 100644
--- a/src/popover/test/__snapshots__/index.spec.js.snap
+++ b/src/popover/test/__snapshots__/index.spec.js.snap
@@ -17,7 +17,7 @@ exports[`should locate to reference element when showed 1`] = `
 
 exports[`should locate to reference element when showed 2`] = `
 <transition-stub>
-  <div style="z-index: 2006; position: absolute; left: 0px; top: 8px; margin: 0px;"
+  <div style="z-index: 2007; position: absolute; left: 0px; top: 8px; margin: 0px;"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="bottom"
   >
@@ -33,7 +33,7 @@ exports[`should locate to reference element when showed 2`] = `
 
 exports[`should locate to reference element when showed 3`] = `
 <transition-stub>
-  <div style="z-index: 2006; display: none;"
+  <div style="z-index: 2007; display: none;"
        class="van-popup van-popover van-popover--light"
   >
     <div class="van-popover__arrow">
@@ -48,7 +48,7 @@ exports[`should locate to reference element when showed 3`] = `
 
 exports[`should watch placement prop and update location 1`] = `
 <transition-stub>
-  <div style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;"
+  <div style="z-index: 2008; position: absolute; left: 0px; top: -8px; margin: 0px;"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="top"
   >
diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js
index 8f583cc65..8f1fa4053 100644
--- a/src/popover/test/index.spec.js
+++ b/src/popover/test/index.spec.js
@@ -82,6 +82,20 @@ test('should allow to custom the className of action', () => {
   expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
 });
 
+test('should allow to custom the color of action test', () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+      teleport: null,
+      actions: [{ text: 'Option', color: 'red' }],
+    },
+  });
+
+  expect(wrapper.find('.van-popover__action').element.style.color).toEqual(
+    'red'
+  );
+});
+
 test('should locate to reference element when showed', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {