playbook_ui 16.7.0.pre.alpha.play2924tooltipmisalignment16199 → 16.7.0.pre.alpha.play2924tooltipmisalignment16200

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c7c7804406ddf89dd94895bb1223d17244e37fd4b62648847708557f0c879c6
-  data.tar.gz: bb3cad46ebc29326ce281440c1b6d17ac65c45e7d794cd80011d9d57ce1d3cf6
+  metadata.gz: bd1098414a7534b24fca41a8ffeffd3acf6a7a1f48e835bbd318c7a17a42ff1e
+  data.tar.gz: 4b5eabe98006633e85de5678573ff1a1a58c3b79fda27d1edbee1cb93af27fd3
 SHA512:
-  metadata.gz: be4d9cfd2a3dc813d0746783e14fb55d6ff4c3d9f003bb0cd62efb80ffeaa4ea2bd82a908b1b8acb772019a27292aca2b0d81df29356829ff8011672e1c500c4
-  data.tar.gz: 1b395492389b12ee2c69d690a954720b809e3cd0b61d9f7c2182256ca79c34aec2e2b593cc326cca84b9166df778cdd6ab2a060f9f2d5e286a33443ae53c1051
+  metadata.gz: ba8a28d2434fdca87f08fae27a2c20143adb0734b7553b93c7732fe59c41c6f0320e095725bd64d8e38dbe169761483d4e2c8134a799a5f40b5bce3f615e188b
+  data.tar.gz: '0270209c6293af2cf5133bf9530998ed0a0199ecd060fe257b521808531045928da31cb41cda3fd47d718624e7c490d6854faa9b075bd2291db6b96c58fbb11f'

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -86,7 +86,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
 
   const {
     context,
-    middlewareData: { arrow: { centerOffset = 0, x: arrowX, y: arrowY } = {},  },
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
     placement,
     refs,
     strategy,
@@ -144,7 +144,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     top: "bottom",
   }[placement.split("-")[0]]
   const arrowPlacementStyle = staticSide ? { [staticSide]: "-5px" } : {}
-  const shouldHideArrow = centerOffset !== 0
 
   const tooltipSizing = () => {
     return Object.assign(
@@ -217,7 +216,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
                 className="arrow_bg"
                 ref={arrowRef}
                 style={{
-                  opacity: shouldHideArrow ? 0 : 1,
                   position: "absolute",
                   left: arrowX != null ? `${arrowX}px` : "",
                   top: arrowY != null ? `${arrowY}px` : "",

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -2,6 +2,17 @@ import React from "react";
 import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
 import { Button, Tooltip } from "playbook-ui";
 
+jest.mock("@floating-ui/react", () => {
+  const actual = jest.requireActual("@floating-ui/react")
+
+  return {
+    ...actual,
+    useFloating: jest.fn(actual.useFloating),
+  }
+})
+
+const { useFloating } = require("@floating-ui/react")
+
 function TooltipTest() {
   const text = "this is a text",
     placement = "top",
@@ -131,4 +142,47 @@ test("doesn't display tooltip with showTooltip set to false", async () => {
   })
 
   cleanup();
-});
+});
+
+test("keeps the arrow visible when placement flips left with center offset", async () => {
+  const actual = jest.requireActual("@floating-ui/react")
+
+  useFloating.mockImplementationOnce((options) => {
+    const result = actual.useFloating(options)
+
+    return {
+      ...result,
+      middlewareData: {
+        ...result.middlewareData,
+        arrow: {
+          centerOffset: 12,
+          x: 6,
+          y: 10,
+        },
+      },
+      open: true,
+      placement: "left",
+      x: 20,
+      y: 30,
+    }
+  })
+
+  render(
+    <Tooltip
+        data={{ testid: "left-placement-arrow-test" }}
+        forceOpenTooltip
+        placement="left"
+        text="left placement"
+        zIndex="10"
+    >
+      <Button text="hover me" />
+    </Tooltip>
+  )
+
+  const tooltip = await screen.findByRole("tooltip")
+  const arrow = tooltip.querySelector(".arrow_bg")
+
+  expect(tooltip).toHaveAttribute("data-placement", "left")
+  expect(arrow).toBeInTheDocument()
+  expect(arrow).not.toHaveStyle({ opacity: "0" })
+})