From 95e3e736c99a15fa5eabf25b6776bb6704818e64 Mon Sep 17 00:00:00 2001 From: gcornut Date: Tue, 4 Aug 2020 17:22:29 +0200 Subject: [PATCH] fix(tooltip): make tooltip work on disabled anchor --- CHANGELOG.md | 5 ++- .../components/tooltip/lumapps/_index.scss | 4 ++ .../components/tooltip/Tooltip.stories.tsx | 8 ++++ .../src/components/tooltip/Tooltip.test.tsx | 9 ++++ .../__snapshots__/Tooltip.test.tsx.snap | 41 +++++++++++++++++++ .../tooltip/useInjectTooltipRef.tsx | 7 +++- 6 files changed, 71 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5b7c4cbf..e69375a49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,14 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -### Fixed +### Fixed - Fixed and improved `Dropdown` shrinking system. - Fixed unwanted scroll to the top on the screen when opening a `Dropdown`. +- Fix `Tooltip` display on disabled anchor. ### Changed -- Improved `useInfiniteScroll` to prevent conditionnal hooks. +- Improved `useInfiniteScroll` to prevent conditional hooks. ### Added diff --git a/packages/lumx-core/src/scss/components/tooltip/lumapps/_index.scss b/packages/lumx-core/src/scss/components/tooltip/lumapps/_index.scss index d9a138b43..f86bc5446 100644 --- a/packages/lumx-core/src/scss/components/tooltip/lumapps/_index.scss +++ b/packages/lumx-core/src/scss/components/tooltip/lumapps/_index.scss @@ -79,4 +79,8 @@ font-size: $lumx-tooltip-font-size; line-height: $lumx-tooltip-line-height; } + + &-anchor-wrapper { + display: inline-block; + } } diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx index d42c03a5b..dea529219 100644 --- a/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx +++ b/packages/lumx-react/src/components/tooltip/Tooltip.stories.tsx @@ -64,3 +64,11 @@ export const TooltipWithDropdown = () => { ); }; + +export const TooltipOnDisabledButton = () => { + return ( + + + + ); +}; diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx index e39758845..0b3407930 100644 --- a/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx +++ b/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx @@ -104,6 +104,15 @@ describe(`<${Tooltip.displayName}>`, () => { ); expect(wrapper).toMatchSnapshot(); }); + + it('should work on disabled elements', () => { + const wrapper = shallow( + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); }); // Common tests suite. diff --git a/packages/lumx-react/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/lumx-react/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap index 0afde6610..8b2677a99 100644 --- a/packages/lumx-react/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap +++ b/packages/lumx-react/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap @@ -118,6 +118,47 @@ exports[` Snapshots and structure should return children when empty lab `; +exports[` Snapshots and structure should work on disabled elements 1`] = ` + +
+ +
+ } + > +