Browse Source

add arrow support to popover

Konstantinos Kaloutas 1 year ago
parent
commit
48ff8ba1c8

+ 1 - 0
packages/tldraw/apps/tldraw-logseq/src/components/PopoverButton/PopoverButton.tsx

@@ -32,6 +32,7 @@ export function PopoverButton({ side, align, alignOffset, label, children, borde
         collisionBoundary={document.querySelector('.logseq-tldraw')}
       >
         {children}
+        <LSUI.PopoverArrow className="popper-arrow" />
       </LSUI.PopoverContent>
     </LSUI.Popover>
   )

+ 1 - 5
packages/tldraw/apps/tldraw-logseq/src/styles.css

@@ -861,10 +861,6 @@ html[data-theme='dark'] {
   box-shadow: none;
 }
 
-.tl-popover-arrow {
-  fill: var(--ls-secondary-background-color);
-}
-
 .tl-color-palette {
   @apply grid grid-cols-4;
 }
@@ -1094,7 +1090,7 @@ button.tl-shape-links-panel-item-remove-button {
   @apply block;
 }
 
-.tl-tooltip-arrow {
+.popper-arrow {
   fill: var(--ls-secondary-background-color);
 }
 

+ 3 - 1
packages/ui/@/components/ui/popover.tsx

@@ -10,6 +10,8 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 
 const PopoverPortal = PopoverPrimitive.Portal
 
+const PopoverArrow = PopoverPrimitive.Arrow
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -28,4 +30,4 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverPortal }
+export { Popover, PopoverTrigger, PopoverContent, PopoverPortal, PopoverArrow }

+ 5 - 2
packages/ui/src/ui.ts

@@ -65,7 +65,7 @@ import {
   SelectValue
 } from '@/components/ui/select'
 import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger, PopoverPortal, PopoverArrow } from '@/components/ui/popover'
 import {
   Dialog,
   DialogClose,
@@ -146,8 +146,11 @@ const shadui = {
   SelectScrollUpButton,
   SelectScrollDownButton,
   Calendar,
-  Popover, PopoverTrigger,
+  Popover,
+  PopoverTrigger,
   PopoverContent,
+  PopoverPortal,
+  PopoverArrow,
   Dialog,
   DialogPortal,
   DialogOverlay,