feat(Tag): 增加自定义颜色参数 (#3101)

* feat(tag): add color attribute to t-tag in order to customize tag color feat #3004 * feat: tag自定义颜色下light和light-outline的背景色使用计算的色阶展示 feat #3004 * feat: 补充缺失的类型 * refactor(tag): 将获取颜色样式的代码抽取成方法 * feat(tag): 改用chorma计算色阶 * chore: update snapshot * chore: update demo display * feat(tag): use transparent color for the light mode t-tag when using with color props * chore: update snapshot * feat: 补充类型声明 & 清理多余依赖 --------- Co-authored-by: Uyarn <uyarnchen@gmail.com>
Tencent · Apr 11, 2024 · bb07319 · bb07319
1 parent 30e1ebb
commit bb07319
Show file tree

Hide file tree

Showing 8 changed files with 257 additions and 4 deletions.
diff --git a/src/tag/_example/custom-color.vue b/src/tag/_example/custom-color.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <p class="color-picker">
+      <t-space align="center">
+        <label>调整颜色查看效果</label>
+        <t-color-picker :color-modes="['monochrome']" v-model="color"></t-color-picker>
+      </t-space>
+    </p>
+    <t-space direction="horizontal">
+      <t-space>
+        <t-tag theme="primary" :color="color">默认</t-tag>
+      </t-space>
+      <t-space>
+        <t-tag :color="color" variant="light">浅色</t-tag>
+      </t-space>
+      <t-space>
+        <t-tag :color="color" variant="outline">outline</t-tag>
+      </t-space>
+      <t-space>
+        <t-tag :color="color" variant="light-outline">light-outline</t-tag>
+      </t-space>
+    </t-space>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: 'rgb(0, 82, 217)',
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.color-picker {
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/tag/props.ts b/src/tag/props.ts
@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 标签是否可关闭 */
   closable: Boolean,
+  /** 自定义标签颜色 */
+  color: String,
   /** 组件子元素 */
   content: {
     type: [String, Function] as PropType<TdTagProps['content']>,

diff --git a/src/tag/tag.en-US.md b/src/tag/tag.en-US.md
@@ -6,6 +6,7 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 closable | Boolean | false | \- | N
+color | String | '' | custom color | N 
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N

diff --git a/src/tag/tag.md b/src/tag/tag.md
@@ -1,11 +1,16 @@
 :: BASE_DOC ::
 
+### 自定义颜色
+
+{{ custom-color }}
+
 ## API
 ### Tag Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 closable | Boolean | false | 标签是否可关闭 | N
+color | String | '' | 颜色 | N
 content | String / Slot / Function | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N

diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { CloseIcon as TdCloseIcon } from 'tdesign-icons-vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
+import tinycolor from 'tinycolor2';
 import props from './props';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { TagConfig, getGlobalIconMixins } from '../config-provider/config-receiver';
@@ -38,6 +39,12 @@ export default mixins(getConfigReceiverMixins<Vue, TagConfig>('tag'), getGlobalI
       }
       return {};
     },
+    tagStyle(): Styles {
+      if (this.color) {
+        return this.getTagColorStyle();
+      }
+      return {};
+    },
   },
 
   methods: {
@@ -68,6 +75,29 @@ export default mixins(getConfigReceiverMixins<Vue, TagConfig>('tag'), getGlobalI
 
       return <CloseIcon nativeOnClick={this.handleClose} class={iconClassName} />;
     },
+    getTagColorStyle(): Styles {
+      const luminance = tinycolor(this.color).getLuminance();
+
+      const style: Styles = {
+        color: luminance > 0.5 ? 'black' : 'white',
+      };
+
+      if (this.variant === 'outline' || this.variant === 'light-outline') {
+        style.borderColor = this.color;
+      }
+      if (this.variant !== 'outline') {
+        const getLightestShade = () => {
+          const { r, g, b } = tinycolor(this.color).toRgb();
+          // alpha 0.1  is designed by @wen1kang
+          return `rgba(${r}, ${g}, ${b}, 0.1)`;
+        };
+        style.backgroundColor = this.variant === 'dark' ? this.color : getLightestShade();
+      }
+      if (this.variant !== 'dark') {
+        style.color = this.color;
+      }
+      return style;
+    },
   },
 
   render() {
@@ -81,7 +111,7 @@ export default mixins(getConfigReceiverMixins<Vue, TagConfig>('tag'), getGlobalI
     // 图标
     const icon = renderTNodeJSX(this, 'icon');
     return (
-      <div class={this.tagClass} onClick={this.handleClick}>
+      <div class={this.tagClass} onClick={this.handleClick} style={this.tagStyle}>
         {icon}
         <span
           class={this.maxWidth ? `${this.componentName}--text` : undefined}

diff --git a/src/tag/type.ts b/src/tag/type.ts
@@ -12,6 +12,10 @@ export interface TdTagProps {
    * @default false
    */
   closable?: boolean;
+  /**
+   * 自定义颜色
+   */
+  color?: string;
   /**
    * 组件子元素
    */

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -59308,7 +59308,7 @@ exports[`csr snapshot test > csr test ./src/image/_example/extra-always.vue 1`]
             >
               <div
                 class="t-tag t-tag--warning t-tag--dark t-tag--mark"
-                style="border-radius: 3px; background: transparent; color: rgb(255, 255, 255);"
+                style="border-radius: 3px; color: rgb(255, 255, 255); background: transparent;"
               >
                 <span>
                   <svg
@@ -59396,7 +59396,7 @@ exports[`csr snapshot test > csr test ./src/image/_example/extra-always.vue 1`]
           >
             <div
               class="t-tag t-tag--warning t-tag--dark t-tag--mark"
-              style="position: absolute; right: 8px; bottom: 8px; border-radius: 3px; background: rgb(236, 242, 254); color: rgb(0, 82, 217);"
+              style="position: absolute; right: 8px; bottom: 8px; border-radius: 3px; color: rgb(0, 82, 217); background: rgb(236, 242, 254);"
             >
               <span>
                 <svg
@@ -60491,7 +60491,7 @@ exports[`csr snapshot test > csr test ./src/image/_example/gallery-cover.vue 1`]
   >
     <div
       class="t-tag t-tag--warning t-tag--dark t-tag--mark"
-      style="margin: 8px; border-radius: 3px; background: rgb(236, 242, 254); color: rgb(0, 82, 217);"
+      style="margin: 8px; border-radius: 3px; color: rgb(0, 82, 217); background: rgb(236, 242, 254);"
     >
       <span>
         标签一
@@ -103546,6 +103546,176 @@ exports[`csr snapshot test > csr test ./src/tag/_example/check-tag-group.vue 1`]
 </div>
 `;
 
+exports[`csr snapshot test > csr test ./src/tag/_example/custom-color.vue 1`] = `
+<div
+  data-v-d3a6e7a6=""
+>
+  <p
+    class="color-picker"
+    data-v-d3a6e7a6=""
+  >
+    <div
+      class="t-space t-space-align-center t-space-horizontal"
+      data-v-d3a6e7a6=""
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <label
+          data-v-d3a6e7a6=""
+        >
+          调整颜色查看效果
+        </label>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-color-picker__trigger"
+          data-v-d3a6e7a6=""
+        >
+          <div
+            class="t-color-picker__trigger--default"
+          >
+            <div
+              class="t-input__wrap t-input--auto-width"
+            >
+              <div
+                class="t-input t-input--prefix"
+              >
+                <div
+                  class="t-input__prefix"
+                >
+                  <div
+                    class="t-color-picker__trigger--default__color t-color-picker--bg-alpha"
+                  >
+                    <span
+                      class="color-inner"
+                      style="background: rgb(0, 82, 217);"
+                    />
+                  </div>
+                </div>
+                <input
+                  autocomplete=""
+                  class="t-input__inner"
+                  placeholder="请输入"
+                  type="text"
+                  unselectable="off"
+                />
+                <span
+                  class="t-input__input-pre"
+                >
+                  rgb(0, 82, 217)
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </p>
+  <div
+    class="t-space t-space-horizontal"
+    data-v-d3a6e7a6=""
+    style="gap: 16px;"
+  >
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        data-v-d3a6e7a6=""
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-tag t-tag--primary t-tag--dark"
+            data-v-d3a6e7a6=""
+            style="color: white; background-color: rgb(0, 82, 217);"
+          >
+            <span>
+              默认
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        data-v-d3a6e7a6=""
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-tag t-tag--default t-tag--light"
+            data-v-d3a6e7a6=""
+            style="color: rgb(0, 82, 217); background-color: rgba(0, 82, 217, 0.1);"
+          >
+            <span>
+              浅色
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        data-v-d3a6e7a6=""
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-tag t-tag--default t-tag--outline"
+            data-v-d3a6e7a6=""
+            style="color: rgb(0, 82, 217); border-color: rgb(0, 82, 217);"
+          >
+            <span>
+              outline
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-horizontal"
+        data-v-d3a6e7a6=""
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-tag t-tag--default t-tag--light-outline"
+            data-v-d3a6e7a6=""
+            style="color: rgb(0, 82, 217); border-color: rgb(0, 82, 217); background-color: rgba(0, 82, 217, 0.1);"
+          >
+            <span>
+              light-outline
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test ./src/tag/_example/delete.vue 1`] = `
 <div
   class="t-space t-space-vertical"

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap