Merge pull request #453 from lumapps/fix/tooltip-on-disabled

fix(tooltip): make tooltip work on disabled anchor
lumapps · Aug 4, 2020 · 9c96f4d · 9c96f4d
2 parents 0404e4a + 95e3e73
commit 9c96f4d
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 3 deletions.
diff --git 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
@@ -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
@@ -64,3 +64,11 @@ export const TooltipWithDropdown = () => {
         </>
     );
 };
+
+export const TooltipOnDisabledButton = () => {
+    return (
+        <Tooltip label={'Tooltip on disabled button'}>
+            <Button disabled>Empty</Button>
+        </Tooltip>
+    );
+};
diff --git 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(
+                <Tooltip label="Tooltip on disabled button" forceOpen>
+                    <Button disabled>Empty</Button>
+                </Tooltip>,
+            );
+            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
@@ -118,6 +118,47 @@ exports[`<Tooltip> Snapshots and structure should return children when empty lab
 </Fragment>
 `;
 
+exports[`<Tooltip> Snapshots and structure should work on disabled elements 1`] = `
+<Fragment>
+  <div
+    aria-describedby="tooltip-123"
+    className="lumx-tooltip-anchor-wrapper"
+  >
+    <Button
+      disabled={true}
+    >
+      Empty
+    </Button>
+  </div>
+  <Portal
+    containerInfo={<body />}
+  >
+    <div
+      aria-label="Tooltip on disabled button"
+      className="lumx-tooltip lumx-tooltip--position-bottom"
+      id="tooltip-123"
+      role="tooltip"
+      style={
+        Object {
+          "left": "0",
+          "position": "absolute",
+          "top": "0",
+        }
+      }
+    >
+      <div
+        className="lumx-tooltip__arrow"
+      />
+      <div
+        className="lumx-tooltip__inner"
+      >
+        Tooltip on disabled button
+      </div>
+    </div>
+  </Portal>
+</Fragment>
+`;
+
 exports[`<Tooltip> Snapshots and structure should wrap children 1`] = `
 <Fragment>
   <div

diff --git a/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx b/packages/lumx-react/src/components/tooltip/useInjectTooltipRef.tsx
@@ -21,7 +21,12 @@ export const useInjectTooltipRef = (
 ): ReactNode => {
     return useMemo(() => {
         const ariaProps = { 'aria-describedby': isOpen ? id : undefined };
-        if (children && get(children, '$$typeof')) {
+        if (
+            children &&
+            get(children, '$$typeof') &&
+            get(children, 'props.disabled') !== true &&
+            get(children, 'props.isDisabled') !== true
+        ) {
             const type = get(children, 'type');
 
             // Base React HTML element.