refactor(tag, dynamic-tags): remove text-color prop, use object as color

CHANGELOG.en-US.md

@@ -4,8 +4,8 @@
 
 ### Feats
 
-- `n-tag` add `color` and `text-color` prop, closes [#693](https://github.com/TuSimple/naive-ui/issues/693).
-- `n-dynamic-tags` add `color` and `text-color` prop, closes [#693](https://github.com/TuSimple/naive-ui/issues/693).
+- `n-tag` add `color` prop, closes [#693](https://github.com/TuSimple/naive-ui/issues/693).
+- `n-dynamic-tags` add `color`, closes [#693](https://github.com/TuSimple/naive-ui/issues/693).
 - `n-time-picker` optimization the now button logic, closes [#401](https://github.com/TuSimple/naive-ui/issues/401).
 - `n-pagination` `PaginationInfo` add `itemCount` prop, closes [#585](https://github.com/TuSimple/naive-ui/issues/585).
 

CHANGELOG.zh-CN.md

@@ -4,8 +4,8 @@
 
 ### Feats
 
-- `n-tag` 新增 `color` 和 `text-color` 属性, 关闭 [#693](https://github.com/TuSimple/naive-ui/issues/693)
-- `n-dynamic-tags` 新增 `color` 和 `text-color` 属性, 关闭 [#693](https://github.com/TuSimple/naive-ui/issues/693)
+- `n-tag` 新增 `color`，关闭 [#693](https://github.com/TuSimple/naive-ui/issues/693)
+- `n-dynamic-tags` 新增 `color`，关闭 [#693](https://github.com/TuSimple/naive-ui/issues/693)
 - `n-time-picker` 优化 now 按钮的逻辑，关闭 [#401](https://github.com/TuSimple/naive-ui/issues/401)
 - `n-pagination` `PaginationInfo` 增加 `itemCount` 属性，关闭 [#585](https://github.com/TuSimple/naive-ui/issues/585)
 

src/dynamic-tags/demos/enUS/index.demo-entry.md

@@ -14,14 +14,13 @@ form
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | closable | `boolean` | `true` | Whether the tag is closable. |
-| color | `string` | `undefined` | color of the tag, if set `type` is invalid. |
+| color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | Color of the tag, it will overrides type's color. |
 | default-value | `string[]` | `[]` | Default value in uncontrolled mode. |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |
 | input-style | `string \| Object` | `undefined` | Customize the style of the input. |
 | round | `boolean` | `false` | Whether the tag has round corner. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |
 | tag-style | `string \| Object` | `undefined` | Customize the style of the tag. |
-| text-color | `string` | `undefined` | Text color of the tag. |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
 | value | `string[]` | `undefined` | Value in controlled mode. |
 | on-update:value | `(value: boolean) => void` | `undefined` | Callback when the component's value changes. |

src/dynamic-tags/demos/zhCN/index.demo-entry.md

@@ -14,14 +14,13 @@ form
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | closable | `boolean` | `true` | 是否可关闭 |
-| color | `string` | `undefined` | 标签颜色，设置该项后　`type` 无效 |
+| color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | 标签颜色，设置该项后　`type` 无效 |
 | default-value | `string[]` | `[]` | 非受控模式下的默认值 |
 | disabled | `boolean` | `false` | 是否禁用 |
 | input-style | `string \| Object` | `undefined` | 自定义输入框的样式 |
 | round | `boolean` | `false` | 是否圆角 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸大小 |
 | tag-style | `string \| Object` | `undefined` | 自定义标签的样式 |
-| text-color | `string` | `undefined` | 标签文字颜色 |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 标签类型 |
 | value | `string[]` | `undefined` | 受控模式下的值 |
 | on-update:value | `(value: boolean) => void` | `undefined` | 组件值发生变化时的回调 |

src/dynamic-tags/src/DynamicTags.tsx

@@ -183,7 +183,6 @@ export default defineComponent({
               round,
               size,
               color,
-              textColor,
               closable,
               disabled,
               showInput,
@@ -207,7 +206,6 @@ export default defineComponent({
                   round={round}
                   size={size}
                   color={color}
-                  textColor={textColor}
                   closable={closable}
                   disabled={disabled}
                   onClose={() => handleCloseClick(index)}

src/tag/demos/enUS/color.demo.md

@@ -0,0 +1,9 @@
+# Color
+
+Use a color object to customize color.
+
+```html
+<n-tag :color="{ color: '#BBB', textColor: '#555', borderColor: '#555' }">
+  Farewell to the night, waiting for dawn
+</n-tag>
+```

src/tag/demos/enUS/index.demo-entry.md

@@ -11,6 +11,7 @@ disabled
 size
 checkable
 shape
+color
 ```
 
 ## Props
@@ -23,11 +24,10 @@ shape
 | checkable | `boolean` | `false` | Whether the tag is checkable, use checkable the type property invalid. |
 | checked | `boolean` | `false` | Whether the tag is checked, use with checkable. |
 | closable | `boolean` | `false` | Whether the tag is closable. |
-| color | `string` | `undefined` | color of the tag, if set `type` is invalid. |
+| color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | Color of the tag, it will overrides type's color. |
 | disabled | `boolean` | `false` | Whether the tag is disabled. |
 | round | `boolean` | `false` | Whether the tag has round corner. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the tag. |
-| text-color | `string` | `undefined` | Text color of the tag. |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Type of the tag. |
 | on-click | `(e: MouseEvent) => void` | `undefined` | Callback on click. |
 | on-update:checked | `(value: boolean) => void` | `undefined` | Callback on checked status changes. |

src/tag/demos/zhCN/color.demo.md

@@ -0,0 +1,9 @@
+# 颜色
+
+使用一个颜色对象定制标签的颜色。
+
+```html
+<n-tag :color="{ color: '#BBB', textColor: '#555', borderColor: '#555' }">
+  告别夜晚 等待天亮
+</n-tag>
+```

src/tag/demos/zhCN/index.demo-entry.md

@@ -11,6 +11,7 @@ disabled
 size
 checkable
 shape
+color
 rtl-debug
 ```
 
@@ -24,11 +25,10 @@ rtl-debug
 | checkable | `boolean` | `false` | 是否可以选择，使用后 type 将不生效 |
 | checked | `boolean` | `false` | 是否被选中，配合 checkable 一起使用 |
 | closable | `boolean` | `false` | 是否可关闭 |
-| color | `string` | `undefined` | 标签颜色，设置该项后　`type` 无效 |
+| color | `{ color?: string, borderColor?: string, textColor?: string }` | `undefined` | 标签颜色，设置该项后　`type` 无效 |
 | disabled | `boolean` | `false` | 是否禁用 |
 | round | `boolean` | `false` | 是否圆角 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
-| text-color | `string` | `undefined` | 标签文字颜色 |
 | type | `'default' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | 类型 |
 | on-click | `(e: MouseEvent) => void` | `undefined` | 点击关闭时的回调 |
 | on-update:checked | `(value: boolean) => void` | `undefined` | 选择状态更改时的回调 |

src/tag/src/Tag.tsx

@@ -111,7 +111,7 @@ export default defineComponent({
       handleClick,
       handleCloseClick,
       cssVars: computed(() => {
-        const { type, size, color, textColor } = props
+        const { type, size, color: { color, textColor } = {} } = props
         const {
           common: { cubicBezierEaseInOut },
           self: {
@@ -133,7 +133,7 @@ export default defineComponent({
             [createKey('closeSize', size)]: closeSize,
             [createKey('fontSize', size)]: fontSize,
             [createKey('height', size)]: height,
-            [createKey('color', type)]: typeColor,
+            [createKey('color', type)]: typedColor,
             [createKey('textColor', type)]: typeTextColor,
             [createKey('border', type)]: border,
             [createKey('closeColor', type)]: closeColor,
@@ -151,7 +151,7 @@ export default defineComponent({
           '--close-margin': closeMargin,
           '--close-margin-rtl': closeMarginRtl,
           '--close-size': closeSize,
-          '--color': color || typeColor,
+          '--color': color || typedColor,
           '--color-checkable': colorCheckable,
           '--color-checked': colorChecked,
           '--color-checked-hover': colorCheckedHover,
@@ -172,7 +172,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix, rtlEnabled } = this
+    const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {} } = this
     return (
       <div
         class={[
@@ -202,7 +202,10 @@ export default defineComponent({
           />
         ) : null}
         {!this.checkable && this.mergedBordered ? (
-          <div class={`${mergedClsPrefix}-tag__border`} />
+          <div
+            class={`${mergedClsPrefix}-tag__border`}
+            style={{ borderColor }}
+          />
         ) : null}
       </div>
     )

src/tag/src/common-props.ts

@@ -1,8 +1,13 @@
 import { PropType } from 'vue'
 
+export interface TagColor {
+  color?: string
+  borderColor?: string
+  textColor?: string
+}
+
 export default {
-  color: String,
-  textColor: String,
+  color: Object as PropType<TagColor>,
   type: {
     type: String as PropType<
     'default' | 'primary' | 'success' | 'info' | 'warning' | 'error'