From 4852e0ef0964d1fd9051f08e1761b5e2ee1e40f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Fri, 19 Jul 2019 14:08:39 +0800
Subject: [PATCH] :sparkles: Timeline supports color gray item now (#17731)

---
 components/timeline/TimelineItem.tsx          |  2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 48 ++++++++++++++++++-
 components/timeline/demo/color.md             | 14 +++++-
 components/timeline/index.en-US.md            |  2 +-
 components/timeline/index.zh-CN.md            | 10 ++--
 components/timeline/style/index.less          |  5 ++
 6 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index 1176f0b3e3..ac436b8af3 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -46,7 +46,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
           <div className={`${prefixCls}-item-tail`} />
           <div
             className={dotClassName}
-            style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
+            style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
           >
             {dot}
           </div>
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
index d8d14c2a83..7dd5b23467 100644
--- a/components/timeline/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
@@ -270,7 +270,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
     </div>
   </li>
   <li
-    class="ant-timeline-item ant-timeline-item-last"
+    class="ant-timeline-item"
   >
     <div
       class="ant-timeline-item-tail"
@@ -292,6 +292,52 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
       </p>
     </div>
   </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-gray"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Technical testing 1
+      </p>
+      <p>
+        Technical testing 2
+      </p>
+      <p>
+        Technical testing 3 2015-09-01
+      </p>
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-gray"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Technical testing 1
+      </p>
+      <p>
+        Technical testing 2
+      </p>
+      <p>
+        Technical testing 3 2015-09-01
+      </p>
+    </div>
+  </li>
 </ul>
 `;
 
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index ec367dcc54..adfd03b480 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
+圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。
 
 ## en-US
 
-Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
+Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.
 
 ```jsx
 import { Timeline } from 'antd';
@@ -30,6 +30,16 @@ ReactDOM.render(
       <p>Technical testing 2</p>
       <p>Technical testing 3 2015-09-01</p>
     </Timeline.Item>
+    <Timeline.Item color="gray">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </Timeline.Item>
+    <Timeline.Item color="gray">
+      <p>Technical testing 1</p>
+      <p>Technical testing 2</p>
+      <p>Technical testing 3 2015-09-01</p>
+    </Timeline.Item>
   </Timeline>,
   mountNode,
 );
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
index 4b49cc99c5..7c29af336f 100644
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@@ -39,6 +39,6 @@ Node of timeline
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |  |
+| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |  |
 | dot | Customize timeline dot | string\|ReactNode | - |  |
 | position | Customize node position | `left` \| `right` | - | 3.17.0 |
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
index cfaa5cb2b8..8f0c882875 100644
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@@ -38,8 +38,8 @@ title: Timeline
 
 时间轴的每一个节点。
 
-| 参数     | 说明                                            | 类型              | 默认值 | 版本   |
-| -------- | ----------------------------------------------- | ----------------- | ------ | ------ |
-| color    | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string            | blue   |        |
-| dot      | 自定义时间轴点                                  | string\|ReactNode | -      |        |
-| position | 自定义节点位置                                  | `left` \| `right` | -      | 3.17.0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| color | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string | blue |  |
+| dot | 自定义时间轴点 | string\|ReactNode | - |  |
+| position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |
diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less
index 70307f2e85..78aaa83132 100644
--- a/components/timeline/style/index.less
+++ b/components/timeline/style/index.less
@@ -55,6 +55,11 @@
         color: @success-color;
         border-color: @success-color;
       }
+
+      &-gray {
+        color: @disabled-color;
+        border-color: @disabled-color;
+      }
     }
 
     &-head-custom {