chore: sync with main

chore: sync with main

core/package.json

@@ -37,14 +37,14 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.2.2",
+    "@capacitor/core": "^5.2.3",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.37.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.7.1",

core/playwright.config.ts

@@ -62,14 +62,16 @@ const config: PlaywrightTestConfig = {
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Fail fast on CI */
-  maxFailures: process.env.CI ? 1 : 0,
-  /* Flaky test should be either addressed or disabled until we can address them */
-  retries: 0,
+  maxFailures: 0,
+  retries: 2,
+  reportSlowTests: null,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [
+    ['html'],
+    ['github']
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

core/src/components.d.ts

@@ -1277,9 +1277,6 @@ export namespace Components {
           * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
-        /**
-          * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
-         */
         "size"?: number;
         /**
           * If `true`, the element will have its spelling and grammar checked.
@@ -5339,9 +5336,6 @@ declare namespace LocalJSX {
           * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
-        /**
-          * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
-         */
         "size"?: number;
         /**
           * If `true`, the element will have its spelling and grammar checked.

core/src/components/header/header.ios.scss

@@ -51,7 +51,7 @@
 }
 
 .header-collapse-condense ion-toolbar:first-of-type {
-  padding-top: 7px;
+  padding-top: 1px;
 
   z-index: 1;
 }

core/src/components/input/input.tsx

@@ -268,9 +268,7 @@ export class Input implements ComponentInterface {
    */
   @Prop() step?: string;
 
-  /**
-   * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
-   */
+  // FW-4914 Remove this property in Ionic 8
   @Prop() size?: number;
 
   /**

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -3,7 +3,6 @@ import { configs, dragElementBy, test } from '@utils/test/playwright';
 
 import { testSlidingItem } from '../test.utils';
 
-// TODO FW-3006
 /**
  * item-sliding doesn't have mode-specific styling
  */
@@ -18,19 +17,12 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
-// TODO FW-3006
 /**
  * This behavior does not vary across modes/directions
  */
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    // mouse gesture is flaky on CI, skip for now
-    test.fixme('should open when swiped', async ({ page, skip }) => {
-      skip.browser(
-        (browserName: string) => browserName !== 'chromium',
-        'dragElementBy is flaky outside of Chrome browsers.'
-      );
-
+    test('should open when swiped', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
       const item = page.locator('#item2');
 
@@ -41,7 +33,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await expect(item).toHaveScreenshot(screenshot(`item-sliding-gesture`));
     });
 
-    test.skip('should not scroll when the item-sliding is swiped', async ({ page, skip }) => {
+    test('should not scroll when the item-sliding is swiped', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
 
       await page.goto(`/src/components/item-sliding/test/basic`, config);

core/src/components/item/item.scss

@@ -2,6 +2,7 @@
 
 // Item
 // --------------------------------------------------
+// TODO: FW-4955
 
 :host {
   /**
@@ -45,10 +46,10 @@
    *
    * @prop --ripple-color: Color of the item ripple effect
    *
-   * @prop --highlight-height: The height of the highlight on the item
-   * @prop --highlight-color-focused: The color of the highlight on the item when focused
-   * @prop --highlight-color-valid: The color of the highlight on the item when valid
-   * @prop --highlight-color-invalid: The color of the highlight on the item when invalid
+   * @prop --highlight-height: The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
+   * @prop --highlight-color-focused: The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
+   * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
+   * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
   --border-radius: 0px;
   --border-width: 0px;

core/src/components/modal/test/can-dismiss/modal-sheet.e2e.ts

@@ -73,7 +73,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await ionModalDidPresent.next();
 
         const modalHeader = page.locator('#modal-header');
-        await dragElementBy(modalHeader, page, 0, -500);
+        await dragElementBy(modalHeader, page, 0, 30);
 
         const modal = page.locator('ion-modal');
         expect(modal).not.toBe(null);

core/src/components/modal/test/card-nav/modal.e2e.ts

@@ -9,12 +9,7 @@ import { CardModalPage } from '../fixtures';
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('card modal - nav'), () => {
     let cardModalPage: CardModalPage;
-    test.beforeEach(async ({ page, skip }) => {
-      skip.browser(
-        (browserName: string) => browserName !== 'chromium',
-        'dragElementBy is flaky outside of Chrome browsers.'
-      );
-
+    test.beforeEach(async ({ page }) => {
       cardModalPage = new CardModalPage(page);
       await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false', config);
     });
@@ -33,7 +28,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       const content = page.locator('.page-two-content');
 
-      await dragElementBy(content, page, 1000, 0, 10);
+      await dragElementBy(content, page, 370, 0, 10);
 
       await ionNavDidChange.next();
     });
@@ -47,7 +42,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionNavDidChange.next();
 
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content');
+      await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content', true, 270);
     });
   });
 });

core/src/components/modal/test/card-refresher/modal.e2e.ts

@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const modal = page.locator('ion-modal');
       const content = (await page.$('ion-modal ion-content'))!;
 
-      await dragElementBy(content, page, 0, 500);
+      await dragElementBy(content, page, 0, 300);
 
       await content.waitForElementState('stable');
 

core/src/components/modal/test/card-scroll-target/modal.e2e.ts

@@ -30,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         await content.evaluate((el: HTMLElement) => (el.scrollTop = 500));
 
-        await dragElementBy(content, page, 0, 500);
+        await dragElementBy(content, page, 0, 300);
 
         await content.waitForElementState('stable');
 

core/src/components/modal/test/card/modal-tablet.e2e.ts

@@ -61,12 +61,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
         const modal = await cardModalPage.openModalByTrigger('#card');
 
-        const content = (await page.$('ion-modal ion-content'))!;
+        const content = page.locator('ion-modal ion-content');
         await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
 
         await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
 
-        await content.waitForElementState('stable');
+        await content.waitFor();
         await expect(modal).toBeVisible();
       });
       test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({
@@ -76,12 +76,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         await page.click('ion-button.replace');
 
-        const content = (await page.$('ion-modal ion-content'))!;
+        const content = page.locator('ion-modal ion-content');
         await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
 
         await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
 
-        await content.waitForElementState('stable');
+        await content.waitFor();
         await expect(modal).toBeVisible();
       });
       test('content should be scrollable after gesture ends', async ({ page }) => {

core/src/components/modal/test/fixtures.ts

@@ -16,7 +16,7 @@ export class CardModalPage {
     this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
   }
   async openModalByTrigger(selector: string) {
-    await this.page.click(selector);
+    await this.page.locator(selector).click();
     await this.ionModalDidPresent.next();
 
     return this.page.locator('ion-modal');

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -129,7 +129,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const header = page.locator('.modal-sheet ion-header');
 
-        await dragElementBy(header, page, 0, 150);
+        await dragElementBy(header, page, 0, 125);
 
         await ionBreakpointDidChange.next();
 

core/src/components/range/test/legacy/basic/range.e2e.ts

@@ -77,13 +77,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
 
-      const box = (await knobEl.boundingBox())!;
-      const centerX = box.x + box.width / 2;
-      const centerY = box.y + box.height / 2;
-
-      await page.mouse.move(centerX, centerY);
-      await page.mouse.down();
-      await page.mouse.move(centerX + 30, centerY);
+      await dragElementBy(knobEl, page, 30, 0, undefined, undefined, false);
 
       /**
        * Do not use scrollToBottom() or other scrolling methods