feat: Feature tag component icon prop support #22418
Conversation
![tests-checker[bot]](https://avatars.githubusercontent.com/in/17064?s=60&v=4){kind=small}
|
|
|
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 40a1394:
|
Codecov Report
@@ Coverage Diff @@
## feature #22418 +/- ##
===========================================
+ Coverage 98.08% 98.08% +<.01%
===========================================
Files 306 306
Lines 7061 7067 +6
Branches 1938 1898 -40
===========================================
+ Hits 6926 6932 +6
Misses 135 135
Continue to review full report at Codecov.
|
| `Warning: [antd: Tag] \`icon\` is using ReactNode instead of string naming in v4. Please check \`twitter\` at https://ant.design/components/icon`, | ||
| ); | ||
| warnSpy.mockRestore(); | ||
| }); |
components/tag/style/index.less
Outdated
| // To ensure that a space will be placed between character and `Icon`. | ||
| > .@{iconfont-css-prefix} + span, | ||
| > span + .@{iconfont-css-prefix} { | ||
| margin-left: 8px; |
There was a problem hiding this comment.
| margin-left: 8px; | |
| margin-left: 7px; |
same as Tag padding.
|
rebase master |
yoyo837
changed the title
|
@afc163 Addressed requested changes. There are no changes to be applied by rebasing, as I can see tho |
| </> | ||
| ) : ( | ||
| children | ||
| ); |
There was a problem hiding this comment.
Sorry, not sure what u mean
There was a problem hiding this comment.
We don't need this warning either, cause antd v3 never supported Tag[icon].
There was a problem hiding this comment.
Oh, that what you meant :) Fixed. Thought you somehow related to the rebase thing
components/tag/index.zh-CN.md
Outdated
| @@ -23,6 +23,7 @@ title: Tag | |||
| | color | 标签色 | string | - | | |||
| | onClose | 关闭时的回调 | (e) => void | - | | |||
| | visible | 是否显示标签 | boolean | `true` | | |||
| | icon | 设置图标类型 | ReactNode | - | | | |||
There was a problem hiding this comment.
| | icon | 设置图标类型 | ReactNode | - | | | |
| | icon | 设置图标 | ReactNode | - | | |
components/tag/index.tsx
Outdated
| !(typeof icon === 'string' && icon.length > 2), | ||
| 'Tag', | ||
| `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, | ||
| ); |
|
Oh, feature branch please~ |
|
@afc163 done |
|
Rebase feature |
|
@afc163 done |
|
Oops, mixed other commits don't blong to your PR. |
|
I was planning just to |
vtsybulin
force-pushed
the
feature-tag-component-icon-prop-support
branch
from
b618ed6 to
40a1394
Compare
|
@afc163 can you help with that please, so I don't fuck up again 🤔😄 |
|
@afc163 cool, thanks 💪 |
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
Hi. This one aims to update the Tag component to support the 'icon' prop in alignment with what the Button component currently offers.
Final demo:
Usage example:
import { Tag } from 'antd';import { TwitterOutlined } from '@ant-design/icons';...<Tag icon={<TwitterOutlined />}>Twitter Tag</Tag>📝 Changelog
☑️ Self Check before Merge
View rendered components/tag/demo/icon.md
View rendered components/tag/index.en-US.md
View rendered components/tag/index.zh-CN.md