Add configurable dropdown to popovers to allow styling without needing data-cy

packages/bbui/src/Actions/position_dropdown.js

@@ -1,6 +1,6 @@
 export default function positionDropdown(
   element,
-  { anchor, align, maxWidth, useAnchorWidth }
+  { anchor, align, maxWidth, useAnchorWidth, offset = 5 }
 ) {
   const update = () => {
     if (!anchor) {
@@ -20,9 +20,9 @@ export default function positionDropdown(
     if (align === "right-outside") {
       styles.top = anchorBounds.top
     } else if (window.innerHeight - anchorBounds.bottom < 100) {
-      styles.top = anchorBounds.top - elementBounds.height - 5
+      styles.top = anchorBounds.top - elementBounds.height - offset
     } else {
-      styles.top = anchorBounds.bottom + 5
+      styles.top = anchorBounds.bottom + offset
       styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
     }
 
@@ -36,7 +36,7 @@ export default function positionDropdown(
     if (align === "right") {
       styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
     } else if (align === "right-outside") {
-      styles.left = anchorBounds.right + 10
+      styles.left = anchorBounds.right + offset
     } else {
       styles.left = anchorBounds.left
     }

packages/bbui/src/Popover/Popover.svelte

@@ -17,6 +17,7 @@
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
+  export let offset = 5
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -65,6 +66,7 @@
           align,
           maxWidth,
           useAnchorWidth,
+          offset,
         }}
         use:clickOutside={{
           callback: dismissible ? handleOutsideClick : () => {},