chore(popover): refactor remove arrow-el (#60)

Author: rdlabo

src/popover/animations/ios.enter.ts

@@ -1,7 +1,7 @@
-import { createAnimation, isPlatform } from '@ionic/core';
+import { createAnimation } from '@ionic/core';
 import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
 import { getElementRoot } from '../../utils';
-import { calculateWindowAdjustment, getArrowDimensions, getPopoverDimensions, getPopoverPosition, shouldShowArrow } from '../utils';
+import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
 
 const POPOVER_IOS_BODY_PADDING = 5;
 export const POPOVER_IOS_BODY_MARGIN = 8;
@@ -19,11 +19,9 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const root = getElementRoot(baseEl);
   const contentEl = root.querySelector('.popover-content') as HTMLElement;
-  const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
 
   const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
   const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
-  const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
 
   const isReplace = ((): boolean => {
     if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
@@ -42,43 +40,27 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     originY: 'top',
   };
 
-  const results = getPopoverPosition(
-    isRTL,
-    contentWidth,
-    contentHeight,
-    arrowWidth,
-    arrowHeight,
-    reference,
-    side,
-    align,
-    defaultPosition,
-    trigger,
-    ev,
-  );
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, reference, side, align, defaultPosition, trigger, ev);
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
   const margin = size === 'cover' ? 0 : 25;
 
-  const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass } =
-    calculateWindowAdjustment(
-      side,
-      results.top,
-      results.left,
-      padding,
-      bodyWidth,
-      bodyHeight,
-      contentWidth,
-      contentHeight,
-      margin,
-      results.originX,
-      results.originY,
-      results.referenceCoordinates,
-      results.arrowTop,
-      results.arrowLeft,
-      arrowHeight,
-      referenceSizeEl.getBoundingClientRect(),
-      isReplace,
-    );
+  const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, addPopoverBottomClass } = calculateWindowAdjustment(
+    side,
+    results.top,
+    results.left,
+    padding,
+    bodyWidth,
+    bodyHeight,
+    contentWidth,
+    contentHeight,
+    margin,
+    results.originX,
+    results.originY,
+    results.referenceCoordinates,
+    referenceSizeEl.getBoundingClientRect(),
+    isReplace,
+  );
 
   const baseAnimation = createAnimation();
   const backdropAnimation = createAnimation();
@@ -97,13 +79,12 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   // In Chromium, if the wrapper animates, the backdrop filter doesn't work.
   // The Chromium team stated that this behavior is expected and not a bug. The element animating opacity creates a backdrop root for the backdrop-filter.
-  // To get around this, instead of animating the wrapper, animate both the arrow and content.
+  // To get around this, instead of animating the wrapper, animate content.
   // https://bugs.chromium.org/p/chromium/issues/detail?id=1148826
   contentAnimation
     .easing('cubic-bezier(0, 1, 0.22, 1)')
     .delay(100)
     .duration(400)
-    .addElement(root.querySelector('.popover-arrow')!)
     .addElement(root.querySelector('.popover-content')!)
     .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
     .beforeAddWrite(() => {
@@ -114,7 +95,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     })
     .fromTo('transform', 'scale(0)', 'scale(1)')
     .fromTo('opacity', 0.01, 1);
-  // TODO(FW-4376) Ensure that arrow also blurs when translucent
 
   if (isReplace) {
     targetAnimation
@@ -159,18 +139,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
       contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
       contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
       contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
-
-      if (arrowEl !== null) {
-        const didAdjustBounds = results.top !== top || results.left !== left;
-        const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
-
-        if (showArrow) {
-          arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
-          arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
-        } else {
-          arrowEl.style.setProperty('display', 'none');
-        }
-      }
     })
     .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
 };