feat(module:timeline): add gray as a default color

components/core/testing/public-api.ts

@@ -1,3 +1,11 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
 export * from './dispatch-events';
 export * from './event-objects';
 export * from './type-in-element';

components/timeline/demo/color.md

@@ -1,15 +1,15 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 圆圈颜色
   en-US: Color
 ---
 
 ## zh-CN
 
-圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
+圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。
 
-## en-US 
+## 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.
 

components/timeline/demo/color.ts

@@ -16,6 +16,16 @@ import { Component } from '@angular/core';
         <p>Technical testing 2</p>
         <p>Technical testing 3 2015-09-01</p>
       </nz-timeline-item>
+      <nz-timeline-item nzColor="gray">
+        <p>Technical testing 1</p>
+        <p>Technical testing 2</p>
+        <p>Technical testing 3 2015-09-01</p>
+      </nz-timeline-item>
+      <nz-timeline-item nzColor="gray">
+        <p>Technical testing 1</p>
+        <p>Technical testing 2</p>
+        <p>Technical testing 3 2015-09-01</p>
+      </nz-timeline-item>
     </nz-timeline>
   `
 })

components/timeline/doc/index.en-US.md

@@ -47,5 +47,5 @@ Node of timeline
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[nzColor]` | Set the circle's color to `blue`, `red`, `green` or other custom colors (css color) | `string` | `blue` |
+| `[nzColor]` | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` or other custom colors (css color) | `string` | `blue` |
 | `[nzDot]` | Customize timeline dot | `string \| TemplateRef<void>` | - |

components/timeline/doc/index.zh-CN.md

@@ -48,5 +48,5 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| `[nzColor]` | 指定圆圈颜色 `blue, red, green`，或自定义的色值(CSS 颜色) | `string` | blue |
+| `[nzColor]` | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'`，或自定义的色值 (CSS 颜色) | `string` | blue |
 | `[nzDot]` | 自定义时间轴点 | `string \| TemplateRef<void>` | - |

components/timeline/nz-timeline-item.component.html

@@ -10,10 +10,11 @@
     [class.ant-timeline-item-head-red]="nzColor === 'red'"
     [class.ant-timeline-item-head-blue]="nzColor === 'blue'"
     [class.ant-timeline-item-head-green]="nzColor === 'green'"
+    [class.ant-timeline-item-head-gray]="nzColor === 'gray'"
     [class.ant-timeline-item-head-custom]="!!nzDot">
     <ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
   </div>
   <div class="ant-timeline-item-content">
     <ng-content></ng-content>
   </div>
-</li>
+</li>

components/timeline/nz-timeline-item.component.ts

@@ -23,6 +23,8 @@ import {
 
 import { NzTimelineMode } from './nz-timeline.component';
 
+export type NzTimelineItemColor = 'red' | 'blue' | 'green' | 'gray' | string;
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -33,7 +35,7 @@ import { NzTimelineMode } from './nz-timeline.component';
 })
 export class NzTimelineItemComponent implements OnInit, OnChanges {
   @ViewChild('liTemplate', { static: true }) liTemplate: ElementRef;
-  @Input() nzColor: string = 'blue';
+  @Input() nzColor: NzTimelineItemColor = 'blue';
   @Input() nzDot: string | TemplateRef<void>;
 
   isLast = false;
@@ -56,7 +58,7 @@ export class NzTimelineItemComponent implements OnInit, OnChanges {
   }
 
   private tryUpdateCustomColor(): void {
-    const defaultColors = ['blue', 'red', 'green'];
+    const defaultColors = ['blue', 'red', 'green', 'gray'];
     const circle = this.liTemplate.nativeElement.querySelector('.ant-timeline-item-head');
     if (defaultColors.indexOf(this.nzColor) === -1) {
       this.renderer.setStyle(circle, 'border-color', this.nzColor);

components/timeline/nz-timeline.spec.ts

@@ -121,7 +121,7 @@ describe('timeline', () => {
 
     it('should support custom color', () => {
       fixture.detectChanges();
-      expect(items[0].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('grey');
+      expect(items[0].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('cyan');
       expect(items[1].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('rgb(200, 0, 0)');
       expect(items[2].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe(
         'rgb(120, 18, 65)'
@@ -168,7 +168,7 @@ export class NzTestTimelineBasicComponent {
 @Component({
   template: `
     <nz-timeline>
-      <nz-timeline-item [nzColor]="'grey'">Create a services site 2015-09-01</nz-timeline-item>
+      <nz-timeline-item [nzColor]="'cyan'">Create a services site 2015-09-01</nz-timeline-item>
       <nz-timeline-item [nzColor]="'rgb(200, 0, 0)'">Solve initial network problems 2015-09-01</nz-timeline-item>
       <nz-timeline-item [nzColor]="'#781241'">Technical testing 2015-09-01</nz-timeline-item>
       <nz-timeline-item [nzColor]="'red'">Network problems being solved 2015-09-01</nz-timeline-item>

components/timeline/style/index.less

@@ -19,14 +19,15 @@
 
     &-tail {
       position: absolute;
-      top: 0.75em;
+      top: 10px;
       left: 4px;
-      height: 100%;
+      height: calc(100% - 10px);
       border-left: @timeline-width solid @timeline-color;
     }
 
     &-pending &-head {
       font-size: @font-size-sm;
+      background-color: transparent;
     }
 
     &-pending &-tail {
@@ -55,6 +56,11 @@
         color: @success-color;
         border-color: @success-color;
       }
+
+      &-gray {
+        color: @disabled-color;
+        border-color: @disabled-color;
+      }
     }
 
     &-head-custom {
@@ -141,6 +147,7 @@
 
   &&-pending &-item-last &-item-tail {
     display: block;
+    height: calc(100% - 14px);
     border-left: 2px dotted @timeline-color;
   }
 
@@ -150,11 +157,13 @@
 
   &&-reverse &-item-pending {
     .@{timeline-prefix-cls}-item-tail {
+      top: 15px;
       display: block;
+      height: calc(100% - 15px);
       border-left: 2px dotted @timeline-color;
     }
     .@{timeline-prefix-cls}-item-content {
       min-height: 48px;
     }
   }
-}
+}