Skip to content

feat(tooltip): improve tooltip behavior and fix some issues #2209

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

Merged
merged 2 commits into from
Jan 26, 2023

Conversation

matthprost
Copy link
Collaborator

@matthprost matthprost commented Jan 19, 2023

Summary

Type

  • Enhancement

Summarise concisely:

What is expected?

There was multiple issues with tooltip I fixed them and improved the opening / closing behavior:

The following changes where made:

Screen.Recording.2023-01-19.at.16.08.04.mov

@matthprost matthprost added bug Something isn't working enhancement New feature or request labels Jan 19, 2023
@matthprost matthprost requested review from QuiiBz and a team January 19, 2023 15:15
@matthprost matthprost self-assigned this Jan 19, 2023
@matthprost matthprost requested review from ModuloM and removed request for a team January 19, 2023 15:15
@matthprost matthprost force-pushed the feat/tooltip-improvements branch from 2bdb459 to 7ef7be2 Compare January 19, 2023 15:16
@github-actions
Copy link
Contributor

github-actions bot commented Jan 19, 2023

size-limit report 📦

Path Size
packages/form/dist/index.js, packages/form/dist/helpers/pickValidators.js, packages/form/dist/hooks/useFormField.js, packages/form/dist/hooks/useOnFieldChange.js, packages/form/dist/hooks/useValidation.js, packages/form/dist/validators/index.js, packages/form/dist/validators/max.js, packages/form/dist/validators/maxDate.js, packages/form/dist/validators/maxLength.js, packages/form/dist/validators/min.js, packages/form/dist/validators/minDate.js, packages/form/dist/validators/minLength.js, packages/form/dist/validators/regex.js, packages/form/dist/validators/required.js, packages/ui/dist/src/index.js, packages/form/dist/components/CheckboxField/index.js, packages/form/dist/components/DateField/index.js, packages/form/dist/components/Form/index.js, packages/form/dist/components/RadioField/index.js, packages/form/dist/components/SelectInputField/index.js, packages/form/dist/components/SelectNumberField/index.js, packages/form/dist/components/SelectableCardField/index.js, packages/form/dist/components/Submit/index.js, packages/form/dist/components/SubmitErrorAlert/index.js, packages/form/dist/components/TagInputField/index.js, packages/form/dist/components/TextInputField/index.js, packages/form/dist/components/TimeField/index.js, packages/form/dist/components/ToggleField/index.js, packages/form/dist/providers/ErrorContext/index.js, packages/ui/dist/react-datepicker/dist/react-datepicker.min.css.js, packages/ui/dist/react-toastify/dist/ReactToastify.min.css.js, packages/ui/dist/src/helpers/isJSON.js, packages/ui/dist/src/helpers/legend.js, packages/ui/dist/src/helpers/numbers.js, packages/ui/dist/src/helpers/recursivelyGetChildrenString.js, packages/ui/dist/src/theme/index.js, packages/ui/dist/src/utils/animations.js, packages/ui/dist/src/utils/capitalize.js, packages/ui/dist/src/utils/ids.js, packages/ui/dist/src/utils/normalize.js, packages/ui/dist/src/utils/orderBy.js, packages/ui/dist/src/components/ActionBar/index.js, packages/ui/dist/src/components/Alert/index.js, packages/ui/dist/src/components/Avatar/index.js, packages/ui/dist/src/components/Badge/index.js, packages/ui/dist/src/components/BarChart/Tooltip.js, packages/ui/dist/src/components/BarChart/index.js, packages/ui/dist/src/components/BarStack/index.js, packages/ui/dist/src/components/BorderedBox/index.js, packages/ui/dist/src/components/Breadcrumbs/index.js, packages/ui/dist/src/components/Bullet/index.js, packages/ui/dist/src/components/Button/index.js, packages/ui/dist/src/components/Carousel/index.js, packages/ui/dist/src/components/Checkbox/index.js, packages/ui/dist/src/components/Container/index.js, packages/ui/dist/src/components/CopyButton/index.js, packages/ui/dist/src/components/DateInput/index.js, packages/ui/dist/src/components/Description/index.js, packages/ui/dist/src/components/DotSteps/index.js, packages/ui/dist/src/components/Grid/Col.js, packages/ui/dist/src/components/Grid/Grid.js, packages/ui/dist/src/components/Grid/Row.js, packages/ui/dist/src/components/Expandable/index.js, packages/ui/dist/src/components/Icon/index.js, packages/ui/dist/src/components/Image/index.js, packages/ui/dist/src/components/Label/index.js, packages/ui/dist/src/components/Link/index.js, packages/ui/dist/src/components/LineChart/CustomLegend.js, packages/ui/dist/src/components/LineChart/Tooltip.js, packages/ui/dist/src/components/LineChart/helpers.js, packages/ui/dist/src/components/LineChart/index.js, packages/ui/dist/src/components/List/Cell.js, packages/ui/dist/src/components/List/LoadingSkeleton.js, packages/ui/dist/src/components/List/SelectBar.js, packages/ui/dist/src/components/List/SortIcon.js, packages/ui/dist/src/components/List/context.js, packages/ui/dist/src/components/List/index.js, packages/ui/dist/src/components/ListV2/ListBody.js, packages/ui/dist/src/components/ListV2/ListCell.js, packages/ui/dist/src/components/ListV2/ListContext.js, packages/ui/dist/src/components/ListV2/ListExpandable.js, packages/ui/dist/src/components/ListV2/ListHeader.js, packages/ui/dist/src/components/ListV2/ListHeaderRow.js, packages/ui/dist/src/components/ListV2/ListHeaders.js, packages/ui/dist/src/components/ListV2/ListLoadingSkeleton.js, packages/ui/dist/src/components/ListV2/ListRow.js, packages/ui/dist/src/components/ListV2/index.js, packages/ui/dist/src/components/Loader/index.js, packages/ui/dist/src/components/Markdown/index.js, packages/ui/dist/src/components/Menu/Item.js, packages/ui/dist/src/components/Menu/index.js, packages/ui/dist/src/components/Modal/index.js, packages/ui/dist/src/components/Notice/index.js, packages/ui/dist/src/components/Pagination/getPageNumbers.js, packages/ui/dist/src/components/Pagination/index.js, packages/ui/dist/src/components/Pagination/usePagination.js, packages/ui/dist/src/components/PaginationV2/getPageNumbers.js, packages/ui/dist/src/components/PaginationV2/index.js, packages/ui/dist/src/components/PasswordCheck/index.js, packages/ui/dist/src/components/PasswordStrengthMeter/index.js, packages/ui/dist/src/components/ProgressBar/index.js, packages/ui/dist/src/components/PieChart/Legends.js, packages/ui/dist/src/components/PieChart/Tooltip.js, packages/ui/dist/src/components/PieChart/index.js, packages/ui/dist/src/components/PieChart/patterns.js, packages/ui/dist/src/components/ProgressionButton/index.js, packages/ui/dist/src/components/Radio/index.js, packages/ui/dist/src/components/ScrollView/index.js, packages/ui/dist/src/components/SelectInput/index.js, packages/ui/dist/src/components/SelectNumber/index.js, packages/ui/dist/src/components/SelectableCard/index.js, packages/ui/dist/src/components/Separator/index.js, packages/ui/dist/src/components/Skeleton/Block.js, packages/ui/dist/src/components/Skeleton/Blocks.js, packages/ui/dist/src/components/Skeleton/BoxWithIcon.js, packages/ui/dist/src/components/Skeleton/Donut.js, packages/ui/dist/src/components/Skeleton/IconSkeleton.js, packages/ui/dist/src/components/Skeleton/Line.js, packages/ui/dist/src/components/Skeleton/List.js, packages/ui/dist/src/components/Skeleton/Slider.js, packages/ui/dist/src/components/Skeleton/index.js, packages/ui/dist/src/components/Snippet/index.js, packages/ui/dist/src/components/Sphere/index.js, packages/ui/dist/src/components/Stack/index.js, packages/ui/dist/src/components/StateBar/index.js, packages/ui/dist/src/components/StepList/index.js, packages/ui/dist/src/components/Status/index.js, packages/ui/dist/src/components/Stepper/index.js, packages/ui/dist/src/components/SwitchButton/FocusOverlay.js, packages/ui/dist/src/components/SwitchButton/index.js, packages/ui/dist/src/components/Table/index.js, packages/ui/dist/src/components/Tabs/Tab.js, packages/ui/dist/src/components/Tabs/TabMenu.js, packages/ui/dist/src/components/Tabs/TabMenuItem.js, packages/ui/dist/src/components/Tabs/TabsContext.js, packages/ui/dist/src/components/Tabs/index.js, packages/ui/dist/src/components/Tag/index.js, packages/ui/dist/src/components/TagInput/index.js, packages/ui/dist/src/components/TagsPoplist/index.js, packages/ui/dist/src/components/Text/index.js, packages/ui/dist/src/components/TextInput/index.js, packages/ui/dist/src/components/TimeInput/index.js, packages/ui/dist/src/components/Toaster/index.js, packages/ui/dist/src/components/Toggle/index.js, packages/ui/dist/src/components/Tooltip/helpers.js, packages/ui/dist/src/components/Tooltip/index.js, packages/ui/dist/src/components/UnitInput/index.js, packages/ui/dist/src/components/VerificationCode/index.js, packages/ui/dist/src/theme/tokens/dark.js, packages/ui/dist/src/theme/tokens/light.js, packages/ui/dist/src/utils/responsive/Breakpoint.js, packages/ui/dist/src/utils/responsive/utilities.js, packages/ui/dist/src/components/List/variants/index.js, packages/ui/dist/src/components/List/variants/variantExplorer.js, packages/ui/dist/src/components/List/variants/variantProduct.js, packages/ui/dist/src/components/List/variants/variantTable.js 0 B (-100% 🔽)
packages/form/dist/index.js, packages/form/dist/helpers/pickValidators.js, packages/form/dist/hooks/useFormField.js, packages/form/dist/hooks/useOnFieldChange.js, packages/form/dist/hooks/useValidation.js, packages/form/dist/validators/index.js, packages/form/dist/validators/max.js, packages/form/dist/validators/maxDate.js, packages/form/dist/validators/maxLength.js, packages/form/dist/validators/min.js, packages/form/dist/validators/minDate.js, packages/form/dist/validators/minLength.js, packages/form/dist/validators/regex.js, packages/form/dist/validators/required.js, packages/ui/dist/src/index.js, packages/form/dist/components/CheckboxField/index.js, packages/form/dist/components/DateField/index.js, packages/form/dist/components/Form/index.js, packages/form/dist/components/RadioField/index.js, packages/form/dist/components/SelectInputField/index.js, packages/form/dist/components/SelectNumberField/index.js, packages/form/dist/components/SelectableCardField/index.js, packages/form/dist/components/Submit/index.js, packages/form/dist/components/SubmitErrorAlert/index.js, packages/form/dist/components/TagInputField/index.js, packages/form/dist/components/TextInputField/index.js, packages/form/dist/components/TimeField/index.js, packages/form/dist/components/ToggleField/index.js, packages/form/dist/providers/ErrorContext/index.js, packages/ui/dist/react-datepicker/dist/react-datepicker.min.css.js, packages/ui/dist/react-toastify/dist/ReactToastify.min.css.js, packages/ui/dist/src/helpers/isJSON.js, packages/ui/dist/src/helpers/legend.js, packages/ui/dist/src/helpers/numbers.js, packages/ui/dist/src/helpers/recursivelyGetChildrenString.js, packages/ui/dist/src/theme/index.js, packages/ui/dist/src/utils/animations.js, packages/ui/dist/src/utils/capitalize.js, packages/ui/dist/src/utils/ids.js, packages/ui/dist/src/utils/normalize.js, packages/ui/dist/src/utils/orderBy.js, packages/ui/dist/src/components/ActionBar/index.js, packages/ui/dist/src/components/Alert/index.js, packages/ui/dist/src/components/Avatar/index.js, packages/ui/dist/src/components/Badge/index.js, packages/ui/dist/src/components/BarChart/Tooltip.js, packages/ui/dist/src/components/BarChart/index.js, packages/ui/dist/src/components/BarStack/index.js, packages/ui/dist/src/components/BorderedBox/index.js, packages/ui/dist/src/components/Breadcrumbs/index.js, packages/ui/dist/src/components/Bullet/index.js, packages/ui/dist/src/components/Button/index.js, packages/ui/dist/src/components/Carousel/index.js, packages/ui/dist/src/components/Checkbox/index.js, packages/ui/dist/src/components/Container/index.js, packages/ui/dist/src/components/CopyButton/index.js, packages/ui/dist/src/components/DateInput/index.js, packages/ui/dist/src/components/Description/index.js, packages/ui/dist/src/components/DotSteps/index.js, packages/ui/dist/src/components/Expandable/index.js, packages/ui/dist/src/components/Grid/Col.js, packages/ui/dist/src/components/Grid/Grid.js, packages/ui/dist/src/components/Grid/Row.js, packages/ui/dist/src/components/Icon/index.js, packages/ui/dist/src/components/Image/index.js, packages/ui/dist/src/components/Label/index.js, packages/ui/dist/src/components/LineChart/CustomLegend.js, packages/ui/dist/src/components/LineChart/Tooltip.js, packages/ui/dist/src/components/LineChart/helpers.js, packages/ui/dist/src/components/LineChart/index.js, packages/ui/dist/src/components/Link/index.js, packages/ui/dist/src/components/List/Cell.js, packages/ui/dist/src/components/List/LoadingSkeleton.js, packages/ui/dist/src/components/List/SelectBar.js, packages/ui/dist/src/components/List/SortIcon.js, packages/ui/dist/src/components/List/context.js, packages/ui/dist/src/components/List/index.js, packages/ui/dist/src/components/ListV2/ListBody.js, packages/ui/dist/src/components/ListV2/ListCell.js, packages/ui/dist/src/components/ListV2/ListContext.js, packages/ui/dist/src/components/ListV2/ListExpandable.js, packages/ui/dist/src/components/ListV2/ListHeader.js, packages/ui/dist/src/components/ListV2/ListHeaderRow.js, packages/ui/dist/src/components/ListV2/ListHeaders.js, packages/ui/dist/src/components/ListV2/ListLoadingSkeleton.js, packages/ui/dist/src/components/ListV2/ListRow.js, packages/ui/dist/src/components/ListV2/index.js, packages/ui/dist/src/components/Loader/index.js, packages/ui/dist/src/components/Markdown/index.js, packages/ui/dist/src/components/Menu/Item.js, packages/ui/dist/src/components/Menu/index.js, packages/ui/dist/src/components/Modal/index.js, packages/ui/dist/src/components/Notice/index.js, packages/ui/dist/src/components/Pagination/getPageNumbers.js, packages/ui/dist/src/components/Pagination/index.js, packages/ui/dist/src/components/Pagination/usePagination.js, packages/ui/dist/src/components/PaginationV2/getPageNumbers.js, packages/ui/dist/src/components/PaginationV2/index.js, packages/ui/dist/src/components/PasswordCheck/index.js, packages/ui/dist/src/components/PasswordStrengthMeter/index.js, packages/ui/dist/src/components/PieChart/Legends.js, packages/ui/dist/src/components/PieChart/Tooltip.js, packages/ui/dist/src/components/PieChart/index.js, packages/ui/dist/src/components/PieChart/patterns.js, packages/ui/dist/src/components/ProgressBar/index.js, packages/ui/dist/src/components/ProgressionButton/index.js, packages/ui/dist/src/components/Radio/index.js, packages/ui/dist/src/components/ScrollView/index.js, packages/ui/dist/src/components/SelectInput/index.js, packages/ui/dist/src/components/SelectNumber/index.js, packages/ui/dist/src/components/SelectableCard/index.js, packages/ui/dist/src/components/Separator/index.js, packages/ui/dist/src/components/Skeleton/Block.js, packages/ui/dist/src/components/Skeleton/Blocks.js, packages/ui/dist/src/components/Skeleton/BoxWithIcon.js, packages/ui/dist/src/components/Skeleton/Donut.js, packages/ui/dist/src/components/Skeleton/IconSkeleton.js, packages/ui/dist/src/components/Skeleton/Line.js, packages/ui/dist/src/components/Skeleton/List.js, packages/ui/dist/src/components/Skeleton/Slider.js, packages/ui/dist/src/components/Skeleton/index.js, packages/ui/dist/src/components/Snippet/index.js, packages/ui/dist/src/components/Sphere/index.js, packages/ui/dist/src/components/Stack/index.js, packages/ui/dist/src/components/StateBar/index.js, packages/ui/dist/src/components/Status/index.js, packages/ui/dist/src/components/StepList/index.js, packages/ui/dist/src/components/Stepper/index.js, packages/ui/dist/src/components/SwitchButton/FocusOverlay.js, packages/ui/dist/src/components/SwitchButton/index.js, packages/ui/dist/src/components/Table/index.js, packages/ui/dist/src/components/Tabs/Tab.js, packages/ui/dist/src/components/Tabs/TabMenu.js, packages/ui/dist/src/components/Tabs/TabMenuItem.js, packages/ui/dist/src/components/Tabs/TabsContext.js, packages/ui/dist/src/components/Tabs/index.js, packages/ui/dist/src/components/Tag/index.js, packages/ui/dist/src/components/TagInput/index.js, packages/ui/dist/src/components/TagsPoplist/index.js, packages/ui/dist/src/components/Text/index.js, packages/ui/dist/src/components/TextInput/index.js, packages/ui/dist/src/components/TimeInput/index.js, packages/ui/dist/src/components/Toaster/index.js, packages/ui/dist/src/components/Toggle/index.js, packages/ui/dist/src/components/Tooltip/helpers.js, packages/ui/dist/src/components/Tooltip/index.js, packages/ui/dist/src/components/UnitInput/index.js, packages/ui/dist/src/components/VerificationCode/index.js, packages/ui/dist/src/theme/tokens/dark.js, packages/ui/dist/src/theme/tokens/light.js, packages/ui/dist/src/utils/responsive/Breakpoint.js, packages/ui/dist/src/utils/responsive/utilities.js, packages/ui/dist/src/components/List/variants/index.js, packages/ui/dist/src/components/List/variants/variantExplorer.js, packages/ui/dist/src/components/List/variants/variantProduct.js, packages/ui/dist/src/components/List/variants/variantTable.js 133.89 KB (+100% 🔺)

@codecov
Copy link

codecov bot commented Jan 19, 2023

Codecov Report

Merging #2209 (184cee1) into main (184cee1) will not change coverage.
The diff coverage is n/a.

❗ Current head 184cee1 differs from pull request most recent head 98ab3a5. Consider uploading reports for the commit 98ab3a5 to get more accurate results

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2209   +/-   ##
=======================================
  Coverage   95.74%   95.74%           
=======================================
  Files         153      153           
  Lines        3429     3429           
  Branches      472      472           
=======================================
  Hits         3283     3283           
  Misses         99       99           
  Partials       47       47           

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 184cee1...98ab3a5. Read the comment docs.

@matthprost matthprost requested a review from QuiiBz January 20, 2023 10:45
if (timer.current) {
setReverseAnimation(false)
clearTimeout(timer.current)
timer.current = undefined
Copy link
Collaborator

Choose a reason for hiding this comment

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

can you add a test unit on this line ?

@matthprost matthprost force-pushed the feat/tooltip-improvements branch from 1e1b7c8 to 98ab3a5 Compare January 26, 2023 09:22
@matthprost matthprost enabled auto-merge (squash) January 26, 2023 09:24
@matthprost matthprost disabled auto-merge January 26, 2023 09:57
@matthprost matthprost merged commit 7c6ea37 into main Jan 26, 2023
@matthprost matthprost deleted the feat/tooltip-improvements branch January 26, 2023 09:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants