fix(rac): create overlay arrow with css

Change-Id: Ic675bea7e033620db79d6338bc7004289027162d GitOrigin-RevId: 184c2713ea3bddceb3856d9f4f418bd5309be47e
plasmicapp · Nov 27, 2024 · 075600e · 075600e
1 parent f4bcdb1
commit 075600e
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/plasmicpkgs/react-aria/src/registerOverlayArrow.tsx b/plasmicpkgs/react-aria/src/registerOverlayArrow.tsx
@@ -40,7 +40,7 @@ export function BaseOverlayArrow({
   const tooltipContext = React.useContext(TooltipContext);
   const isStandalone = !popoverContext && !tooltipContext; // i.e. without a trigger to point to
   const overlayArrow = (
-    <OverlayArrow className={className}>
+    <OverlayArrow style={{ lineHeight: "0" }} className={className}>
       {({ placement }: OverlayArrowRenderProps) =>
         withObservedValues(
           <>{children}</>,
@@ -74,16 +74,26 @@ export function registerOverlayArrow(
       displayName: "Aria Overlay Arrow",
       importPath: "@plasmicpkgs/react-aria/skinny/registerOverlayArrow",
       importName: "BaseOverlayArrow",
-      styleSections: ["layout"],
+      styleSections: false,
       variants,
       props: {
         children: {
           type: "slot",
           defaultValue: {
-            type: "img",
-            src: "https://static1.plasmic.app/arrow-up.svg",
+            type: "hbox",
+            children: [],
             styles: {
-              width: "12px",
+              width: 0,
+              height: 0,
+              borderLeftWidth: "5px",
+              borderRightWidth: "5px",
+              borderBottomWidth: "5px",
+              borderLeftStyle: "solid",
+              borderRightStyle: "solid",
+              borderBottomStyle: "solid",
+              borderLeftColor: "transparent",
+              borderRightColor: "transparent",
+              borderBottomColor: "black",
             },
           },
         },