Feedback updates

packages/bbui/src/Actions/position_dropdown.js

@@ -1,6 +1,6 @@
 export default function positionDropdown(
   element,
-  { anchor, align, maxWidth, useAnchorWidth, showTip }
+  { anchor, align, maxWidth, useAnchorWidth }
 ) {
   const update = () => {
     if (!anchor) {
@@ -17,7 +17,6 @@ export default function positionDropdown(
     }
 
     let popoverLeftPad = 20
-    let tipOffset = showTip ? 12.5 : 0
 
     // Determine vertical styles
     if (window.innerHeight - anchorBounds.bottom < 100) {
@@ -36,10 +35,7 @@ export default function positionDropdown(
     }
     if (align === "right") {
       let left =
-        anchorBounds.left +
+        anchorBounds.left + anchorBounds.width / 2 - elementBounds.width
-        anchorBounds.width / 2 -
-        elementBounds.width +
-        tipOffset
       // Accommodate margin on popover: 1.25rem; ~20px
       if (left + elementBounds.width + popoverLeftPad > window.innerWidth) {
         left -= 20

packages/bbui/src/Popover/Popover.svelte

@@ -21,9 +21,6 @@
   export let useAnchorWidth = false
   export let dismissible = true
 
-  let tipSvg =
-    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
-
   $: tooltipClasses = showTip
     ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
     : ""
@@ -73,7 +70,7 @@
         align,
         maxWidth,
         useAnchorWidth,
-        showTip,
+        showTip: false,
       }}
       use:clickOutside={{
         callback: dismissible ? handleOutsideClick : () => {},
@@ -85,10 +82,6 @@
       data-cy={dataCy}
       transition:fly|local={{ y: -20, duration: 200 }}
     >
-      {#if showTip}
-        {@html tipSvg}
-      {/if}
-
       <slot />
     </div>
   </Portal>

packages/builder/src/components/portal/onboarding/TourPopover.svelte

@@ -110,12 +110,11 @@
 
 {#key tourStepKey}
   <Popover
-    align="right"
+    align={tourStep?.align}
     bind:this={popover}
     anchor={popoverAnchor}
     dataCy="tour-popover-menu"
     maxWidth={300}
-    showTip={true}
     dismissible={false}
   >
     <Layout gap="M">
@@ -160,6 +159,7 @@
   }
   :global([data-cy="tour-popover-menu"]) {
     padding: 10px;
+    margin-top: var(--spacing-l);
   }
   .tour-body :global(.feature-list) {
     margin-bottom: 0px;

packages/builder/src/components/portal/onboarding/tours.js

@@ -34,6 +34,7 @@ const getTours = () => {
         onLoad: async () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
         },
+        align: "left",
       },
       {
         id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
@@ -44,6 +45,7 @@ const getTours = () => {
         onLoad: () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
         },
+        align: "left",
       },
       {
         id: TOUR_STEP_KEYS.BUILDER_AUTOMATE_SECTION,
@@ -54,6 +56,7 @@ const getTours = () => {
         onLoad: () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATE_SECTION)
         },
+        align: "left",
       },
       {
         id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,