From 2b81a7213b169dc72f02c7e0f57afffd67333f0e Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 17 Mar 2022 14:56:09 +0800
Subject: [PATCH] fix: timeline custom color should work on antd icons

---
 components/tabs/style/index.less     |  2 +-
 components/timeline/TimelineItem.tsx |  6 ++----
 components/timeline/demo/color.vue   | 15 +++++++++++++++
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index d6ffe501c..4947f57a3 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -171,7 +171,7 @@
 
     &&-active &-btn {
       color: @tabs-highlight-color;
-      text-shadow: 0 0 0.25px currentColor;
+      text-shadow: 0 0 0.25px currentcolor;
     }
 
     &&-disabled {
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index 81e316f4e..fbc9441f2 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -38,14 +38,12 @@ export default defineComponent({
         [`${prefixCls.value}-item-head-custom`]: dot,
         [`${prefixCls.value}-item-head-${color}`]: true,
       });
+      const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
       return (
         <li class={itemClassName}>
           {label && <div class={`${prefixCls.value}-item-label`}>{label}</div>}
           <div class={`${prefixCls.value}-item-tail`} />
-          <div
-            class={dotClassName}
-            style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
-          >
+          <div class={dotClassName} style={{ borderColor: customColor, color: customColor }}>
             {dot}
           </div>
           <div class={`${prefixCls.value}-item-content`}>{slots.default?.()}</div>
diff --git a/components/timeline/demo/color.vue b/components/timeline/demo/color.vue
index a1fff0084..3a89f2b86 100644
--- a/components/timeline/demo/color.vue
+++ b/components/timeline/demo/color.vue
@@ -40,5 +40,20 @@ Set the color of circles. `green` means completed or success status, `red` means
       <p>Technical testing 2</p>
       <p>Technical testing 3 2015-09-01</p>
     </a-timeline-item>
+    <a-timeline-item color="#00CCFF">
+      <template #dot>
+        <SmileOutlined />
+      </template>
+      <p>Custom color testing</p>
+    </a-timeline-item>
   </a-timeline>
 </template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { SmileOutlined } from '@ant-design/icons-vue';
+export default defineComponent({
+  components: {
+    SmileOutlined,
+  },
+});
+</script>