Merge remote-tracking branch 'origin/main' into 7.0-sync-09-16-22

CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.7](https://github.com/ionic-team/ionic-framework/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic-framework/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic-framework/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic-framework/issues/18593)
+* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic-framework/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic-framework/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic-framework/issues/25895)
+* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic-framework/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic-framework/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic-framework/issues/25918)
+* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic-framework/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic-framework/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic-framework/issues/25908)
+* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic-framework/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic-framework/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic-framework/issues/24296)
+* **react:** add correct type for CreateAnimation ([#25931](https://github.com/ionic-team/ionic-framework/issues/25931)) ([89d3e3c](https://github.com/ionic-team/ionic-framework/commit/89d3e3c819b282e4d7ce716b9099eaab82ab4de2))
+* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic-framework/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic-framework/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic-framework/issues/25897)
+* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic-framework/issues/25928)) ([777109a](https://github.com/ionic-team/ionic-framework/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic-framework/issues/25893)
+
+
+
+
+
 ## [6.2.6](https://github.com/ionic-team/ionic-framework/compare/v6.2.5...v6.2.6) (2022-09-07)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic/issues/18593)
+
+
+
+
+
 ## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.2.6",
+      "version": "6.2.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.2.6",
+        "@ionic/core": "^6.2.7",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.6.tgz",
-      "integrity": "sha512-79VGvJ33YlCX/rhepfamL2YUQnqu3cruKMo0yFbrhyJWzoF3GTT/p371FHu1e+SdIZsMu/xcn+dkcTxQjEEcdA==",
+      "version": "6.2.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
+      "integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
       "dependencies": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.6.tgz",
-      "integrity": "sha512-79VGvJ33YlCX/rhepfamL2YUQnqu3cruKMo0yFbrhyJWzoF3GTT/p371FHu1e+SdIZsMu/xcn+dkcTxQjEEcdA==",
+      "version": "6.2.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
+      "integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
       "requires": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.2.6",
+    "@ionic/core": "^6.2.7",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/test/README.md

@@ -2,6 +2,26 @@
 
 Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
 
+## Application Cache
+
+Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. When testing changes by directly modifying Ionic's source code in `node_modules`, you may need to manually clear the `.angular` cache and restart the local server every time you make a change. As a result, it may be desirable to disable the `.angular` cache while making changes to the code.
+
+See https://angular.io/cli/cache for more information.
+
+### Disable Cache
+
+```
+ng cache disable
+```
+
+> Note: You may need to manually remove the `.angular` directory once after running this command.
+
+### Enable Cache
+
+```
+ng cache enable
+```
+
 ## Test App Build Structure
 
 Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.

angular/test/base/e2e/src/tabs.spec.ts

@@ -97,15 +97,27 @@ describe('Tabs', () => {
     it('should navigate deep then go home', () => {
       const tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
+      cy.ionPageVisible('app-tabs-tab1-nested');
+      cy.ionPageHidden('app-tabs-tab1');
+
       testTabTitle('Tab 1 - Page 2 (1)');
 
       cy.get('#goto-next').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.get('#tab-button-contact').click();
+      cy.ionPageVisible('app-tabs-tab2');
+      cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
+
       testTabTitle('Tab 2 - Page 1');
 
       cy.get('#tab-button-account').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab2');
+
       testTabTitle('Tab 1 - Page 2 (2)');
       cy.testStack('ion-tabs ion-router-outlet', [
         'app-tabs-tab1',
@@ -235,18 +247,39 @@ describe('Tabs', () => {
     it('should navigate deep then go home and preserve navigation extras', () => {
       let tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
+      cy.ionPageVisible('app-tabs-tab1-nested');
+      cy.ionPageHidden('app-tabs-tab1');
+
       tab = testTabTitle('Tab 1 - Page 2 (1)');
 
       tab.find('#goto-next').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.ionTabClick('Tab Two');
+      cy.ionPageVisible('app-tabs-tab2');
+      cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
+
       testTabTitle('Tab 2 - Page 1');
 
       cy.ionTabClick('Tab One');
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab2');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.ionTabClick('Tab One');
+      /**
+       * Wait for the leaving view to
+       * be unmounted otherwise testTabTitle
+       * may get the leaving view before it
+       * is unmounted.
+       */
+      cy.ionPageVisible('app-tabs-tab1');
+      cy.ionPageDoesNotExist('app-tabs-tab1-nested');
+
       testTabTitle('Tab 1 - Page 1');
 
       testUrlContains(rootUrl);

core/.eslintrc.js

@@ -16,7 +16,8 @@ module.exports = {
     "sourceType": "module"
   },
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "custom-rules"
   ],
   "rules": {
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -29,6 +30,7 @@ module.exports = {
     ],
     "no-useless-catch": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "no-case-declarations": "off"
+    "no-case-declarations": "off",
+    "custom-rules/no-component-on-ready-method": "error"
   }
 };

core/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic/issues/25895)
+* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic/issues/25918)
+* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic/issues/25908)
+* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic/issues/24296)
+* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic/issues/25897)
+* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic/issues/25928)) ([777109a](https://github.com/ionic-team/ionic/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic/issues/25893)
+
+
+
+
+
 ## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
 
 

core/custom-rules/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'no-component-on-ready-method': require('./no-component-on-ready-method.js')
+  }
+}

core/custom-rules/no-component-on-ready-method.js

@@ -0,0 +1,23 @@
+module.exports = {
+    meta: {
+      messages: {
+        noComponentOnReadyMethod: 'Using the componentOnReady method is not allowed. Use the componentOnReady helper utility in src/utils/helpers.ts instead.',
+      },
+    },
+    create(context) {
+      return {
+        CallExpression(node) {
+          /**
+           * We only want to exclude usages of componentOnReady().
+           * Checking for the existence of the componentOnReady method
+           * is a way of determining if we are in a lazy loaded build
+           * or custom elements build, so we want to allow that.
+           */
+          const callee = node.callee;
+          if (callee.type === 'MemberExpression' && callee.property.name === 'componentOnReady') {
+            context.report({ node: node, messageId: 'noComponentOnReadyMethod' });
+          }
+      }
+    }
+  }
+};

core/custom-rules/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "eslint-plugin-custom-rules",
+  "version": "1.0.0",
+  "main": "index.js"
+}

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "@axe-core/puppeteer": "^4.3.2",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@jest/core": "^26.6.3",
+    "@jest/core": "^27.5.1",
     "@playwright/test": "^1.23.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
@@ -48,7 +48,7 @@
     "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",
     "@stencil/vue-output-target": "^0.6.2",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@types/swiper": "5.4.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -58,6 +58,7 @@
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-custom-rules": "file:custom-rules",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "jest": "^26.4.1",
@@ -67,8 +68,8 @@
     "puppeteer": "^10.4.0",
     "rollup": "^2.26.4",
     "sass": "^1.26.10",
-    "serve": "^13.0.2",
-    "stylelint": "^13.6.1",
+    "serve": "^14.0.1",
+    "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",
     "swiper": "5.4.1",
     "typescript": "^4.0.5"

core/src/components.d.ts

@@ -375,11 +375,11 @@ export namespace Components {
          */
         "download": string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -403,11 +403,11 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**
@@ -4136,11 +4136,11 @@ declare namespace LocalJSX {
          */
         "download"?: string | undefined;
         /**
-          * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
+          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -4172,11 +4172,11 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * The button shape.
+          * Set to `"round"` for a button with more rounded corners.
          */
         "shape"?: 'round';
         /**
-          * The button size.
+          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
         "size"?: 'small' | 'default' | 'large';
         /**

core/src/components/avatar/test/basic/avatar.e2e.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('avatar: basic', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('Avatar does not test RTL behaviors. Usages of Avatar in slots are tested in components that use Avatar.');
+
+    await page.goto(`/src/components/avatar/test/basic`);
+
+    const avatar = page.locator('#avatar');
+    const avatarChip = page.locator('#avatar-chip');
+    const avatarItemStart = page.locator('#avatar-item-start');
+    const avatarItemEnd = page.locator('#avatar-item-end');
+
+    expect(await avatar.screenshot()).toMatchSnapshot(`avatar-diff-${page.getSnapshotSettings()}.png`);
+    expect(await avatarChip.screenshot()).toMatchSnapshot(`avatar-chip-diff-${page.getSnapshotSettings()}.png`);
+    expect(await avatarItemStart.screenshot()).toMatchSnapshot(
+      `avatar-item-start-diff-${page.getSnapshotSettings()}.png`
+    );
+    expect(await avatarItemEnd.screenshot()).toMatchSnapshot(`avatar-item-end-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/avatar/test/basic/index.html

@@ -23,25 +23,25 @@
       </ion-header>
 
       <ion-content>
-        <ion-avatar>
+        <ion-avatar id="avatar">
           <img src="/src/components/avatar/test/avatar.svg" />
         </ion-avatar>
 
-        <ion-chip>
+        <ion-chip id="avatar-chip">
           <ion-avatar>
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>
           <ion-label>Chip Avatar</ion-label>
         </ion-chip>
 
-        <ion-item>
+        <ion-item id="avatar-item-start">
           <ion-avatar slot="start">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>
           <ion-label>Item Avatar</ion-label>
         </ion-item>
 
-        <ion-item>
+        <ion-item id="avatar-item-end">
           <ion-avatar slot="end">
             <img src="/src/components/avatar/test/avatar.svg" />
           </ion-avatar>

core/src/components/avatar/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('avatar: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/avatar/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/button.tsx

@@ -53,14 +53,14 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   /**
    * Set to `"block"` for a full-width button or to `"full"` for a full-width button
-   * without left and right borders.
+   * with square corners and no left or right borders.
    */
   @Prop({ reflect: true }) expand?: 'full' | 'block';
 
   /**
-   * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
-   * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
-   * a toolbar, where the default is `"clear"`.
+   * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
+   * for a transparent button with a border, or to `"solid"` for a button with a filled background.
+   * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
    */
   @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
@@ -97,12 +97,16 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   @Prop() rel: string | undefined;
 
   /**
-   * The button shape.
+   * Set to `"round"` for a button with more rounded corners.
    */
   @Prop({ reflect: true }) shape?: 'round';
 
   /**
-   * The button size.
+   * Set to `"small"` for a button with less height and padding, to `"default"`
+   * for a button with the default height and padding, or to `"large"` for a button
+   * with more height and padding. By default the size is unset, unless the button
+   * is inside of an item, where the size is `"small"` by default. Set the size to
+   * `"default"` inside of an item to make it a standard size button.
    */
   @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
 

core/src/components/button/test/anchor/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: anchor', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/anchor?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/basic/button.e2e.ts

@@ -7,7 +7,7 @@ test.describe('button: basic', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
+    expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
 });
 

core/src/components/button/test/basic/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/basic/index.html

@@ -88,9 +88,7 @@
         </p>
 
         <p>
-          <ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)"
-            >Button Disabled</ion-button
-          >
+          <ion-button expand="block" id="disabledButton" disabled>Button Disabled</ion-button>
           <ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
           <ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
         </p>
@@ -125,13 +123,8 @@
 
       function toggleDisabled() {
         var buttonEl = document.getElementById('disabledButton');
-        console.log(buttonEl);
         buttonEl.disabled = !buttonEl.disabled;
       }
-
-      function clickedButton(ev) {
-        console.log('Clicked button', ev);
-      }
     </script>
   </body>
 </html>

core/src/components/button/test/clear/button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: clear', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/clear`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-clear-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/clear/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: clear', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/clear?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/dynamic/e2e.ts

@@ -1,31 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: dynamic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/dynamic?ionic:_testing=true',
-  });
-
-  const compares = [];
-
-  compares.push(await page.compareScreenshot());
-
-  await page.click('#add-item-button');
-
-  compares.push(await page.compareScreenshot('add item button'));
-
-  await page.click('#add-item-divider-button');
-
-  compares.push(await page.compareScreenshot('add item divider button'));
-
-  await page.click('#change-item-button');
-
-  compares.push(await page.compareScreenshot('change item button size'));
-
-  await page.click('#change-item-divider-button');
-
-  compares.push(await page.compareScreenshot('change item divider button size'));
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});

core/src/components/button/test/dynamic/index.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Dynamic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Button - Dynamic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding" id="content" no-bounce>
-        <ion-item id="dynamicItem">
-          <ion-button slot="start">Default</ion-button>
-          <ion-label>Dynamic Button</ion-label>
-          <ion-button id="dynamicItemLarge" slot="end" size="large">Large</ion-button>
-        </ion-item>
-        <ion-button id="add-item-button" color="success" onClick="addButton('dynamicItem')"> Add a Button </ion-button>
-        <ion-button id="change-item-button" color="tertiary" onClick="changeButtonSize('dynamicItemLarge')">
-          Change Button Size
-        </ion-button>
-
-        <ion-item-divider id="dynamicItemDivider">
-          <ion-button slot="start">Default</ion-button>
-          <ion-label>Dynamic Button</ion-label>
-          <ion-button id="dynamicItemDividerLarge" slot="end" size="large">Large</ion-button>
-        </ion-item-divider>
-        <ion-button id="add-item-divider-button" color="success" onClick="addButton('dynamicItemDivider')">
-          Add a Button
-        </ion-button>
-        <ion-button
-          id="change-item-divider-button"
-          color="tertiary"
-          onClick="changeButtonSize('dynamicItemDividerLarge')"
-        >
-          Change Button Size
-        </ion-button>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      function addButton(dynamicId) {
-        var item = document.querySelector('#' + dynamicId);
-        var button = document.createElement('ion-button');
-        button.textContent = 'Button';
-        button.slot = 'start';
-        item.appendChild(button);
-      }
-
-      function changeButtonSize(dynamicId) {
-        var button = document.querySelector('#' + dynamicId);
-        var size = button.size === 'large' ? undefined : 'large';
-        button.size = size;
-      }
-    </script>
-  </body>
-</html>

core/src/components/button/test/expand/button.e2e.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: expand', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('All content takes up the full width, so RTL has no effect.');
+    await page.goto(`/src/components/button/test/expand`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-expand-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/expand/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: expand', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/expand?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/icon/button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: icon', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/icon`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-icon-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/icon/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: icon', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/icon?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/outline/button.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: outline', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/outline`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-outline-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/button/test/outline/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: outline', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/outline?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/button/test/round/button.e2e.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: round', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl('All content takes up the full width, so RTL has no effect.');
+    await page.goto(`/src/components/button/test/round`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-round-${page.getSnapshotSettings()}.png`);
+  });
+});