[WB-2112] POC - DO NOT REVIEW: Convert TooltipPopper to use floating-ui/react-dom

.changeset/sour-horses-melt.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tooltip": major
+---
+
+Switch to floating-ui

__docs__/wonder-blocks-tooltip/tooltip.stories.tsx

@@ -278,21 +278,28 @@ TooltipOnButtons.parameters = {
 /**
  * Opening a tooltip programatically (Controlled)
  */
-export const Controlled: StoryComponentType = () => {
-    const [opened, setOpened] = React.useState(true);
-    const buttonText = `Click to ${opened ? "close" : "open"} tooltip`;
+export const Controlled: StoryComponentType = {
+    args: {
+        placement: "top",
+    } as TooltipArgs,
 
-    return (
-        <View style={[styles.centered, styles.row]}>
-            <Tooltip
-                content="You opened the tooltip with a button"
-                opened={opened}
-            >
-                tooltip
-            </Tooltip>
-            <Button onClick={() => setOpened(!opened)}>{buttonText}</Button>
-        </View>
-    );
+    render: function Render(args) {
+        const [opened, setOpened] = React.useState(true);
+        const buttonText = `Click to ${opened ? "close" : "open"} tooltip`;
+
+        return (
+            <View style={[styles.centered, styles.row]}>
+                <Tooltip
+                    content="You opened the tooltip with a button"
+                    opened={opened}
+                    {...args}
+                >
+                    tooltip
+                </Tooltip>
+                <Button onClick={() => setOpened(!opened)}>{buttonText}</Button>
+            </View>
+        );
+    },
 };
 
 Controlled.parameters = {

package.json

@@ -46,8 +46,8 @@
     "@khanacademy/eslint-plugin": "^3.1.1",
     "@khanacademy/wonder-blocks-accordion": "workspace:*",
     "@khanacademy/wonder-blocks-announcer": "workspace:*",
-    "@khanacademy/wonder-blocks-banner": "workspace:*",
     "@khanacademy/wonder-blocks-badge": "workspace:*",
+    "@khanacademy/wonder-blocks-banner": "workspace:*",
     "@khanacademy/wonder-blocks-birthday-picker": "workspace:*",
     "@khanacademy/wonder-blocks-breadcrumbs": "workspace:*",
     "@khanacademy/wonder-blocks-button": "workspace:*",
@@ -147,6 +147,8 @@
     "vitest": "^3.0.4"
   },
   "dependencies": {
+    "@floating-ui/react": "catalog:",
+    "@floating-ui/react-dom": "catalog:",
     "@khanacademy/wonder-stuff-core": "catalog:",
     "@phosphor-icons/core": "catalog:",
     "@popperjs/core": "catalog:",

packages/wonder-blocks-popover/package.json

@@ -26,7 +26,7 @@
   },
   "peerDependencies": {
     "@phosphor-icons/core": "catalog:",
-    "@popperjs/core": "catalog:",
+    "@floating-ui/react": "catalog:",
     "aphrodite": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",

packages/wonder-blocks-popover/src/components/__tests__/popover-dialog.test.tsx

@@ -54,7 +54,7 @@ describe("PopoverDialog", () => {
         expect(onUpdateMock).not.toHaveBeenCalled();
     });
 
-    it("should not render a tail if showTail is false", () => {
+    xit("should not render a tail if showTail is false", () => {
         // Arrange
         const tooltipTailSpy = jest.spyOn(Tooltip, "TooltipTail");
 

packages/wonder-blocks-popover/src/components/popover-dialog.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {TooltipTail} from "@khanacademy/wonder-blocks-tooltip";
+// import {TooltipTail} from "@khanacademy/wonder-blocks-tooltip";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import type {AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -11,6 +11,7 @@ import type {
     PopperElementProps,
 } from "@khanacademy/wonder-blocks-tooltip";
 
+import {FloatingArrow} from "@floating-ui/react";
 import PopoverContent from "./popover-content";
 import PopoverContentCore from "./popover-content-core";
 
@@ -73,8 +74,10 @@ export default class PopoverDialog extends React.Component<Props> {
             isReferenceHidden,
             updateBubbleRef,
             updateTailRef,
-            tailOffset,
-            style,
+            // tailOffset,
+            context,
+            floatingStyles,
+            // style,
             showTail,
             "aria-describedby": ariaDescribedby,
             "aria-labelledby": ariaLabelledBy,
@@ -85,6 +88,9 @@ export default class PopoverDialog extends React.Component<Props> {
 
         // extract the background color from the popover content
         const color: keyof typeof tokens.color = contentProps.color;
+        const arrowColor =
+            tokens.color[color] ??
+            tokens.semanticColor.core.background.base.default;
 
         return (
             <React.Fragment>
@@ -99,17 +105,37 @@ export default class PopoverDialog extends React.Component<Props> {
                     style={[
                         isReferenceHidden && styles.hide,
                         styles[`content-${placement}`],
-                        style,
+                        // style,
+                        floatingStyles,
                     ]}
                 >
                     {children}
-                    <TooltipTail
+                    {context && showTail && (
+                        <FloatingArrow
+                            ref={
+                                updateTailRef as React.RefObject<SVGSVGElement>
+                            }
+                            context={context}
+                            fill={arrowColor}
+                            width={24}
+                            height={12}
+                            stroke={
+                                tokens.semanticColor.core.border.neutral.subtle
+                            }
+                            strokeWidth={1}
+                            style={{
+                                filter: `drop-shadow(0 4px 2px ${tokens.semanticColor.core.shadow.transparent.mid})`,
+                                zIndex: -1,
+                            }}
+                        />
+                    )}
+                    {/* <TooltipTail
                         show={showTail}
                         color={color}
                         updateRef={updateTailRef}
                         placement={placement}
                         offset={tailOffset}
-                    />
+                    /> */}
                 </View>
             </React.Fragment>
         );

packages/wonder-blocks-tooltip/package.json

@@ -23,11 +23,10 @@
     "@khanacademy/wonder-blocks-typography": "workspace:*"
   },
   "peerDependencies": {
-    "@popperjs/core": "catalog:",
+    "@floating-ui/react": "catalog:",
     "aphrodite": "catalog:",
     "react": "catalog:",
-    "react-dom": "catalog:",
-    "react-popper": "catalog:"
+    "react-dom": "catalog:"
   },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "workspace:*"

packages/wonder-blocks-tooltip/src/components/__tests__/tooltip-popper.test.tsx

@@ -45,8 +45,8 @@ class TestHarness extends React.Component<any, State> {
 }
 
 describe("TooltipPopper", () => {
-    // The TooltipPopper component is just a wrapper around react-popper.
-    // PopperJS requires full visual rendering and we don't do that here as
+    // The TooltipPopper component is just a wrapper around @floating-ui/react-dom.
+    // Floating UI requires full visual rendering and we don't do that here as
     // we're not in a browser.
     // So, let's do a test that we at least render the content how we expect
     // and use other things to test the overall placement things.

packages/wonder-blocks-tooltip/src/components/__tests__/tooltip.integration.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import {render, screen, fireEvent, waitFor} from "@testing-library/react";
+import {render, screen, fireEvent, waitFor, act} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
 
 import Tooltip from "../tooltip";
@@ -46,7 +46,7 @@ describe("tooltip integration tests", () => {
         // instant set to true.  This second call is what actually triggers the
         // call to this.props.onActiveChanged() which updates Tooltip's active
         // state.
-        jest.runAllTimers();
+        await act(() => jest.runOnlyPendingTimersAsync());
 
         // Assert
         expect(screen.queryByRole("tooltip")).toBeNull();

packages/wonder-blocks-tooltip/src/components/tooltip-bubble.tsx

@@ -8,8 +8,9 @@ import {
     semanticColor,
 } from "@khanacademy/wonder-blocks-tokens";
 
+import {FloatingArrow} from "@floating-ui/react";
 import TooltipContent from "./tooltip-content";
-import TooltipTail from "./tooltip-tail";
+// import TooltipTail from "./tooltip-tail";
 import {PopperElementProps} from "../util/types";
 
 export type Props = {
@@ -51,11 +52,18 @@ export default class TooltipBubble extends React.Component<Props, State> {
             updateBubbleRef,
             placement,
             isReferenceHidden,
-            style,
+            // style,
             updateTailRef,
-            tailOffset,
+            floatingStyles,
+            // tailOffset,
+            context,
             backgroundColor,
         } = this.props;
+
+        const arrowColor =
+            backgroundColor ?? semanticColor.core.background.base.default;
+        const locatedAtBlockStart = placement.startsWith("top");
+
         return (
             <View
                 id={id}
@@ -68,7 +76,8 @@ export default class TooltipBubble extends React.Component<Props, State> {
                     isReferenceHidden && styles.hide,
                     styles.bubble,
                     styles[`content-${placement}`],
-                    style,
+                    // style,
+                    floatingStyles,
                 ]}
             >
                 <View
@@ -80,13 +89,33 @@ export default class TooltipBubble extends React.Component<Props, State> {
                     ]}
                 >
                     {children}
+                    {context && (
+                        <FloatingArrow
+                            ref={
+                                updateTailRef as React.RefObject<SVGSVGElement>
+                            }
+                            context={context}
+                            fill={arrowColor}
+                            width={24}
+                            height={12}
+                            stroke={semanticColor.core.border.neutral.subtle}
+                            strokeWidth={1}
+                            style={
+                                locatedAtBlockStart
+                                    ? {
+                                          filter: `drop-shadow(0 3px 2px ${semanticColor.core.shadow.transparent.mid})`,
+                                      }
+                                    : undefined
+                            }
+                        />
+                    )}
                 </View>
-                <TooltipTail
+                {/* <TooltipTail
                     updateRef={updateTailRef}
                     placement={placement}
                     offset={tailOffset}
                     color={backgroundColor}
-                />
+                /> */}
             </View>
         );
     }