Merge remote-tracking branch 'origin/main' into sp/sync-7.2-with-main-7-12

core/src/components/popover/animations/ios.enter.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import {
   calculateWindowAdjustment,
   getArrowDimensions,

core/src/components/popover/animations/ios.leave.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * iOS Popover Leave Animation

core/src/components/popover/animations/md.enter.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
 
 const POPOVER_MD_BODY_PADDING = 12;

core/src/components/popover/animations/md.leave.ts

@@ -1,6 +1,7 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
 import type { Animation } from '../../../interface';
-import { createAnimation } from '../../../utils/animation/animation';
-import { getElementRoot } from '../../../utils/helpers';
 
 /**
  * Md Popover Leave Animation

core/src/components/popover/popover.tsx

@@ -1,11 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-
-import { getIonMode } from '../../global/ionic-global';
-import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
-import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
-import { addEventListener, raf, hasLazyBuild } from '../../utils/helpers';
-import { printIonWarning } from '../../utils/logging';
+import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate';
+import { addEventListener, raf, hasLazyBuild } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import {
   BACKDROP,
   dismiss,
@@ -14,11 +11,14 @@ import {
   prepareOverlay,
   present,
   setOverlayId,
-} from '../../utils/overlays';
+} from '@utils/overlays';
+import { isPlatform } from '@utils/platform';
+import { getClassMap } from '@utils/theme';
+import { deepReady, waitForMount } from '@utils/transition';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
-import { isPlatform } from '../../utils/platform';
-import { getClassMap } from '../../utils/theme';
-import { deepReady, waitForMount } from '../../utils/transition';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';

core/src/components/popover/test/size/popover.e2e.ts

@@ -8,26 +8,38 @@ import { openPopover, screenshotPopover } from '../test.utils';
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: size'), async () => {
-    /**
-     * The popovers have showBackdrop=false so we can open most of them at once
-     * and massively cut down on screenshots taken. The content has its own
-     * backdrop so you can still see the popovers.
-     */
-    // TODO FW-3598
-    test.skip('should calculate popover width based on sizing method', async ({ page }) => {
+    test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/popover/test/size', config);
-      await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
+    });
 
-      const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
+    test.describe('popover: invisible backdrop', async () => {
+      /**
+       * The popovers have showBackdrop=false so we can open most of them at once
+       * and massively cut down on screenshots taken. The content has its own
+       * backdrop so you can still see the popovers.
+       */
+      test('should calculate popover width based on sizing method', async ({ page }) => {
+        await page.setViewportSize(Viewports.tablet.portrait); // avoid popovers overlapping
 
-      for (const trigger of sameTimeTriggers) {
-        await openPopover(page, trigger, true);
-      }
+        const sameTimeTriggers = ['auto-trigger', 'cover-trigger', 'event-trigger'];
 
-      await expect(page).toHaveScreenshot(screenshot(`popover-size`));
+        for (const trigger of sameTimeTriggers) {
+          await openPopover(page, trigger, true);
+        }
 
-      // test this one separately since it would overlap others
-      await screenshotPopover(page, screenshot, 'no-event-trigger', 'size');
+        await expect(page).toHaveScreenshot(screenshot(`popover-size`));
+      });
+    });
+
+    test.describe('popover: visible backdrop', async () => {
+      test('should calculate popover width based on sizing method', async ({ page }) => {
+        /**
+         * This must be tested separately because it's not aimed to be opened at the same time as the others.
+         * Otherwise, the backdrops from the previous popovers would be mounted on top of each other. This is a problem because the following trigger won't be accessible to click.
+         * The mounted backdrops would be in the way and would need to be closed first.
+         */
+        await screenshotPopover(page, screenshot, 'no-event-trigger', 'size');
+      });
     });
   });
 });

core/src/components/popover/utils.ts

@@ -1,4 +1,4 @@
-import { getElementRoot, raf } from '../../utils/helpers';
+import { getElementRoot, raf } from '@utils/helpers';
 
 import type { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from './popover-interface';