fix(rac): Register placement variant for Aria Tooltip

Change-Id: Id10421d142e3363cd1cb85fc2d0f9e906bb5fb5f GitOrigin-RevId: 524c74e24620ef63767b6e9681d641585fe72de2
plasmicapp · Oct 29, 2024 · f641864 · f641864
1 parent c4f748d
commit f641864
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/plasmicpkgs/react-aria/src/registerTooltip.tsx b/plasmicpkgs/react-aria/src/registerTooltip.tsx
@@ -9,18 +9,32 @@ import {
   Registerable,
   registerComponentHelper,
 } from "./utils";
+import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 function isForwardRefComponent(element: any): element is React.ReactElement {
   return element?.type?.$$typeof === Symbol.for("react.forward_ref");
 }
 
-export interface BaseTooltipProps extends TooltipTriggerProps, TooltipProps {
+const TOOLTIP_VARIANTS = [
+  "placementTop" as const,
+  "placementBottom" as const,
+  "placementLeft" as const,
+  "placementRight" as const,
+];
+
+export interface BaseTooltipProps
+  extends TooltipTriggerProps,
+    TooltipProps,
+    WithVariants<typeof TOOLTIP_VARIANTS> {
   children?: React.ReactElement<HTMLElement>;
   tooltipContent?: React.ReactElement;
   resetClassName?: string;
   className?: string;
 }
 
+const { variants, withObservedValues } =
+  pickAriaComponentVariants(TOOLTIP_VARIANTS);
+
 function TooltipButton(props: AriaButtonProps) {
   const ref = React.useRef<HTMLButtonElement | null>(null);
   const { buttonProps } = useButton(props, ref);
@@ -54,6 +68,7 @@ export function BaseTooltip(props: BaseTooltipProps) {
     arrowBoundaryOffset,
     className,
     onOpenChange,
+    plasmicUpdateVariant,
   } = props;
 
   const { isSelected, selectedSlotName } =
@@ -89,7 +104,18 @@ export function BaseTooltip(props: BaseTooltipProps) {
         onOpenChange={onOpenChange}
         placement={placement}
       >
-        {tooltipContent}
+        {({ placement: _placement }) =>
+          withObservedValues(
+            tooltipContent,
+            {
+              placementTop: _placement === "top",
+              placementBottom: _placement === "bottom",
+              placementLeft: _placement === "left",
+              placementRight: _placement === "right",
+            },
+            plasmicUpdateVariant
+          )
+        }
       </Tooltip>
     </TooltipTrigger>
   );
@@ -109,6 +135,7 @@ export function registerTooltip(
       importName: "BaseTooltip",
       isAttachment: true,
       styleSections: true,
+      variants,
       props: {
         children: {
           type: "slot",
@@ -158,7 +185,8 @@ export function registerTooltip(
           type: "choice",
           description:
             "Default placement of the popover relative to the trigger, if there is enough space",
-          defaultValueHint: "bottom",
+          defaultValueHint: "top",
+          // Not providing more options because https://github.com/adobe/react-spectrum/issues/6517
           options: ["top", "bottom", "left", "right"],
         },
         isOpen: {

diff --git a/plasmicpkgs/react-aria/src/variant-utils.tsx b/plasmicpkgs/react-aria/src/variant-utils.tsx
@@ -38,6 +38,22 @@ const ARIA_COMPONENTS_VARIANTS = {
     cssSelector: "[data-indeterminate]",
     displayName: "Indeterminate",
   },
+  placementLeft: {
+    cssSelector: "[data-placement]=left",
+    displayName: "Placement (Left)",
+  },
+  placementRight: {
+    cssSelector: "[data-placement]=right",
+    displayName: "Placement (Right)",
+  },
+  placementTop: {
+    cssSelector: "[data-placement]=top",
+    displayName: "Placement (Top)",
+  },
+  placementBottom: {
+    cssSelector: "[data-placement]=bottom",
+    displayName: "Placement (Bottom)",
+  },
 };
 
 type AriaVariant = keyof typeof ARIA_COMPONENTS_VARIANTS;