feat(module:timeline): allow custom color (#8335)

* feat(module:timeline): allow custom color pick

* feat(module:timeline): allow custom color pick

Author: ParsaArvanehPA

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

@@ -42,9 +42,9 @@ Timeline
 
 Node of timeline
 
-| Property       | Description                                                      | Type                          | Default |
-| -------------- | ---------------------------------------------------------------- | ----------------------------- | ------- |
-| `[nzColor]`    | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` | `string`                      | `blue`  |
-| `[nzDot]`      | Customize timeline dot                                           | `string \| TemplateRef<void>` | -       |
-| `[nzPosition]` | Customize position, only works when `nzMode` is `custom`         | `'left' \| 'right'`           | -       |
-| `[nzLabel]`    | Set the label                                                    | `string \| TemplateRef<void>` | -       |
+| Property       | Description                                                                             | Type                          | Default |
+| -------------- | --------------------------------------------------------------------------------------- | ----------------------------- | ------- |
+| `[nzColor]`    | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` or other custom colors | `string`                      | `blue`  |
+| `[nzDot]`      | Customize timeline dot                                                                  | `string \| TemplateRef<void>` | -       |
+| `[nzPosition]` | Customize position, only works when `nzMode` is `custom`                                | `'left' \| 'right'`           | -       |
+| `[nzLabel]`    | Set the label                                                                           | `string \| TemplateRef<void>` | -       |

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

@@ -43,9 +43,9 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 
 时间轴的每一个节点。
 
-| 参数           | 说明                                                | 类型                          | 默认值 |
-| -------------- | --------------------------------------------------- | ----------------------------- | ------ |
-| `[nzColor]`    | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'` | `string`                      | blue   |
-| `[nzDot]`      | 自定义时间轴点                                      | `string \| TemplateRef<void>` | -      |
-| `[nzPosition]` | 自定义节点位置，仅当 `nzMode` 为 `custom` 时有效    | `'left' \| 'right'`           | -      |
-| `[nzLabel]`    | 设置标签                                            | `string \| TemplateRef<void>` | -      |
+| 参数           | 说明                                                               | 类型                          | 默认值 |
+| -------------- | ------------------------------------------------------------------ | ----------------------------- | ------ |
+| `[nzColor]`    | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'` 或自定义的色值 | `string`                      | blue   |
+| `[nzDot]`      | 自定义时间轴点                                                     | `string \| TemplateRef<void>` | -      |
+| `[nzPosition]` | 自定义节点位置，仅当 `nzMode` 为 `custom` 时有效                   | `'left' \| 'right'`           | -      |
+| `[nzLabel]`    | 设置标签                                                           | `string \| TemplateRef<void>` | -      |

components/timeline/typings.ts

@@ -9,5 +9,6 @@ export type NzTimelineMode = (typeof TimelineModes)[number];
 const TimelinePositions = ['left', 'right'] as const;
 export type NzTimelinePosition = (typeof TimelinePositions)[number];
 
+type NzCustomColor = string;
 export const TimelineTimeDefaultColors = ['red', 'blue', 'green', 'grey', 'gray'] as const;
-export type NzTimelineItemColor = (typeof TimelineTimeDefaultColors)[number];
+export type NzTimelineItemColor = (typeof TimelineTimeDefaultColors)[number] | NzCustomColor;