fix: timeline custom color should work on antd icons

vueComponent · Mar 17, 2022 · 2b81a72 · 2b81a72
1 parent ccf9a41
commit 2b81a72
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>