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: improve prop def for tooltip #18515

Merged
merged 1 commit into from Aug 29, 2019

Conversation

@laysent
Copy link
Contributor

commented Aug 28, 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

(none)

💡 Background and solution

Tooltip component does not require to pass either title or overlay. However, when not passing the any of them, the component itself does not work (not rendering tooltip).

The solution is to improve the type definition, so that at least one of title and overlay is provided.

Please notice that React.ReactNode includes falsy values such as undefined, null and false, thus following works:

<Tooltip title={undefined} />

However, following should consider type error and TypeScript should warn about it:

<Tooltip />

📝 Changelog

Language Changelog
🇺🇸 English fix: ensure title or overlay is required in Tooltip props definition
🇨🇳 Chinese fix: 确保 Tooltip props 定义中,titleoverlay 至少有一个是必填的

☑️ 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

@pr-triage pr-triage bot added the PR: unreviewed label Aug 28, 2019

@netlify

This comment has been minimized.

Copy link

commented Aug 28, 2019

Deploy preview for ant-design ready!

Built with commit cd788ed

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

@laysent laysent force-pushed the laysent:master branch from 80c6868 to cd788ed Aug 28, 2019

@codecov

This comment has been minimized.

Copy link

commented Aug 28, 2019

Codecov Report

Merging #18515 into master will increase coverage by 0.03%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #18515      +/-   ##
==========================================
+ Coverage   96.73%   96.77%   +0.03%     
==========================================
  Files         280      280              
  Lines        7532     7532              
  Branches     2098     2084      -14     
==========================================
+ Hits         7286     7289       +3     
+ Misses        244      241       -3     
  Partials        2        2
Impacted Files Coverage Δ
components/tooltip/index.tsx 96.62% <ø> (ø) ⬆️
components/menu/MenuItem.tsx 94.44% <100%> (ø) ⬆️
components/_util/wave.tsx 88.46% <0%> (+2.88%) ⬆️

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 5b5b828...cd788ed. Read the comment docs.

@buildsize

This comment has been minimized.

Copy link

commented Aug 28, 2019

File name Previous Size New Size Change
package-lock.json 832.42 KB 833.35 KB 949 bytes (0%)
@afc163

This comment has been minimized.

Copy link
Member

commented Aug 28, 2019

The optional title prop could be useful, image this situation: You have a tooltip need to display depends on another state, with optional title we don't need to change JSX structure.

Instead of duplicating the trigger node:

return this.state.showTooltip ? (
  <Tooltip tooltip="tooltip">
    <span>trigger</span>
  </Tooltip>
) : <span>trigger</span>;

We can write in a simpler way:

return (
  <Tooltip tooltip={this.state.showTooltip ? 'tooltip' : undefined}>
    <span>trigger</span>
  </Tooltip>
);
@laysent

This comment has been minimized.

Copy link
Contributor Author

commented Aug 28, 2019

The optional title prop could be useful, image this situation: You have a tooltip need to display depends on another state, with optional title we don't need to change JSX structure.

Instead of duplicating the trigger node:

return this.state.showTooltip ? (
  <Tooltip tooltip="tooltip">
    <span>trigger</span>
  </Tooltip>
) : <span>trigger</span>;

We can write in a simpler way:

return (
  <Tooltip tooltip={this.state.showTooltip ? 'tooltip' : undefined}>
    <span>trigger</span>
  </Tooltip>
);

Hi, I believe this is a real-world case, and the modified version can support it, because title is having type React.ReactNode. According to the definition, React.ReactNode is defined as ReactChild | ReactFragment | ReactPortal | boolean | null | undefined.

Thus, the above example is allowed in new version, as title can be either string or undefined.

This modified version is only to prevent the case where user forget to set title at all (including not setting it as undefined), i.e. <Tooltip /> is not allowed.

@afc163

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

Tested in my machine, it works like a charm!

image

@afc163 afc163 merged commit b029e38 into ant-design:master Aug 29, 2019

26 of 28 checks passed

Header rules - ant-design No header rules processed
Details
Pages changed - ant-design 214 new files uploaded
Details
LGTM analysis: JavaScript No new or fixed alerts
Details
Mixed content - ant-design No mixed content detected
Details
Redirect rules - ant-design 18 redirect rules processed
Details
Semantic Pull Request ready to be squashed
Details
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
buildsize Significant change of package-lock.json up by 949 bytes (0.11%)
Details
ci/circleci: check_metadata Your tests passed on CircleCI!
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codecov/patch 100% of diff hit (target 96.73%)
Details
codecov/project 96.77% (+0.03%) compared to 5b5b828
Details
netlify/ant-design/deploy-preview Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

@pr-triage pr-triage bot added PR: merged and removed PR: unreviewed labels Aug 29, 2019

@chenshuai2144 chenshuai2144 referenced this pull request Sep 2, 2019
5 of 14 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.