feat(annotation): position custom rect_annotation tooltip by elastic-charts styles #247
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BREAKING CHANGE: this changes the type signature of `RectAnnotation.renderTooltip?` from `(position, details) => JSX.Element` to `(details) => JSX.Element`. This allows the user to pass in a custom element without having to do the heavy lifting of writing the container positioning styles themselves.
emmacunningham
changed the title
Codecov Report
@@ Coverage Diff @@
## master #247 +/- ##
=======================================
Coverage 97.76% 97.76%
=======================================
Files 36 36
Lines 2641 2641
Branches 593 593
=======================================
Hits 2582 2582
Misses 52 52
Partials 7 7
Continue to review full report at Codecov.
|
nickofthyme
approved these changes
Jun 20, 2019
markov00
pushed a commit
that referenced
this pull request
Jun 24, 2019
# [7.0.0](v6.3.0...v7.0.0) (2019-06-24) ### Features * **annotation:** simplify custom tooltip function ([#247](#247)) ([982bc63](982bc63)) ### BREAKING CHANGES * **annotation:** this changes the type signature of `RectAnnotation.renderTooltip?` from `(position, details) => JSX.Element` to `(details) => JSX.Element`. This allows the user to pass in a custom element without having to do the heavy lifting of writing the container positioning styles themselves.
|
🎉 This PR is included in version 7.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
AMoo-Miki
pushed a commit
to AMoo-Miki/OpenSearch-Dashboards
that referenced
this pull request
Feb 10, 2022
# [7.0.0](elastic/elastic-charts@v6.3.0...v7.0.0) (2019-06-24) ### Features * **annotation:** simplify custom tooltip function ([opensearch-project#247](elastic/elastic-charts#247)) ([b191628](elastic/elastic-charts@b191628)) ### BREAKING CHANGES * **annotation:** this changes the type signature of `RectAnnotation.renderTooltip?` from `(position, details) => JSX.Element` to `(details) => JSX.Element`. This allows the user to pass in a custom element without having to do the heavy lifting of writing the container positioning styles themselves.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
BREAKING CHANGE: this changes the type signature of
RectAnnotation.renderTooltip?from(position, details) => JSX.Elementto(details) => JSX.Element. This allows the user to pass in a custom element without having to do the heavy lifting of writing the container positioning styles themselves.Summary
Previously, the
renderTooltip?property of aRectAnnotationSpecwas used in such a way that if defined, the returned component would be used instead of the default tooltip component to render the tooltip details. However, it was implemented in a way that required the user to also use the position information and write their own styles to position the tooltip correctly. This lends to a not great developer user experience when the user just wants to pass a custom component (as in the Storybook case where we just need to include an icon) because then the developer needs to write their own CSS styles to handle the position of the tooltip container itself.Instead, now we embed the custom component within the tooltip container so that the user does not need to worry about positioning. This also helps with making it so that the user still has customization capabilities while remaining some consistence with respect to the rest of the elastic-chart internal style.
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.- [ ] Any consumer-facing exports were added tosrc/index.ts(and stories only import from../srcexcept for test data & storybook)