feat(tooltip): support textColor (#1756)

varletjs · Sep 11, 2024 · 25962ef · 25962ef
1 parent 7eabc07
commit 25962ef
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 4 deletions.
diff --git a/packages/varlet-ui/src/tooltip/Tooltip.vue b/packages/varlet-ui/src/tooltip/Tooltip.vue
@@ -20,7 +20,11 @@
           @mouseleave="handlePopoverMouseleave"
         >
           <div
-            :style="{ background: color, width: sameWidth ? toSizeUnit(Math.ceil(hostSize.width)) : undefined }"
+            :style="{
+              background: color,
+              color: textColor,
+              width: sameWidth ? toSizeUnit(Math.ceil(hostSize.width)) : undefined,
+            }"
             :class="classes(n('content-container'), n(`--${type}`))"
             role="tooltip"
           >

diff --git a/packages/varlet-ui/src/tooltip/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/tooltip/__tests__/__snapshots__/index.spec.js.snap
@@ -40,6 +40,8 @@ exports[`test tooltip placement 11`] = `"<div class="var-tooltip__tooltip var--b
 
 exports[`test tooltip placement 12`] = `"<div class="var-tooltip__tooltip var--box" style="z-index: 2000; display: none; position: absolute; left: 0px; top: 0px; margin: 0px;"><div class="var-tooltip__content-container var-tooltip--default" role="tooltip"></div></div>"`;
 
+exports[`test tooltip text-color 1`] = `"<div class="var-tooltip__tooltip var--box" style="z-index: 2000; display: none; position: absolute; left: 0px; top: 0px; margin: 0px;"><div style="color: rgb(255, 255, 255);" class="var-tooltip__content-container var-tooltip--default" role="tooltip"></div></div>"`;
+
 exports[`test tooltip type 1`] = `"<div class="var-tooltip__tooltip var--box" style="z-index: 2000; display: none; position: absolute; left: 0px; top: 0px; margin: 0px;"><div class="var-tooltip__content-container var-tooltip--default" role="tooltip"></div></div>"`;
 
 exports[`test tooltip type 2`] = `"<div class="var-tooltip__tooltip var--box" style="z-index: 2000; display: none; position: absolute; left: 0px; top: 0px; margin: 0px;"><div class="var-tooltip__content-container var-tooltip--primary" role="tooltip"></div></div>"`;

diff --git a/packages/varlet-ui/src/tooltip/__tests__/index.spec.js b/packages/varlet-ui/src/tooltip/__tests__/index.spec.js
@@ -166,6 +166,26 @@ test('test tooltip color', async () => {
   mockRestore()
 })
 
+test('test tooltip text-color', async () => {
+  const { mockRestore } = mockStubs()
+
+  const root = document.createElement('div')
+
+  const wrapper = mount(VarTooltip, {
+    props: {
+      textColor: '#fff',
+      teleport: root,
+    },
+  })
+
+  await doubleRaf()
+
+  expect(root.innerHTML).toMatchSnapshot()
+
+  wrapper.unmount()
+  mockRestore()
+})
+
 test('test tooltip offset', async () => {
   const { mockRestore } = mockStubs()
 

diff --git a/packages/varlet-ui/src/tooltip/docs/en-US.md b/packages/varlet-ui/src/tooltip/docs/en-US.md
@@ -109,7 +109,7 @@ const placementOptions = [
 
 ```html
 <template>
-  <var-tooltip content="Tooltip" color="#d81b60">
+  <var-tooltip content="Tooltip" color="#d81b60" text-color="#fff">
     <var-button type="primary">Custom Color</var-button>
   </var-tooltip>
 </template>
@@ -181,6 +181,7 @@ In the `disabled` state, the tooltip will not be opened.
 | `v-model:show` | Whether to show the tooltip                                    | _boolean_             | `false`   |
 | `content` | Display content | _string_              | `-`       |
 | `color`          | Tooltip background color                                                            | _string_  | `-`       |
+| `text-color`     | Tooltip text color                                                                  | _string_  | `-`       |
 | `type`           | Tooltip type, can be set to `default` `primary` `info` `success` `warning` `danger` | _string_  | `default` |
 | `placement` | Tooltip popup placement                                        | _Placement_          | `bottom`     |
 | `strategy`       | Tooltip position strategy, optional value is `absolute` `fixed` | _string_              | `absolute`           |

diff --git a/packages/varlet-ui/src/tooltip/docs/zh-CN.md b/packages/varlet-ui/src/tooltip/docs/zh-CN.md
@@ -110,7 +110,7 @@ const placementOptions = [
 
 ```html
 <template>
-  <var-tooltip content="Tooltip" color="#d81b60">
+  <var-tooltip content="Tooltip" color="#d81b60" text-color="#fff">
     <var-button type="primary">自定义颜色</var-button>
   </var-tooltip>
 </template>
@@ -181,6 +181,7 @@ import { Snackbar } from '@varlet/ui'
 | `v-model:show` | 是否显示 | _boolean_       | `false`   |
 | `content` | 显示的内容 | _string_    | `-`       |
 | `color` | 背景颜色 | _string_       | `-`       |
+| `text-color` | 文字颜色 | _string_       | `-`       |
 | `type`  | 类型，可选值为 `default` `primary` `info` `success` `warning` `danger` | _string_  | `default` |
 | `placement` | 弹出位置 | _Placement_    | `bottom`     |
 | `strategy`  | 定位方式，可选值为 `absolute` `fixed` | _string_    | `absolute`    |

diff --git a/packages/varlet-ui/src/tooltip/example/index.vue b/packages/varlet-ui/src/tooltip/example/index.vue
@@ -75,7 +75,7 @@ onThemeChange()
   </var-space>
 
   <app-type>{{ t('customColor') }}</app-type>
-  <var-tooltip content="Tooltip" color="#d81b60">
+  <var-tooltip content="Tooltip" color="#d81b60" text-color="#fff">
     <var-button type="primary">{{ t('customColor') }}</var-button>
   </var-tooltip>
 

diff --git a/packages/varlet-ui/src/tooltip/props.ts b/packages/varlet-ui/src/tooltip/props.ts
@@ -13,6 +13,7 @@ export const props = {
     default: 'default',
   },
   color: String,
+  textColor: String,
   content: String,
   show: Boolean,
   disabled: Boolean,

diff --git a/packages/varlet-ui/types/tooltip.d.ts b/packages/varlet-ui/types/tooltip.d.ts
@@ -20,6 +20,7 @@ export interface TooltipProps extends BasicAttributes {
   disabled?: boolean
   content?: string
   color?: string
+  textColor?: string
   type?: TooltipType
   trigger?: TooltipTrigger
   reference?: string