fix(tooltip): pointer-events disabled on button toggles

A fix for #805 See facebook/react#4251 (comment)
contentful · Jan 27, 2021 · b37d6dd · b37d6dd
1 parent 6f36fa0
commit b37d6dd
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 37 deletions.
diff --git a/...orma-36-react-components/src/components/CopyButton/__snapshots__/CopyButton.test.tsx.snap b/...orma-36-react-components/src/components/CopyButton/__snapshots__/CopyButton.test.tsx.snap
@@ -6,7 +6,9 @@ exports[`renders the component 1`] = `
   data-test-id="cf-ui-copy-button"
   id="copyButton"
 >
-  <span>
+  <span
+    class="TooltipContainer"
+  >
     <button
       class="CopyButton__button"
       type="button"
@@ -48,7 +50,9 @@ exports[`renders the component with a copy value 1`] = `
   data-test-id="cf-ui-copy-button"
   id="copyButton"
 >
-  <span>
+  <span
+    class="TooltipContainer"
+  >
     <button
       class="CopyButton__button"
       type="button"
@@ -91,7 +95,9 @@ exports[`renders the component with an additional class name 1`] = `
   data-test-id="cf-ui-copy-button"
   id="copyButton"
 >
-  <span>
+  <span
+    class="TooltipContainer"
+  >
     <button
       class="CopyButton__button"
       type="button"

diff --git a/...ponents/EditorToolbar/EditorToolbarButton/__snapshots__/EditorToolbarButton.test.tsx.snap b/...ponents/EditorToolbar/EditorToolbarButton/__snapshots__/EditorToolbarButton.test.tsx.snap
@@ -37,7 +37,9 @@ exports[`renders the component 1`] = `
 `;
 
 exports[`renders the component as active 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <button
     class="IconButton EditorToolbarButton EditorToolbarButton--is-active IconButton--secondary"
     data-test-id="cf-ui-editor-toolbar-button"
@@ -110,7 +112,9 @@ exports[`renders the component as disabled 1`] = `
 `;
 
 exports[`renders the component with a tooltip 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <button
     class="IconButton EditorToolbarButton IconButton--secondary"
     data-test-id="cf-ui-editor-toolbar-button"
@@ -182,7 +186,9 @@ exports[`renders the component with an additional class name 1`] = `
 `;
 
 exports[`renders with a dropdown indicator 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <button
     class="IconButton EditorToolbarButton IconButton--secondary"
     data-test-id="cf-ui-editor-toolbar-button"

diff --git a/.../forma-36-react-components/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/.../forma-36-react-components/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -63,7 +63,9 @@ exports[`renders the component with a copybutton 1`] = `
       data-test-id="cf-ui-copy-button"
       id="copyButton"
     >
-      <span>
+      <span
+        class="TooltipContainer"
+      >
         <button
           class="CopyButton__button"
           type="button"

diff --git a/.../forma-36-react-components/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap b/.../forma-36-react-components/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -186,7 +186,9 @@ exports[`renders the component with the copy button 1`] = `
     data-test-id="cf-ui-copy-button"
     id="copyButton"
   >
-    <span>
+    <span
+      class="TooltipContainer"
+    >
       <button
         class="CopyButton__button"
         type="button"

diff --git a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.css b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.css
@@ -35,6 +35,10 @@
   z-index: var(--z-index-negative);
 }
 
+.TooltipContainer > button[disabled] {
+  pointer-events: none;
+}
+
 .Tooltip__arrow {
   position: absolute;
 }

diff --git a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.stories.tsx b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.stories.tsx
@@ -22,28 +22,31 @@ export default {
   },
 };
 
-export const basic = (args: { content: string }) => {
+export const Basic = (args: { content: string }) => {
   return (
     <Tooltip {...args}>
       <TextLink>Hover me</TextLink>
     </Tooltip>
   );
 };
-basic.args = {
+
+Basic.args = {
   content: 'I am a Tooltip 🙌',
 };
-const basicSourceCode = `<Tooltip content="I am a Tooltip 🙌">
+
+const BasicSourceCode = `<Tooltip content="I am a Tooltip 🙌">
   <TextLink>Hover me</TextLink>
 </Tooltip>`;
-basic.parameters = {
+
+Basic.parameters = {
   docs: {
     source: {
-      code: basicSourceCode,
+      code: BasicSourceCode,
     },
   },
 };
 
-export const withHtml = (args: { content: string }) => {
+export const WithHtml = (args: { content: string }) => {
   return (
     <Paragraph>
       Lorem Ipsum dolor sit amet&nbsp;
@@ -54,29 +57,32 @@ export const withHtml = (args: { content: string }) => {
     </Paragraph>
   );
 };
-withHtml.args = {
+
+WithHtml.args = {
   content: (
     <>
       I have some <b style={{ color: 'red' }}>HTML</b> in me
     </>
   ),
 };
-const withHtmlSourceCode = `<Tooltip content={(
+
+const WithHtmlSourceCode = `<Tooltip content={(
   <>
     I have some <b style={{ color: 'red' }}>HTML</b> in me
   </>
 )}>
   <TextLink>Hover me</TextLink>
 </Tooltip>`;
-withHtml.parameters = {
+
+WithHtml.parameters = {
   docs: {
     source: {
-      code: withHtmlSourceCode,
+      code: WithHtmlSourceCode,
     },
   },
 };
 
-export const autoPlacement = (args: { content: string }) => {
+export const AutoPlacement = (args: { content: string }) => {
   return (
     <div
       style={{
@@ -102,7 +108,8 @@ export const autoPlacement = (args: { content: string }) => {
     </div>
   );
 };
-autoPlacement.args = {
+
+AutoPlacement.args = {
   place: 'auto',
   content: (
     <>
@@ -112,18 +119,20 @@ autoPlacement.args = {
     </>
   ),
 };
-const autoPlacementSourceCode = `<Tooltip place="auto" content={<>I will reposition automatically<br/>when you scroll</>}>
+
+const AutoPlacementSourceCode = `<Tooltip place="auto" content={<>I will reposition automatically<br/>when you scroll</>}>
   <TextLink>Hover me</TextLink>
 </Tooltip>`;
-autoPlacement.parameters = {
+
+AutoPlacement.parameters = {
   docs: {
     source: {
-      code: autoPlacementSourceCode,
+      code: AutoPlacementSourceCode,
     },
   },
 };
 
-export const contentHover = (args: { content: string }) => {
+export const ContentHover = (args: { content: string }) => {
   return (
     <Paragraph>
       Lorem Ipsum dolor sit amet&nbsp;
@@ -134,7 +143,8 @@ export const contentHover = (args: { content: string }) => {
     </Paragraph>
   );
 };
-contentHover.args = {
+
+ContentHover.args = {
   hideDelay: 300,
   content: (
     <>
@@ -153,7 +163,8 @@ contentHover.args = {
     </>
   ),
 };
-const contentHoverSourceCode = `<Tooltip hideDelay={300} content={(
+
+const ContentHoverSourceCode = `<Tooltip hideDelay={300} content={(
   <>
     You can interact with the content in me
     <br />
@@ -164,15 +175,16 @@ const contentHoverSourceCode = `<Tooltip hideDelay={300} content={(
 )}>
   <TextLink>Hover me</TextLink>
 </Tooltip>`;
-contentHover.parameters = {
+
+ContentHover.parameters = {
   docs: {
     source: {
-      code: contentHoverSourceCode,
+      code: ContentHoverSourceCode,
     },
   },
 };
 
-export const overview = () => {
+export const Overview = () => {
   return (
     <>
       <Flex marginBottom="spacingS">

diff --git a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.tsx b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.tsx
@@ -200,7 +200,7 @@ export const Tooltip = ({
     <>
       <ContainerElement
         ref={elementRef}
-        className={targetWrapperClassName}
+        className={cn(styles.TooltipContainer, targetWrapperClassName)}
         onMouseEnter={(evt: MouseEvent) => {
           setIsHoveringTarget(true);
           if (onMouseOver) onMouseOver(evt);

diff --git a/...ages/forma-36-react-components/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/...ages/forma-36-react-components/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -1,15 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`does not render the component if no mouseover event on child 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <span>
     Hover me
   </span>
 </span>
 `;
 
 exports[`renders the component 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <span
     id="test"
   >
@@ -19,7 +23,9 @@ exports[`renders the component 1`] = `
 `;
 
 exports[`renders the component as span with a id attribute 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <span
     id="test"
   >
@@ -29,7 +35,9 @@ exports[`renders the component as span with a id attribute 1`] = `
 `;
 
 exports[`renders the component with a id attribute 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <span
     id="test"
   >
@@ -39,7 +47,9 @@ exports[`renders the component with a id attribute 1`] = `
 `;
 
 exports[`renders the component with a place attribute 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <span
     id="test"
   >
@@ -50,7 +60,7 @@ exports[`renders the component with a place attribute 1`] = `
 
 exports[`renders the component with a target wrapper classname 1`] = `
 <span
-  class="target-wrapper-class-name"
+  class="TooltipContainer target-wrapper-class-name"
 >
   <span
     id="test"
@@ -61,7 +71,9 @@ exports[`renders the component with a target wrapper classname 1`] = `
 `;
 
 exports[`renders the component with an additional class name 1`] = `
-<span>
+<span
+  class="TooltipContainer"
+>
   <span
     id="test"
   >