@ionic/core 7.3.3-dev.11693454416.1cb6a7ec → 7.3.3-dev.11693533652.1969cc78

package/dist/collection/components/modal/modal.js

@@ -5,6 +5,7 @@ import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, printIonContentErrorMsg } from "../../utils/content/index";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
 import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, } from "../../utils/overlays";
@@ -32,6 +33,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
  */
 export class Modal {
   constructor() {
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.coreDelegate = CoreDelegate();
     this.isSheetModal = false;
@@ -196,29 +198,25 @@ export class Modal {
    * Present the modal overlay after it has been created.
    */
   async present() {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
     const { presentingElement, el } = this;
-    /**
-     * When using an inline modal
-     * and dismissing a modal it is possible to
-     * quickly present the modal while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     /**
      * If the modal is presented multiple times (inline modals), we
      * need to reset the current breakpoint to the initial breakpoint.
      */
     this.currentBreakpoint = this.initialBreakpoint;
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
     this.ionMount.emit();
+    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -242,7 +240,7 @@ export class Modal {
       await waitForMount();
     }
     writeTask(() => this.el.classList.add('show-modal'));
-    this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
@@ -289,14 +287,13 @@ export class Modal {
       this.statusBarStyle = await StatusBar.getStyle();
       setCardStatusBarDark();
     }
-    await this.currentTransition;
     if (this.isSheetModal) {
       this.initSheetGesture();
     }
     else if (hasCardModal) {
       this.initSwipeToClose();
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   initSwipeToClose() {
     var _a;
@@ -386,12 +383,19 @@ export class Modal {
     if (this.gestureAnimationDismissing && role !== GESTURE) {
       return false;
     }
+    /**
+     * Because the canDismiss check below is async,
+     * we need to claim a lock before the check happens,
+     * in case the dismiss transition does run.
+     */
+    const unlock = await this.lockController.lock();
     /**
      * If a canDismiss handler is responsible
      * for calling the dismiss method, we should
      * not run the canDismiss check again.
      */
     if (role !== 'handler' && !(await this.checkCanDismiss(data, role))) {
+      unlock();
       return false;
     }
     const { presentingElement } = this;
@@ -409,24 +413,12 @@ export class Modal {
       window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
       this.keyboardOpenCallback = undefined;
     }
-    /**
-     * When using an inline modal
-     * and presenting a modal it is possible to
-     * quickly dismiss the modal while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const enteringAnimation = activeAnimations.get(this) || [];
-    this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
+    const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
     });
-    const dismissed = await this.currentTransition;
     if (dismissed) {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
@@ -440,8 +432,8 @@ export class Modal {
       enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
-    this.currentTransition = undefined;
     this.animation = undefined;
+    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/nav-link/nav-link.js

@@ -6,13 +6,7 @@ import { navLink } from "./nav-link-utils";
 export class NavLink {
   constructor() {
     this.onClick = () => {
-      const { el } = this;
-      const button = el.querySelector('button,ion-button,a');
-      if (button === null || button === void 0 ? void 0 : button.hasAttribute('disabled')) {
-        // Do not navigate if the button is disabled
-        return;
-      }
-      return navLink(el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
+      return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
     };
     this.component = undefined;
     this.componentProps = undefined;

package/dist/collection/components/picker/picker.js

@@ -3,6 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -15,6 +16,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 export class Picker {
   constructor() {
     this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.onBackdropTap = () => {
       this.dismiss(undefined, BACKDROP);
@@ -81,24 +83,13 @@ export class Picker {
    * Present the picker overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline picker
-     * and dismissing an picker it is possible to
-     * quickly present the picker while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
     }
+    unlock();
   }
   /**
    * Dismiss the picker overlay after it has been presented.
@@ -110,14 +101,15 @@ export class Picker {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/popover/popover.js

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
@@ -29,6 +30,7 @@ export class Popover {
   constructor() {
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
+    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -202,28 +204,24 @@ export class Popover {
    * was dispatched.
    */
   async present(event) {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
-    /**
-     * When using an inline popover
-     * and dismissing a popover it is possible to
-     * quickly present the popover while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
+    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
-    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -246,7 +244,7 @@ export class Popover {
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -254,8 +252,6 @@ export class Popover {
       side: this.side,
       align: this.alignment,
     });
-    await this.currentTransition;
-    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -265,6 +261,7 @@ export class Popover {
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
+    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -275,23 +272,12 @@ export class Popover {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    /**
-     * When using an inline popover
-     * and presenting a popover it is possible to
-     * quickly dismiss the popover while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-    const shouldDismiss = await this.currentTransition;
+    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -309,7 +295,7 @@ export class Popover {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    this.currentTransition = undefined;
+    unlock();
     return shouldDismiss;
   }
   /**

package/dist/collection/components/popover/test/async/popover.e2e.js

@@ -0,0 +1,42 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: alignment with async component'), async () => {
+    test('should align popover centered with button when component is added async', async ({ page }) => {
+      await page.goto('/src/components/popover/test/async', config);
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const button = page.locator('#button');
+      await button.click();
+      await ionPopoverDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`popover-async`));
+    });
+    /**
+     * Framework delegate should fall back to returning the host
+     * component when no child content is passed otherwise
+     * the overlay will get stuck when trying to re-present.
+     */
+    test('should open popover even if nothing was passed', async ({ page }) => {
+      await page.setContent(`
+        <ion-popover></ion-popover>
+      `, config);
+      const popover = page.locator('ion-popover');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+      await popover.evaluate((el) => el.dismiss());
+      await ionPopoverDidDismiss.next();
+      await expect(popover).toBeHidden();
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+    });
+  });
+});

package/dist/collection/components/router-outlet/router-outlet.js

@@ -174,6 +174,7 @@ export class RouterOutlet {
     this.ionNavDidChange.emit();
     return true;
   }
+  // TODO: FW-5048 - Remove this code in favor of using lock controller from utils
   async lock() {
     const p = this.waitPromise;
     let resolve;

package/dist/collection/components/textarea/test/bottom-content/textarea.e2e.js

@@ -41,7 +41,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea class="ion-invalid ion-touched custom-textarea" label="my label" error-text="my error"></ion-textarea>
         `, config);
         const errorText = page.locator('ion-textarea .error-text');
-        expect(await errorText.screenshot()).toMatchSnapshot(screenshot(`textarea-error-custom-color`));
+        await expect(errorText).toHaveScreenshot(screenshot(`textarea-error-custom-color`));
       });
     });
     test.describe('textarea: hint text rendering', () => {
@@ -49,12 +49,12 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering helper text', async ({ page }) => {
           await page.setContent(`<ion-textarea helper-text="my helper" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-helper`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-helper`));
         });
         test('should not have visual regressions when rendering error text', async ({ page }) => {
           await page.setContent(`<ion-textarea class="ion-invalid ion-touched" error-text="my helper" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-error`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-error`));
         });
       });
     });
@@ -102,17 +102,17 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering counter', async ({ page }) => {
           await page.setContent(`<ion-textarea counter="true" maxlength="20" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter`));
         });
         test('should not have visual regressions when rendering counter with helper text', async ({ page }) => {
           await page.setContent(`<ion-textarea label="my textarea" counter="true" maxlength="20" helper-text="my helper"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter-helper-text`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter-helper-text`));
         });
         test('should not have visual regressions when rendering counter with error text', async ({ page }) => {
           await page.setContent(`<ion-textarea class="ion-invalid ion-touched" label="my textarea" counter="true" maxlength="20" error-text="my error"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter-error-text`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter-error-text`));
         });
       });
     });

package/dist/collection/components/textarea/test/card/textarea.e2e.js

@@ -16,7 +16,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-card>
       `, config);
       const card = page.locator('ion-card');
-      expect(await card.screenshot()).toMatchSnapshot(screenshot(`textarea-card`));
+      await expect(card).toHaveScreenshot(screenshot(`textarea-card`));
     });
   });
 });

package/dist/collection/components/textarea/test/color/textarea.e2e.js

@@ -22,35 +22,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-start`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-end`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-fixed`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-color-stacked`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-color-stacked`));
       });
     });
     test.describe('textarea: fill solid', () => {
@@ -59,35 +59,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-start`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-end`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-fixed`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="solid" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-color-stacked`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-color-stacked`));
       });
     });
     test.describe('textarea: fill outline', () => {
@@ -96,35 +96,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-start`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-end`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-fixed`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-textarea fill="outline" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-color-stacked`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-color-stacked`));
       });
     });
   });

package/dist/collection/components/textarea/test/fill/textarea.e2e.js

@@ -21,7 +21,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-solid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -36,7 +36,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-solid-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-solid-label-floating`));
       });
       test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(`
@@ -51,7 +51,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-solid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -75,7 +75,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-solid-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid-custom`));
       });
     });
     test.describe('textarea: fill outline', () => {
@@ -91,7 +91,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -106,7 +106,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-label-floating`));
       });
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(`
@@ -121,7 +121,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -145,7 +145,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-outline-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
       });
     });
   });
@@ -179,7 +179,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-slotted-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-slotted-label`));
     });
     test('should render the notch correctly with a slotted label after the textarea was originally hidden', async ({ page, }) => {
       await page.setContent(`
@@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `, config);
       const textarea = page.locator('ion-textarea');
       await textarea.evaluate((el) => el.style.removeProperty('display'));
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
     });
   });
 });