feat: add custom tooltip component to contributors bar chart #501
Conversation
✅ Deploy Preview for design-insights ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
✅ Deploy Preview for oss-insights ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Keeping this as a draft till the z-index drama is solved... |
There was a problem hiding this comment.
Keeping this as a draft till the z-index drama is solved...
That’s happening because the second card is “above” the first card. So anything inside the first card will be behind the second card.
What you can do is:
- Add a base
z-indexand a positionrelativeto all contributor cards - Then add a higher
z-indexwhen the contributor card is hovered. That will make sure the hovered card stays “above” all other cards. - Finally, add a
z-indexto the tooltip, to make sure it is above all elements inside the card itself.
Let me know if it helps.
|
Actually, as @0-vortex mentioned on Slack, the fix I just told you is a "hack". It works, but it's not ideal. It's best to use a Tooltip library and style it as needed. Here's one of the best: Other tooltips: |
Radix Ui now leveraged for the tooltip 🍕🍕 |
…53-languages-in-contributors-expands
There was a problem hiding this comment.
LGTM! 👍
Great job implementing this library in such a short time frame, there are some minor tweaks we can do like delay duration or giving a different position based on element index (left->right, center->center, right->left for example) etc, however that will come with time and us actually having variable tooltips.
For now I think this is ready to go on beta! 🍕 🍕 🍕
components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
Outdated
Show resolved
Hide resolved
components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
Outdated
Show resolved
Hide resolved
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Compliance Checks
Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.
Watched Files
This pull request modifies specific files that require careful review by the maintainers.
Files Matched
- npm-shrinkwrap.json
- package.json
components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
Outdated
Show resolved
Hide resolved
…r-chart.tsx Co-authored-by: Eryc <101464991+pixelsbyeryc@users.noreply.github.com>
## [1.12.0-beta.2](v1.12.0-beta.1...v1.12.0-beta.2) (2022-10-10) ### 🍕 Features * add custom tooltip component to contributors bar chart ([#501](#501)) ([855d66b](855d66b))
|
🎉 This PR is included in version 1.12.0-beta.2 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
|
Way to go, Sunday! 🚀 btw, I love this "co-author" feature 😛 |
## [1.12.0](v1.11.0...v1.12.0) (2022-10-11) ### 🐛 Bug Fixes * update pagination counts for repositories and contributors ([#503](#503)) ([1332fab](1332fab)) ### 🍕 Features * add `PullRequestPieChart` component ([#514](#514)) ([9132a93](9132a93)) * add custom tooltip component to contributors bar chart ([#501](#501)) ([855d66b](855d66b))
|
🎉 This PR is included in version 1.12.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
* origin/main: (114 commits) chore(minor): release 1.14.0 [skip ci] chore(patch): release 1.14.0-beta.3 on beta channel [skip ci] fix: add root href to header logo component image (#537) fix: correct card horizontal tooltip error on storybook (#536) chore(patch): release 1.14.0-beta.2 on beta channel [skip ci] fix: humanize numbers and use absolute values in highlight cards (#535) chore(minor): release 1.14.0-beta.1 on beta channel [skip ci] feat: allow for displaying insights based on custom topics (#528) fix: show pr velocity in relative days (#534) chore(minor): release 1.13.0 [skip ci] chore(minor): release 1.13.0-beta.1 on beta channel [skip ci] feat: re-enable toggling of bots on scatterchart (#530) chore(patch): release 1.12.0-beta.4 on beta channel [skip ci] fix: remove duplicate contributors from the scatter chart (#529) chore(minor): release 1.12.0-beta.3 on beta channel [skip ci] feat: implement InsightPageCard component (#519) chore(minor): release 1.12.0 [skip ci] chore(minor): release 1.12.0-beta.2 on beta channel [skip ci] feat: add custom tooltip component to contributors bar chart (#501) chore(minor): release 1.12.0-beta.1 on beta channel [skip ci] ...
## [1.12.0-beta.2](open-sauced/app@v1.12.0-beta.1...v1.12.0-beta.2) (2022-10-10) ### 🍕 Features * add custom tooltip component to contributors bar chart ([#501](open-sauced/app#501)) ([855d66b](open-sauced/app@855d66b))
## [1.12.0](open-sauced/app@v1.11.0...v1.12.0) (2022-10-11) ### 🐛 Bug Fixes * update pagination counts for repositories and contributors ([#503](open-sauced/app#503)) ([1332fab](open-sauced/app@1332fab)) ### 🍕 Features * add `PullRequestPieChart` component ([#514](open-sauced/app#514)) ([9132a93](open-sauced/app@9132a93)) * add custom tooltip component to contributors bar chart ([#501](open-sauced/app#501)) ([855d66b](open-sauced/app@855d66b))
What type of PR is this? (check all applicable)
Description
This PR creates a custom
Tooltipcomponent in the atoms directory... 80% completed but opening this PR to seek help with some CSS troubles 😂Details:
The idea was to create a dynamic tooltip component that can be used across all components...so radix was leveraged to create the tooltip component
had to set some props to make it completely dynamic:
the tooltip messagethe direction to displaye.g: left, right, top, bottom...Related Tickets & Documents
Fixes #453
Mobile & Desktop Screenshots/Recordings
Added tests?
Added to documentation?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?