Update Tooltip props and state management

.changeset/loud-shrimps-promise.md

@@ -0,0 +1,11 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Tooltip` props and state management:
+
+- Added a new `open` prop
+- Added a new `defaultOpen` prop
+- Deprecated the `active` prop
+- Special cased the existing `active` prop behavior
+- Replaced `EphemeralPresenceManger` with alternative hysteresis pattern

polaris-react/src/components/Button/Button.stories.tsx

@@ -11,6 +11,9 @@ import {
   Box,
   Popover,
   ActionList,
+  Link,
+  Tooltip,
+  useCopyToClipboard,
 } from '@shopify/polaris';
 import {
   PlusIcon,
@@ -19,6 +22,8 @@ import {
   EditIcon,
   MagicIcon,
   DeleteIcon,
+  CheckIcon,
+  ClipboardIcon,
 } from '@shopify/polaris-icons';
 
 export default {
@@ -832,3 +837,33 @@ export function LoadingState() {
     </InlineStack>
   );
 }
+
+export function CopyToClipboard() {
+  const [copy, status] = useCopyToClipboard({
+    defaultValue: 'hello@example.com',
+  });
+
+  return (
+    <div style={{maxWidth: 300, paddingTop: 100}}>
+      <Card>
+        <InlineStack align="space-between" gap="200">
+          <Link removeUnderline>hello@example.com</Link>
+          <Tooltip
+            dismissOnMouseOut
+            hoverDelay={500}
+            preferredPosition="above"
+            open={status === 'copied' ? true : undefined}
+            content={status === 'copied' ? 'Copied' : 'Copy'}
+          >
+            <Button
+              variant="tertiary"
+              onClick={copy}
+              icon={status === 'copied' ? CheckIcon : ClipboardIcon}
+              accessibilityLabel="Copy email address"
+            />
+          </Tooltip>
+        </InlineStack>
+      </Card>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useCallback, 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 active content="This order has shipping labels.">
+      <Tooltip defaultOpen 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
-          active
+          defaultOpen
           content="This content is positioned above the activator"
           preferredPosition="above"
         >
@@ -75,7 +75,7 @@ export function PreferredPosition() {
           </InlineStack>
         </Tooltip>
         <Tooltip
-          active
+          defaultOpen
           content="This content is positioned above the activator"
           preferredPosition="below"
         >
@@ -102,7 +102,7 @@ export function Width() {
     <Box paddingBlockStart="2400">
       <InlineStack gap="800">
         <Tooltip
-          active
+          defaultOpen
           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
-          active
+          defaultOpen
           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 active content="This content has default padding">
+        <Tooltip defaultOpen 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
-          active
+          defaultOpen
           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
-          active
+          defaultOpen
           content="This content has the default (radius-100) border radius"
         >
           <InlineStack gap="100">
@@ -204,7 +204,7 @@ export function BorderRadius() {
           </InlineStack>
         </Tooltip>
         <Tooltip
-          active
+          defaultOpen
           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
-        active
+        defaultOpen
         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 active content="This tooltip has an underline" hasUnderline>
+      <Tooltip defaultOpen content="This tooltip has an underline" hasUnderline>
         <Text variant="bodyLg" fontWeight="bold" as="span">
           Order #1001
         </Text>
@@ -486,6 +486,66 @@ 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] =
@@ -558,7 +618,7 @@ export function ActiveStates() {
 export function OneCharacter() {
   return (
     <Box paddingBlockStart="2400">
-      <Tooltip active content="j">
+      <Tooltip defaultOpen content="j">
         <Text variant="bodyLg" fontWeight="bold" as="span">
           Order #1001
         </Text>