From 139c025e33edcaafddb8a0ba6cc7fc9b0eb51165 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:37:51 -0700
Subject: [PATCH] Revert "Add controlled prop to open the Tooltip" (#11751)

Reverts Shopify/polaris#11714

@chloerice and I are exploring an alternative pattern for hybrid
controlled/uncontrolled component state management.
---
 .changeset/three-plants-smile.md              |   5 -
 .../components/Tooltip/Tooltip.stories.tsx    |  86 ++-----------
 .../src/components/Tooltip/Tooltip.tsx        |  26 ++--
 .../components/Tooltip/tests/Tooltip.test.tsx | 118 ++----------------
 .../pages/examples/tooltip-default.tsx        |   2 +-
 .../tooltip-with-persistence-on-click.tsx     |   6 +-
 .../pages/examples/tooltip-with-underline.tsx |   6 +-
 7 files changed, 37 insertions(+), 212 deletions(-)
 delete mode 100644 .changeset/three-plants-smile.md

diff --git a/.changeset/three-plants-smile.md b/.changeset/three-plants-smile.md
deleted file mode 100644
index 3dfafa6c163..00000000000
--- a/.changeset/three-plants-smile.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Added the `open` prop to `Tooltip` to support programmatic control of its active state. Added the `defaultOpen` prop to `Tooltip` to supersede the `active` prop for setting the initial active state. Deprecated the `active` prop on `Tooltip` to be removed in Polaris v13.
diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 4869f0b286d..173bf0a2fc3 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useState} from 'react';
 import {QuestionCircleIcon} from '@shopify/polaris-icons';
 import type {ComponentMeta} from '@storybook/react';
 import {
@@ -43,7 +43,7 @@ export function All() {
 export function Default() {
   return (
     <Box paddingBlockStart="2400">
-      <Tooltip defaultOpen content="This order has shipping labels.">
+      <Tooltip active content="This order has shipping labels.">
         <Text variant="bodyLg" fontWeight="bold" as="span">
           Order #1001
         </Text>
@@ -57,7 +57,7 @@ export function PreferredPosition() {
     <Box paddingBlockStart="2400">
       <InlineStack gap="800">
         <Tooltip
-          defaultOpen
+          active
           content="This content is positioned above the activator"
           preferredPosition="above"
         >
@@ -75,7 +75,7 @@ export function PreferredPosition() {
           </InlineStack>
         </Tooltip>
         <Tooltip
-          defaultOpen
+          active
           content="This content is positioned above the activator"
           preferredPosition="below"
         >
@@ -102,7 +102,7 @@ export function Width() {
     <Box paddingBlockStart="2400">
       <InlineStack gap="800">
         <Tooltip
-          defaultOpen
+          active
           content="This content has the default width and will break into a new line at 200px width"
         >
           <InlineStack gap="100">
@@ -119,7 +119,7 @@ export function Width() {
           </InlineStack>
         </Tooltip>
         <Tooltip
-          defaultOpen
+          active
           content="This content has the wide width and will break into a new line at 275px width"
           width="wide"
         >
@@ -145,7 +145,7 @@ export function Padding() {
   return (
     <Box paddingBlockStart="2400">
       <InlineStack gap="800">
-        <Tooltip defaultOpen content="This content has default padding">
+        <Tooltip active content="This content has default padding">
           <InlineStack gap="100">
             <Text variant="bodyLg" fontWeight="medium" as="span">
               Tooltip with
@@ -160,7 +160,7 @@ export function Padding() {
           </InlineStack>
         </Tooltip>
         <Tooltip
-          defaultOpen
+          active
           content="This content has padding of 4 (space-400 / 16px)"
           padding="400"
         >
@@ -187,7 +187,7 @@ export function BorderRadius() {
     <Box paddingBlockStart="2400">
       <InlineStack gap="800">
         <Tooltip
-          defaultOpen
+          active
           content="This content has the default (radius-100) border radius"
         >
           <InlineStack gap="100">
@@ -204,7 +204,7 @@ export function BorderRadius() {
           </InlineStack>
         </Tooltip>
         <Tooltip
-          defaultOpen
+          active
           content="This content has a border radius of 200 (radius-200)"
           borderRadius="200"
         >
@@ -307,7 +307,7 @@ export function ActivatorAsDiv() {
   return (
     <Box paddingBlockStart="2400">
       <Tooltip
-        defaultOpen
+        active
         content="This tooltip is rendered as a div"
         activatorWrapper="div"
       >
@@ -462,7 +462,7 @@ export function Alignment() {
 export function HasUnderline() {
   return (
     <Card padding="400">
-      <Tooltip defaultOpen content="This tooltip has an underline" hasUnderline>
+      <Tooltip active content="This tooltip has an underline" hasUnderline>
         <Text variant="bodyLg" fontWeight="bold" as="span">
           Order #1001
         </Text>
@@ -486,66 +486,6 @@ export function PersistOnClick() {
   );
 }
 
-export function WithControlledState() {
-  const [open, setOpen] = useState(false);
-
-  const handleOpen = useCallback(() => {
-    setOpen(true);
-  }, []);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <Box paddingBlockStart="2400">
-      <Tooltip
-        open={open}
-        onOpen={handleOpen}
-        onClose={handleClose}
-        content="Tooltip content"
-      >
-        <Text as="span" variant="bodyLg">
-          The tooltip is {String(open)}
-        </Text>
-      </Tooltip>
-    </Box>
-  );
-}
-
-export function WithUncontrolledState() {
-  return (
-    <Box paddingBlockStart="2400">
-      <InlineStack gap="2400">
-        <Tooltip
-          content="This tooltip should render on load and hover"
-          defaultOpen
-        >
-          <Text variant="bodyLg" fontWeight="bold" as="span">
-            Default open true
-          </Text>
-        </Tooltip>
-        <Tooltip
-          content="This tooltip should render on hover"
-          defaultOpen={false}
-        >
-          <Text variant="bodyLg" fontWeight="bold" as="span">
-            Default open false
-          </Text>
-        </Tooltip>
-        <Tooltip
-          content="This tooltip should render on hover"
-          defaultOpen={undefined}
-        >
-          <Text variant="bodyLg" fontWeight="bold" as="span">
-            Default open undefined
-          </Text>
-        </Tooltip>
-      </InlineStack>
-    </Box>
-  );
-}
-
 export function ActiveStates() {
   const [popoverActive, setPopoverActive] = useState(false);
   const [tooltipActive, setTooltipActive] =
@@ -618,7 +558,7 @@ export function ActiveStates() {
 export function OneCharacter() {
   return (
     <Box paddingBlockStart="2400">
-      <Tooltip defaultOpen content="j">
+      <Tooltip active content="j">
         <Text variant="bodyLg" fontWeight="bold" as="span">
           Order #1001
         </Text>
diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index 0c693ce0a4c..635e3977fed 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -23,14 +23,7 @@ export interface TooltipProps {
   children?: React.ReactNode;
   /** The content to display within the tooltip */
   content: React.ReactNode;
-  /** Toggle whether the tooltip is visible. */
-  open?: boolean;
-  /** Toggle whether the tooltip is visible initially */
-  defaultOpen?: boolean;
-  /**
-   * Toggle whether the tooltip is visible initially
-   * @deprecated Use `defaultOpen` instead
-   */
+  /** Toggle whether the tooltip is visible */
   active?: boolean;
   /** Delay in milliseconds while hovering over an element before the tooltip is visible */
   hoverDelay?: number;
@@ -81,8 +74,6 @@ export function Tooltip({
   children,
   content,
   dismissOnMouseOut,
-  open,
-  defaultOpen: defaultOpenProp,
   active: originalActive,
   hoverDelay,
   preferredPosition = 'above',
@@ -100,15 +91,14 @@ export function Tooltip({
   const borderRadius = borderRadiusProp || '200';
 
   const WrapperComponent: any = activatorWrapper;
-  const defaultOpen = defaultOpenProp ?? originalActive;
   const {
     value: active,
     setTrue: setActiveTrue,
     setFalse: handleBlur,
-  } = useToggle(Boolean(defaultOpen));
+  } = useToggle(Boolean(originalActive));
 
   const {value: persist, toggle: togglePersisting} = useToggle(
-    Boolean(defaultOpen) && Boolean(persistOnClick),
+    Boolean(originalActive) && Boolean(persistOnClick),
   );
 
   const [activatorNode, setActivatorNode] = useState<HTMLElement | null>(null);
@@ -118,14 +108,14 @@ export function Tooltip({
   const id = useId();
   const activatorContainer = useRef<HTMLElement>(null);
   const mouseEntered = useRef(false);
-  const [shouldAnimate, setShouldAnimate] = useState(Boolean(!defaultOpen));
+  const [shouldAnimate, setShouldAnimate] = useState(Boolean(!originalActive));
   const hoverDelayTimeout = useRef<NodeJS.Timeout | null>(null);
   const hoverOutTimeout = useRef<NodeJS.Timeout | null>(null);
 
   const handleFocus = useCallback(() => {
-    if (originalActive === false) return;
-
-    setActiveTrue();
+    if (originalActive !== false) {
+      setActiveTrue();
+    }
   }, [originalActive, setActiveTrue]);
 
   useEffect(() => {
@@ -189,7 +179,7 @@ export function Tooltip({
         id={id}
         preferredPosition={preferredPosition}
         activator={activatorNode}
-        active={open ?? active}
+        active={active}
         accessibilityLabel={accessibilityLabel}
         onClose={noop}
         preventInteraction={dismissOnMouseOut}
diff --git a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
index b7552e8ba0b..b17a4202214 100644
--- a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
+++ b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
@@ -35,94 +35,16 @@ describe('<Tooltip />', () => {
     expect(tooltipActive.find(TooltipOverlay)).toContainReactComponent('div');
   });
 
-  it('renders initially when defaultOpen is true', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" defaultOpen>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div');
-  });
-
   it('does not render when active is false', () => {
-    const tooltip = mountWithApp(
+    const tooltipActive = mountWithApp(
       <Tooltip content="Inner content" active={false}>
         <Link>link content</Link>
       </Tooltip>,
     );
 
-    expect(tooltip.find(TooltipOverlay)).not.toContainReactComponent('div');
-  });
-
-  it('does not render initially when defaultOpen is false', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" defaultOpen={false}>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).not.toContainReactComponent('div');
-  });
-
-  it('renders when open is true', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" open>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div');
-  });
-
-  it('does not render when open is false', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" open={false}>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).not.toContainReactComponent('div');
-  });
-
-  it('renders when open is true and active is false', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" open active={false}>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div');
-  });
-
-  it('renders when open is true and defaultOpen is false', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" open defaultOpen={false}>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div');
-  });
-
-  it('does not render when open is false and active is true', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" open={false} active>
-        <Link>link content</Link>
-      </Tooltip>,
+    expect(tooltipActive.find(TooltipOverlay)).not.toContainReactComponent(
+      'div',
     );
-
-    expect(tooltip.find(TooltipOverlay)).not.toContainReactComponent('div');
-  });
-
-  it('does not render when open is false and defaultOpen is true', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content" open={false} defaultOpen>
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    expect(tooltip.find(TooltipOverlay)).not.toContainReactComponent('div');
   });
 
   it('does not render when active prop is updated to false', () => {
@@ -139,23 +61,9 @@ describe('<Tooltip />', () => {
     expect(tooltip.find(TooltipOverlay)).not.toContainReactComponent('div');
   });
 
-  it('renders when defaultOpen prop is updated to false', () => {
-    const tooltip = mountWithApp(
-      <Tooltip content="Inner content">
-        <Link>link content</Link>
-      </Tooltip>,
-    );
-
-    findWrapperComponent(tooltip)!.trigger('onMouseOver');
-    expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div');
-
-    tooltip.setProps({defaultOpen: false});
-    expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div');
-  });
-
   it('passes preventInteraction to TooltipOverlay when dismissOnMouseOut is true', () => {
     const tooltip = mountWithApp(
-      <Tooltip dismissOnMouseOut content="Inner content">
+      <Tooltip dismissOnMouseOut content="Inner content" active>
         <Link>link content</Link>
       </Tooltip>,
     );
@@ -210,7 +118,7 @@ describe('<Tooltip />', () => {
 
   it('closes itself when escape is pressed on keyup', () => {
     const tooltip = mountWithApp(
-      <Tooltip defaultOpen content="This order has shipping labels.">
+      <Tooltip active content="This order has shipping labels.">
         <div>Order #1001</div>
       </Tooltip>,
     );
@@ -224,11 +132,11 @@ describe('<Tooltip />', () => {
     });
   });
 
-  it('does not call onOpen initially when defaultOpen is true', () => {
+  it('does not call onOpen when initially activated', () => {
     const openSpy = jest.fn();
     const tooltip = mountWithApp(
       <Tooltip
-        defaultOpen
+        active
         content="This order has shipping labels."
         onOpen={openSpy}
       >
@@ -243,11 +151,11 @@ describe('<Tooltip />', () => {
     expect(openSpy).not.toHaveBeenCalled();
   });
 
-  it('calls onClose initially when defaultOpen is true and then closed', () => {
+  it('calls onClose when initially activated and then closed', () => {
     const closeSpy = jest.fn();
     const tooltip = mountWithApp(
       <Tooltip
-        defaultOpen
+        active
         content="This order has shipping labels."
         onClose={closeSpy}
       >
@@ -308,7 +216,7 @@ describe('<Tooltip />', () => {
     const closeSpy = jest.fn();
 
     const tooltip = mountWithApp(
-      <Tooltip defaultOpen content="Inner content" onClose={closeSpy}>
+      <Tooltip active content="Inner content" onClose={closeSpy}>
         <Link>link content</Link>
       </Tooltip>,
     );
@@ -326,7 +234,7 @@ describe('<Tooltip />', () => {
     const closeSpy = jest.fn();
 
     const tooltip = mountWithApp(
-      <Tooltip defaultOpen content="Inner content" onClose={closeSpy}>
+      <Tooltip active content="Inner content" onClose={closeSpy}>
         <Link>link content</Link>
       </Tooltip>,
     );
@@ -347,7 +255,7 @@ describe('<Tooltip />', () => {
       <Tooltip
         accessibilityLabel={accessibilityLabel}
         content="Inner content"
-        defaultOpen
+        active
       >
         <Link>link content</Link>
       </Tooltip>,
@@ -359,7 +267,7 @@ describe('<Tooltip />', () => {
 
   it("passes 'zIndexOverride' to TooltipOverlay", () => {
     const tooltip = mountWithApp(
-      <Tooltip defaultOpen content="Inner content" zIndexOverride={100}>
+      <Tooltip active content="Inner content" zIndexOverride={100}>
         <Link>link content</Link>
       </Tooltip>,
     );
diff --git a/polaris.shopify.com/pages/examples/tooltip-default.tsx b/polaris.shopify.com/pages/examples/tooltip-default.tsx
index 1d1208f139b..ab114375d29 100644
--- a/polaris.shopify.com/pages/examples/tooltip-default.tsx
+++ b/polaris.shopify.com/pages/examples/tooltip-default.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function TooltipExample() {
   return (
     <div style={{padding: '75px 0'}}>
-      <Tooltip defaultOpen content="This order has shipping labels.">
+      <Tooltip active content="This order has shipping labels.">
         <Text fontWeight="bold" as="span">
           Order #1001
         </Text>
diff --git a/polaris.shopify.com/pages/examples/tooltip-with-persistence-on-click.tsx b/polaris.shopify.com/pages/examples/tooltip-with-persistence-on-click.tsx
index 118cb65201e..86063c2ef75 100644
--- a/polaris.shopify.com/pages/examples/tooltip-with-persistence-on-click.tsx
+++ b/polaris.shopify.com/pages/examples/tooltip-with-persistence-on-click.tsx
@@ -5,11 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function TooltipExample() {
   return (
     <div style={{padding: '75px 0'}}>
-      <Tooltip
-        defaultOpen
-        persistOnClick
-        content="This order has shipping labels."
-      >
+      <Tooltip persistOnClick active content="This order has shipping labels.">
         <Text fontWeight="bold" as="span">
           Order #1001
         </Text>
diff --git a/polaris.shopify.com/pages/examples/tooltip-with-underline.tsx b/polaris.shopify.com/pages/examples/tooltip-with-underline.tsx
index 31c347456e6..271f4f5f2c7 100644
--- a/polaris.shopify.com/pages/examples/tooltip-with-underline.tsx
+++ b/polaris.shopify.com/pages/examples/tooltip-with-underline.tsx
@@ -6,11 +6,7 @@ function TooltipExample() {
   return (
     <div style={{padding: '75px 0'}}>
       <Card padding="400">
-        <Tooltip
-          defaultOpen
-          hasUnderline
-          content="This tooltip has an underline"
-        >
+        <Tooltip active content="This tooltip has an underline" hasUnderline>
           <Text variant="bodyLg" fontWeight="bold" as="span">
             Order #1001
           </Text>