✨ Timeline supports color gray item now (#17731)

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>

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>
 `;
 

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,
 );

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 |

components/timeline/index.zh-CN.md

@@ -39,7 +39,7 @@ title: Timeline
 时间轴的每一个节点。
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | ----------------------------------------------- | ----------------- | ------ | ------ |
-| color    | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string            | blue   |        |
+| --- | --- | --- | --- | --- |
+| color | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string | blue |  |
 | dot | 自定义时间轴点 | string\|ReactNode | - |  |
 | position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |

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 {