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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Feature tag component icon prop support #22418

Merged

Conversation

vtsybulin
Copy link
Contributor

@vtsybulin vtsybulin commented Mar 19, 2020

馃 This is a ...

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

馃敆 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:
72070175-8a7a4f00-32f1-11ea-82e7-eb1382610f9b

Usage example:

import { Tag } from 'antd';
import { TwitterOutlined } from '@ant-design/icons';
...
<Tag icon={<TwitterOutlined />}>Twitter Tag</Tag>

馃摑 Changelog

Language Changelog
馃嚭馃嚫 English
馃嚚馃嚦 Chinese

鈽戯笍 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/icon.md
View rendered components/tag/index.en-US.md
View rendered components/tag/index.zh-CN.md

Copy link

@tests-checker tests-checker bot left a comment

Could you please add tests to make sure this change works as expected?

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Mar 19, 2020

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Mar 19, 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 40a1394:

Sandbox Source
antd reproduction template Configuration

@codecov
Copy link

@codecov codecov bot commented Mar 19, 2020

Codecov Report

Merging #22418 into feature will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@             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
Impacted Files Coverage 螖
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 53e9ca2...40a1394. Read the comment docs.

`Warning: [antd: Tag] \`icon\` is using ReactNode instead of string naming in v4. Please check \`twitter\` at https://ant.design/components/icon`,
);
warnSpy.mockRestore();
});
Copy link
Member

@afc163 afc163 Mar 20, 2020

Choose a reason for hiding this comment

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

Don't need this now.

// To ensure that a space will be placed between character and `Icon`.
> .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} {
margin-left: 8px;
Copy link
Member

@afc163 afc163 Mar 20, 2020

Choose a reason for hiding this comment

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

Suggested change
margin-left: 8px;
margin-left: 7px;

same as Tag padding.

@afc163
Copy link
Member

@afc163 afc163 commented Mar 20, 2020

rebase master

@yoyo837 yoyo837 changed the title Feature tag component icon prop support feat: Feature tag component icon prop support Mar 20, 2020
@vtsybulin
Copy link
Contributor Author

@vtsybulin vtsybulin commented Mar 20, 2020

@afc163 Addressed requested changes. There are no changes to be applied by rebasing, as I can see tho

</>
) : (
children
);
Copy link
Member

@afc163 afc163 Mar 20, 2020

Choose a reason for hiding this comment

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

So is this.

Copy link
Contributor Author

@vtsybulin vtsybulin Mar 20, 2020

Choose a reason for hiding this comment

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

Sorry, not sure what u mean

Copy link
Contributor Author

@vtsybulin vtsybulin Mar 20, 2020

Choose a reason for hiding this comment

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

@afc163 馃敐

Copy link
Member

@afc163 afc163 Mar 20, 2020

Choose a reason for hiding this comment

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

We don't need this warning either, cause antd v3 never supported Tag[icon].

Copy link
Contributor Author

@vtsybulin vtsybulin Mar 20, 2020

Choose a reason for hiding this comment

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

Oh, that what you meant :) Fixed. Thought you somehow related to the rebase thing

@@ -23,6 +23,7 @@ title: Tag
| color | 鏍囩鑹 | string | - |
| onClose | 鍏抽棴鏃剁殑鍥炶皟 | (e) => void | - |
| visible | 鏄惁鏄剧ず鏍囩 | boolean | `true` |
| icon | 璁剧疆鍥炬爣绫诲瀷 | ReactNode | - | |
Copy link
Member

@afc163 afc163 Mar 20, 2020

Choose a reason for hiding this comment

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

Suggested change
| icon | 璁剧疆鍥炬爣绫诲瀷 | ReactNode | - | |
| icon | 璁剧疆鍥炬爣 | ReactNode | - | |

!(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`,
);
Copy link
Member

@afc163 afc163 Mar 20, 2020

Choose a reason for hiding this comment

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

Sorry for reply in wrong line.

@afc163
Copy link
Member

@afc163 afc163 commented Mar 20, 2020

Oh, feature branch please~

@vtsybulin vtsybulin changed the base branch from master to feature Mar 20, 2020
@vtsybulin
Copy link
Contributor Author

@vtsybulin vtsybulin commented Mar 20, 2020

@afc163 done

@afc163
Copy link
Member

@afc163 afc163 commented Mar 20, 2020

Rebase feature

@vtsybulin
Copy link
Contributor Author

@vtsybulin vtsybulin commented Mar 20, 2020

@afc163 done

@afc163
Copy link
Member

@afc163 afc163 commented Mar 20, 2020

Oops, mixed other commits don't blong to your PR.

@vtsybulin
Copy link
Contributor Author

@vtsybulin vtsybulin commented Mar 20, 2020

I was planning just to git rebase feature 馃 馃槙

@vtsybulin vtsybulin force-pushed the feature-tag-component-icon-prop-support branch from b618ed6 to 40a1394 Compare Mar 20, 2020
@vtsybulin
Copy link
Contributor Author

@vtsybulin vtsybulin commented Mar 20, 2020

@afc163 can you help with that please, so I don't fuck up again 馃馃槃

afc163
afc163 approved these changes Mar 21, 2020
@afc163 afc163 merged commit c430eab into ant-design:feature Mar 21, 2020
16 of 19 checks passed
@vtsybulin
Copy link
Contributor Author

@vtsybulin vtsybulin commented Mar 21, 2020

@afc163 cool, thanks 馃挭

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.

None yet

3 participants