Expose disabled in tooltip

.changeset/giant-mayflies-sniff.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+updated Tooltip component such that when content is null only children are rendered rather than tooltip itself

polaris-react/src/components/Tooltip/Tooltip.tsx

@@ -22,8 +22,8 @@ export type BorderRadius = Extract<BorderRadiusAliasOrScale, '100' | '200'>;
 export interface TooltipProps {
   /** The element that will activate to tooltip */
   children?: React.ReactNode;
-  /** The content to display within the tooltip */
-  content: React.ReactNode;
+  /** The content to display within the tooltip. If null, the tooltip will not be rendered. */
+  content: React.ReactNode | null;
   /** Toggle whether the tooltip is visible */
   active?: boolean;
   /** Delay in milliseconds while hovering over an element before the tooltip is visible */
@@ -174,7 +174,7 @@ export function Tooltip({
     }
   }, [originalActive, active, handleClose, handleBlur]);
 
-  const portal = activatorNode ? (
+  const tooltipPortal = activatorNode ? (
     <Portal idPrefix="tooltip">
       <TooltipOverlay
         id={id}
@@ -224,7 +224,7 @@ export function Tooltip({
       className={wrapperClassNames}
     >
       {children}
-      {portal}
+      {content !== null && tooltipPortal}
     </WrapperComponent>
   );
 

polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx

@@ -509,6 +509,46 @@ describe('<Tooltip />', () => {
       });
     });
   });
+
+  describe('tooltip when content is null', () => {
+    it('does not render tooltip when content is null', () => {
+      const tooltip = mountWithApp(
+        <Tooltip content={null}>
+          <Link>link content</Link>
+        </Tooltip>,
+      );
+
+      expect(tooltip).not.toContainReactComponent(TooltipOverlay);
+      expect(tooltip).toContainReactComponent(Link);
+    });
+
+    it('renders tooltip when content changes from null to a value', () => {
+      const tooltip = mountWithApp(
+        <Tooltip content={null}>
+          <Link>link content</Link>
+        </Tooltip>,
+      );
+
+      tooltip.setProps({content: 'New content'});
+      findWrapperComponent(tooltip)!.trigger('onMouseOver');
+
+      expect(tooltip).toContainReactComponent(TooltipOverlay);
+    });
+
+    it('removes tooltip when content changes to null', () => {
+      const tooltip = mountWithApp(
+        <Tooltip content="Initial content">
+          <Link>link content</Link>
+        </Tooltip>,
+      );
+
+      findWrapperComponent(tooltip)!.trigger('onMouseOver');
+      expect(tooltip).toContainReactComponent(TooltipOverlay);
+
+      tooltip.setProps({content: null});
+      expect(tooltip).not.toContainReactComponent(TooltipOverlay);
+    });
+  });
 });
 
 function findWrapperComponent(tooltip: any) {