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: Preset status color into Tag #19399

Merged
merged 5 commits into from
Oct 25, 2019

Conversation

QingLance
Copy link
Contributor

@QingLance QingLance commented Oct 24, 2019

🤔 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

💡 Background and solution

Sometimes tag component can be used to indicate status. The existing tag cannot be set by color property to achieve the design below. so preset status color to enhance tag component. We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.

image

📝 Changelog

Language Changelog
🇺🇸 English preset status color into Tag
🇨🇳 Chinese Tag组件预设状态颜色

☑️ Self Check before Merge

  • 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/tag/demo/status.md
View rendered components/tag/index.zh-CN.md

@netlify
Copy link

netlify bot commented Oct 24, 2019

Deploy preview for ant-design ready!

Built with commit 32daaa6

https://deploy-preview-19399--ant-design.netlify.com

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 24, 2019

status 这个名字感觉 Owner 不一定同意. 🤔

@zombieJ
Copy link
Member

zombieJ commented Oct 24, 2019

加一下设计稿,另外目前看没看出来这个 status 和 color 的区别。

@yoyo837
Copy link
Contributor

yoyo837 commented Oct 24, 2019

相当于预设的color

@QingLance
Copy link
Contributor Author

相当于预设的color

是的,其实是status到color的映射。

@QingLance
Copy link
Contributor Author

加一下设计稿,另外目前看没看出来这个 status 和 color 的区别。

其实本质是没区别,你用color属性也能做到同样的效果,但用status属性是预置了颜色的,特指用于表示状态的场景。类似badge的status。

@zombieJ
Copy link
Member

zombieJ commented Oct 25, 2019

感觉 colorstatus 还是有点同质化,是不是应该合一起?

---
order: 7
title:
zh-CN: 状态Tag
Copy link
Member

Choose a reason for hiding this comment

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

预设状态的标签

Copy link
Contributor Author

Choose a reason for hiding this comment

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

OK

@QingLance
Copy link
Contributor Author

感觉 colorstatus 还是有点同质化,是不是应该合一起?

这里经过线下讨论,不加status属性,通过预置color=warning|success|...来预置状态对应的颜色可能更加合适,感谢提供的思路。

@zombieJ
Copy link
Member

zombieJ commented Oct 25, 2019

Use npm test -- -u to update snapshot if confirmed test ood.

@QingLance QingLance changed the title feat: Tag add status props feat: Preset status color into Tag Oct 25, 2019
components/_util/colors.ts Outdated Show resolved Hide resolved
@codecov
Copy link

codecov bot commented Oct 25, 2019

Codecov Report

Merging #19399 into 4.0-prepare will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@               Coverage Diff               @@
##           4.0-prepare   #19399      +/-   ##
===============================================
+ Coverage        97.75%   97.75%   +<.01%     
===============================================
  Files              284      284              
  Lines             7393     7395       +2     
  Branches          2060     2015      -45     
===============================================
+ Hits              7227     7229       +2     
  Misses             166      166
Impacted Files Coverage Δ
components/_util/colors.ts 100% <100%> (ø) ⬆️
components/tag/index.tsx 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a533159...32daaa6. Read the comment docs.

@@ -1,5 +1,7 @@
import { tuple } from './type';

// 预设的状态颜色类型
Copy link
Member

Choose a reason for hiding this comment

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

English comment pls

Copy link
Contributor Author

Choose a reason for hiding this comment

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

English comment pls
fixed

@QingLance QingLance requested a review from afc163 October 25, 2019 10:56
@zombieJ zombieJ merged commit 3ddc3a2 into ant-design:4.0-prepare Oct 25, 2019
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.

4 participants