Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tooltip): Tooltip support colour background #23155

Merged
merged 4 commits into from May 25, 2020

Conversation

AshoneA
Copy link
Contributor

@AshoneA AshoneA commented Apr 12, 2020

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

Closes #23127

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Tooltip support color props to config background.
🇨🇳 Chinese 文字提示支持配置背景颜色。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

View rendered components/tooltip/demo/colorful.md
View rendered components/tooltip/index.en-US.md
View rendered components/tooltip/index.zh-CN.md

@AshoneA
Copy link
Contributor Author

@AshoneA AshoneA commented Apr 12, 2020

@afc163 需要支持自定义的颜色吗?这样的话可能得改动 rc-tooltip 或者运行时动态生成 css 文件了。

@AshoneA AshoneA requested a review from afc163 Apr 12, 2020
@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Apr 12, 2020

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Apr 12, 2020

自定义颜色参考 Tag 组件。

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Apr 12, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9f5853d00d0ee9bf7f0aa61189dc1c13f17b5165:

Sandbox Source
antd reproduction template Configuration

@afc163
Copy link
Member

@afc163 afc163 commented Apr 12, 2020

feature branch

@zombieJ
Copy link
Member

@zombieJ zombieJ commented May 14, 2020

Conflict

@AshoneA
Copy link
Contributor Author

@AshoneA AshoneA commented May 14, 2020

Conflict

react-component/tooltip#213

这个还没合呢

@zombieJ
Copy link
Member

@zombieJ zombieJ commented May 21, 2020

+ rc-tooltip@4.2.0

@zombieJ
Copy link
Member

@zombieJ zombieJ commented May 21, 2020

需要改成 feature branch

@AshoneA AshoneA changed the base branch from master to feature May 22, 2020
@AshoneA AshoneA removed the Inactive label May 22, 2020
@AshoneA
Copy link
Contributor Author

@AshoneA AshoneA commented May 25, 2020

/rebase

@afc163
Copy link
Member

@afc163 afc163 commented May 25, 2020

为啥 dist 老是挂,rebase 一下 feature 试试。

@AshoneA
Copy link
Contributor Author

@AshoneA AshoneA commented May 25, 2020

为啥 dist 老是挂,rebase 一下 feature 试试。

已经是 rebase 过 feature 了的。

const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];

ReactDOM.render(
<div>
Copy link
Member

@afc163 afc163 May 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div>
<>


ReactDOM.render(
<div>
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
Copy link
Member

@afc163 afc163 May 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用 Divider

@@ -34,15 +34,15 @@ const colors = [

ReactDOM.render(
<div>
Copy link
Member

@afc163 afc163 May 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div>
<>

<div>
<h4 style={{ marginBottom: 16 }}>Presets:</h4>
<>
<Divider orientation="left">Presets</Divider>
Copy link
Member

@afc163 afc163 May 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

snapshot 要更新掉。

afc163
afc163 approved these changes May 25, 2020
@afc163 afc163 merged commit cb20942 into ant-design:feature May 25, 2020
18 of 22 checks passed
@@ -28,6 +28,7 @@ title: Tooltip
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` | |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | |
| defaultVisible | 默认是否显隐 | boolean | false | |
| color | 背景颜色 | string | - |
Copy link
Member

@xrkffgg xrkffgg May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

版本号 木有加呀

Copy link
Contributor Author

@AshoneA AshoneA May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯...我加下

Copy link
Member

@hengkx hengkx May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

backgroundColor 会不会好点

Copy link
Contributor Author

@AshoneA AshoneA May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

跟 Tag 保持一致就用 color 吧!

Copy link
Member

@xrkffgg xrkffgg May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

尴尬不

Copy link
Member

@xrkffgg xrkffgg May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

要不加个判断,如果是纯白,就把字体变黑。

Copy link
Member

@xrkffgg xrkffgg May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😂😂😂 你提醒我了,看了下 tag 的效果。鼠标选择才能看到

image

@xrkffgg
Copy link
Member

@xrkffgg xrkffgg commented May 26, 2020

我搜了一下,网上有很多,根据颜色判断是深色还是浅色的,要不要加个这样的判断设置下 color

@AshoneA
Copy link
Contributor Author

@AshoneA AshoneA commented May 26, 2020

我搜了一下,网上有很多,根据颜色判断是深色还是浅色的,要不要加个这样的判断设置下 color

感觉有点麻烦,白色的话表达有 white #fff #ffffff 还有 rgba、hsl 等等表达... 黑色同理,需要考虑的情况感觉有点多

@zombieJ zombieJ mentioned this pull request May 31, 2020
13 tasks
@b1ngx
Copy link

@b1ngx b1ngx commented Jun 1, 2020

字体颜色也需要能配置吧

@xrkffgg
Copy link
Member

@xrkffgg xrkffgg commented Jun 1, 2020

字体颜色也需要能配置吧

字体颜色其实可以先通过 css 变

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants