refactor(react-router): migrate stack manager to hooks

Issue number: resolves #27873

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Custom animations are not always used when the `handleNavigateBack`
method is called. This impacts both Ionic React and Ionic Vue.

While we do set the `incomingRouteParams` with the animation:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L247-L252)

We do sometimes call `handleNavigate`:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L273-L279)

This `handleNavigate` method sets `incomingRouteParams` again:
a08a5894ba/packages/react-router/src/ReactRouter/IonRouter.tsx (L225-L230)

Since we do not re-pass `routeAnimation`, that field gets set to
`undefined` and the custom animation does not get used.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Custom animation is now passed to `handleNavigate`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.2.2-dev.11690810887.180000d1`

.github/dependabot.yml

@@ -14,3 +14,7 @@ updates:
       - dependency-name: "@stencil/sass"
       - dependency-name: "@stencil/vue-output-target"
       - dependency-name: "ionicons"
+      - dependency-name: "@capacitor/core"
+      - dependency-name: "@capacitor/keyboard"
+      - dependency-name: "@capacitor/haptics"
+      - dependency-name: "@capacitor/status-bar"

CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26)
+
+
+### Bug Fixes
+
+* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722)
+* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830)
+
+
+
+
+
+# [7.2.0](https://github.com/ionic-team/ionic-framework/compare/v7.1.4...v7.2.0) (2023-07-19)
+
+
+### Features
+
+* **angular:** support binding routing data to component inputs ([#27694](https://github.com/ionic-team/ionic-framework/issues/27694)) ([90f4124](https://github.com/ionic-team/ionic-framework/commit/90f41243d9404caaad99076965b7cd649ddf7f33)), closes [#27476](https://github.com/ionic-team/ionic-framework/issues/27476)
+* **button:** allow button to increase in height when text wraps ([#27547](https://github.com/ionic-team/ionic-framework/issues/27547)) ([6fe716f](https://github.com/ionic-team/ionic-framework/commit/6fe716fd1320935632854e5d4f741b57801bda92))
+* **searchbar:** add name property ([#27737](https://github.com/ionic-team/ionic-framework/issues/27737)) ([7131037](https://github.com/ionic-team/ionic-framework/commit/71310372c94862342d607007ece127340df92a8c)), closes [#27675](https://github.com/ionic-team/ionic-framework/issues/27675)
+
+
+
+
+
+## [7.1.4](https://github.com/ionic-team/ionic-framework/compare/v7.1.3...v7.1.4) (2023-07-19)
+
+
+### Bug Fixes
+
+* **angular:** menu button is enabled with Angular Universal builds ([#27814](https://github.com/ionic-team/ionic-framework/issues/27814)) ([2cf1a0b](https://github.com/ionic-team/ionic-framework/commit/2cf1a0bcae7d766aa25951c53470876f9569906c)), closes [#27524](https://github.com/ionic-team/ionic-framework/issues/27524) [#22206](https://github.com/ionic-team/ionic-framework/issues/22206)
+* **button:** submit form when pressing enter key ([#27790](https://github.com/ionic-team/ionic-framework/issues/27790)) ([b78af75](https://github.com/ionic-team/ionic-framework/commit/b78af7598f19ca5e1b440ddc0091a62d86321066)), closes [#19368](https://github.com/ionic-team/ionic-framework/issues/19368)
+* **radio, checkbox, toggle:** add top and bottom margins when in ion-item ([#27788](https://github.com/ionic-team/ionic-framework/issues/27788)) ([35f0ec5](https://github.com/ionic-team/ionic-framework/commit/35f0ec581a55e0cb080f0793fb94d3e424c06d4d)), closes [#27498](https://github.com/ionic-team/ionic-framework/issues/27498)
+* safari no longer adjusts text in landscape ([#27787](https://github.com/ionic-team/ionic-framework/issues/27787)) ([66584b0](https://github.com/ionic-team/ionic-framework/commit/66584b03d0b33507170f954009998c72fb3f7755)), closes [#27782](https://github.com/ionic-team/ionic-framework/issues/27782)
+* **textarea:** stacked/floating textarea size is correct on safari ([#27766](https://github.com/ionic-team/ionic-framework/issues/27766)) ([2cb7013](https://github.com/ionic-team/ionic-framework/commit/2cb701395487c6a0304400f6b821659ae6def820)), closes [#27345](https://github.com/ionic-team/ionic-framework/issues/27345)
+
+
+
+
+
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+
+### Bug Fixes
+
+* avoid unresolved import warning on stencil apps ([#27765](https://github.com/ionic-team/ionic-framework/issues/27765)) ([2085025](https://github.com/ionic-team/ionic-framework/commit/2085025644f075e63d04bece56eca4f2beeadbb6)), closes [#27762](https://github.com/ionic-team/ionic-framework/issues/27762)
+* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773)
+
+
+
+
+
 ## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
 
 

core/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26)
+
+
+### Bug Fixes
+
+* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722)
+* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830)
+
+
+
+
+
+# [7.2.0](https://github.com/ionic-team/ionic-framework/compare/v7.1.4...v7.2.0) (2023-07-19)
+
+
+### Features
+
+* **button:** allow button to increase in height when text wraps ([#27547](https://github.com/ionic-team/ionic-framework/issues/27547)) ([6fe716f](https://github.com/ionic-team/ionic-framework/commit/6fe716fd1320935632854e5d4f741b57801bda92))
+* **searchbar:** add name property ([#27737](https://github.com/ionic-team/ionic-framework/issues/27737)) ([7131037](https://github.com/ionic-team/ionic-framework/commit/71310372c94862342d607007ece127340df92a8c)), closes [#27675](https://github.com/ionic-team/ionic-framework/issues/27675)
+
+
+
+
+
+## [7.1.4](https://github.com/ionic-team/ionic-framework/compare/v7.1.3...v7.1.4) (2023-07-19)
+
+
+### Bug Fixes
+
+* **angular:** menu button is enabled with Angular Universal builds ([#27814](https://github.com/ionic-team/ionic-framework/issues/27814)) ([2cf1a0b](https://github.com/ionic-team/ionic-framework/commit/2cf1a0bcae7d766aa25951c53470876f9569906c)), closes [#27524](https://github.com/ionic-team/ionic-framework/issues/27524) [#22206](https://github.com/ionic-team/ionic-framework/issues/22206)
+* **button:** submit form when pressing enter key ([#27790](https://github.com/ionic-team/ionic-framework/issues/27790)) ([b78af75](https://github.com/ionic-team/ionic-framework/commit/b78af7598f19ca5e1b440ddc0091a62d86321066)), closes [#19368](https://github.com/ionic-team/ionic-framework/issues/19368)
+* **radio, checkbox, toggle:** add top and bottom margins when in ion-item ([#27788](https://github.com/ionic-team/ionic-framework/issues/27788)) ([35f0ec5](https://github.com/ionic-team/ionic-framework/commit/35f0ec581a55e0cb080f0793fb94d3e424c06d4d)), closes [#27498](https://github.com/ionic-team/ionic-framework/issues/27498)
+* safari no longer adjusts text in landscape ([#27787](https://github.com/ionic-team/ionic-framework/issues/27787)) ([66584b0](https://github.com/ionic-team/ionic-framework/commit/66584b03d0b33507170f954009998c72fb3f7755)), closes [#27782](https://github.com/ionic-team/ionic-framework/issues/27782)
+* **textarea:** stacked/floating textarea size is correct on safari ([#27766](https://github.com/ionic-team/ionic-framework/issues/27766)) ([2cb7013](https://github.com/ionic-team/ionic-framework/commit/2cb701395487c6a0304400f6b821659ae6def820)), closes [#27345](https://github.com/ionic-team/ionic-framework/issues/27345)
+
+
+
+
+
+## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12)
+
+
+### Bug Fixes
+
+* avoid unresolved import warning on stencil apps ([#27765](https://github.com/ionic-team/ionic-framework/issues/27765)) ([2085025](https://github.com/ionic-team/ionic-framework/commit/2085025644f075e63d04bece56eca4f2beeadbb6)), closes [#27762](https://github.com/ionic-team/ionic-framework/issues/27762)
+* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773)
+
+
+
+
+
 ## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06)
 
 

core/api.txt

@@ -1157,6 +1157,7 @@ ion-searchbar,prop,disabled,boolean,false,false,false
 ion-searchbar,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
+ion-searchbar,prop,name,string,this.inputId,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
 ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false

core/package-lock.json

@@ -1,29 +1,33 @@
 {
   "name": "@ionic/core",
-  "version": "7.1.2",
+  "version": "7.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.1.2",
+      "version": "7.2.1",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.4.1",
+        "@stencil/core": "^3.4.0",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
+        "@capacitor/core": "^5.2.2",
+        "@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.35.1",
+        "@playwright/test": "^1.36.2",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.7.1",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.4",
+        "@stencil/sass": "^3.0.5",
         "@stencil/vue-output-target": "^0.8.6",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
@@ -602,6 +606,42 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@capacitor/core": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.2.tgz",
+      "integrity": "sha512-3jKECZC5+YD2rljMZm1e/K3AYyoxUmLDZCyofTPbRYPBSI0wJh5ZCkX+XIGzNM0o/Wokl3Voa1JB8xsLC0MPxA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@capacitor/haptics": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
+      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
+      "dev": true,
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
+    "node_modules/@capacitor/keyboard": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
+      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
+      "dev": true,
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
+    "node_modules/@capacitor/status-bar": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
+      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
+      "dev": true,
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1501,13 +1541,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
-      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "version": "1.36.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.2.tgz",
+      "integrity": "sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.35.1"
+        "playwright-core": "1.36.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1594,9 +1634,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
-      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
+      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1615,10 +1655,14 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
-      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz",
+      "integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==",
       "dev": true,
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
+      },
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
@@ -8150,9 +8194,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "version": "1.36.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.2.tgz",
+      "integrity": "sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -10743,6 +10787,36 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "@capacitor/core": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.2.tgz",
+      "integrity": "sha512-3jKECZC5+YD2rljMZm1e/K3AYyoxUmLDZCyofTPbRYPBSI0wJh5ZCkX+XIGzNM0o/Wokl3Voa1JB8xsLC0MPxA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "@capacitor/haptics": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
+      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@capacitor/keyboard": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
+      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
+      "dev": true,
+      "requires": {}
+    },
+    "@capacitor/status-bar": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
+      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
+      "dev": true,
+      "requires": {}
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -11381,14 +11455,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
-      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "version": "1.36.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.2.tgz",
+      "integrity": "sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.35.1"
+        "playwright-core": "1.36.2"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11450,9 +11524,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.1.tgz",
-      "integrity": "sha512-7rjOmM0W9K5op2gtOQRLERGH1155rv2fm6ppxOzYqqG8ISct4m9skp5XgUBYPu+GSPsJFdRuCIQs0IuVsG/7+g=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.4.0.tgz",
+      "integrity": "sha512-kEtPtV6QegME8YgMjWrhS7KktItbhqOpAuK9aXypDdI/7bLU9iM/4DtnQGWY/DARBophk+XRBfNXcE62Bmi0dw=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -11462,9 +11536,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
-      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz",
+      "integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==",
       "dev": true,
       "requires": {}
     },
@@ -16258,9 +16332,9 @@
       }
     },
     "playwright-core": {
-      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "version": "1.36.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.2.tgz",
+      "integrity": "sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.1.2",
+  "version": "7.2.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,21 +31,25 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.4.1",
+    "@stencil/core": "^3.4.0",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
+    "@capacitor/core": "^5.2.2",
+    "@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.35.1",
+    "@playwright/test": "^1.36.2",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.7.1",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.4",
+    "@stencil/sass": "^3.0.5",
     "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",

core/src/components.d.ts

@@ -2176,7 +2176,7 @@ export namespace Components {
          */
         "side": PositionSide;
         /**
-          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover.
+          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
          */
         "size": PopoverSize;
         /**
@@ -2578,6 +2578,10 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * If used in a form, set the name of the control, which is submitted with the form data.
+         */
+        "name": string;
         /**
           * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          */
@@ -6185,7 +6189,7 @@ declare namespace LocalJSX {
          */
         "side"?: PositionSide;
         /**
-          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover.
+          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
          */
         "size"?: PopoverSize;
         /**
@@ -6625,6 +6629,10 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * If used in a form, set the name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
         /**
           * Emitted when the input loses focus.
          */

core/src/components/button/button.ios.scss

@@ -16,7 +16,7 @@
 
   @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
 
-  height: #{$button-ios-height};
+  min-height: #{$button-ios-min-height};
 
   font-size: #{$button-ios-font-size};
   font-weight: #{$button-ios-font-weight};
@@ -92,7 +92,7 @@
   --padding-end: #{$button-ios-large-padding-end};
   --padding-bottom: #{$button-ios-large-padding-bottom};
 
-  height: #{$button-ios-large-height};
+  min-height: #{$button-ios-large-min-height};
 
   font-size: #{$button-ios-large-font-size};
 }
@@ -104,11 +104,16 @@
   --padding-end: #{$button-ios-small-padding-end};
   --padding-bottom: #{$button-ios-small-padding-bottom};
 
-  height: #{$button-ios-small-height};
+  min-height: #{$button-ios-small-min-height};
 
   font-size: #{$button-ios-small-font-size};
 }
 
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+
 
 // iOS Round Button
 // --------------------------------------------------

core/src/components/button/button.ios.vars.scss

@@ -16,7 +16,7 @@ $button-ios-margin-bottom:                            4px !default;
 $button-ios-margin-start:                             2px !default;
 
 /// @prop - Padding top of the button
-$button-ios-padding-top:                              0 !default;
+$button-ios-padding-top:                              13px !default;
 
 /// @prop - Padding end of the button
 $button-ios-padding-end:                              1em !default;
@@ -27,8 +27,8 @@ $button-ios-padding-bottom:                           $button-ios-padding-top !d
 /// @prop - Padding start of the button
 $button-ios-padding-start:                            $button-ios-padding-end !default;
 
-/// @prop - Height of the button
-$button-ios-height:                                   3.1em !default;
+/// @prop - Minimum height of the button
+$button-ios-min-height:                               3.1em !default;
 
 /// @prop - Border radius of the button
 $button-ios-border-radius:                            14px !default;
@@ -65,7 +65,7 @@ $button-ios-opacity-disabled:                         .5 !default;
 // --------------------------------------------------
 
 /// @prop - Padding top of the large button
-$button-ios-large-padding-top:                        0 !default;
+$button-ios-large-padding-top:                        17px !default;
 
 /// @prop - Padding end of the large button
 $button-ios-large-padding-end:                        1em !default;
@@ -76,8 +76,8 @@ $button-ios-large-padding-bottom:                     $button-ios-large-padding-
 /// @prop - Padding start of the large button
 $button-ios-large-padding-start:                      $button-ios-large-padding-end !default;
 
-/// @prop - Height of the large button
-$button-ios-large-height:                             3.1em !default;
+/// @prop - Minimum height of the large button
+$button-ios-large-min-height:                         3.1em !default;
 
 /// @prop - Border radius of the large button
 $button-ios-large-border-radius:                      16px !default;
@@ -90,7 +90,7 @@ $button-ios-large-font-size:                          20px !default;
 // --------------------------------------------------
 
 /// @prop - Padding top of the small button
-$button-ios-small-padding-top:                        0 !default;
+$button-ios-small-padding-top:                        4px !default;
 
 /// @prop - Padding end of the small button
 $button-ios-small-padding-end:                        .9em !default;
@@ -101,8 +101,8 @@ $button-ios-small-padding-bottom:                     $button-ios-small-padding-
 /// @prop - Padding start of the small button
 $button-ios-small-padding-start:                      $button-ios-small-padding-end !default;
 
-/// @prop - Height of the small button
-$button-ios-small-height:                             2.1em !default;
+/// @prop - Minimum height of the small button
+$button-ios-small-min-height:                         2.1em !default;
 
 /// @prop - Border radius of the small button
 $button-ios-small-border-radius:                      6px !default;

core/src/components/button/button.md.scss

@@ -16,7 +16,7 @@
 
   @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
 
-  height: #{$button-md-height};
+  min-height: #{$button-md-min-height};
 
   font-size: #{$button-md-font-size};
   font-weight: #{$button-md-font-weight};
@@ -97,7 +97,7 @@
   --padding-end: #{$button-md-large-padding-end};
   --padding-bottom: #{$button-md-large-padding-bottom};
 
-  height: #{$button-md-large-height};
+  min-height: #{$button-md-large-min-height};
 
   font-size: #{$button-md-large-font-size};
 }
@@ -108,11 +108,16 @@
   --padding-end: #{$button-md-small-padding-end};
   --padding-bottom: #{$button-md-small-padding-bottom};
 
-  height: #{$button-md-small-height};
+  min-height: #{$button-md-small-min-height};
 
   font-size: #{$button-md-small-font-size};
 }
 
+:host(.button-has-icon-only) {
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+
 
 // MD strong Button
 // --------------------------------------------------

core/src/components/button/button.md.vars.scss

@@ -16,19 +16,19 @@ $button-md-margin-bottom:                               4px !default;
 $button-md-margin-start:                                2px !default;
 
 /// @prop - Padding top of the button
-$button-md-padding-top:                                 0 !default;
+$button-md-padding-top:                                 8px !default;
 
 /// @prop - Padding end of the button
 $button-md-padding-end:                                 1.1em !default;
 
 /// @prop - Padding bottom of the button
-$button-md-padding-bottom:                              0 !default;
+$button-md-padding-bottom:                              $button-md-padding-top !default;
 
 /// @prop - Padding start of the button
 $button-md-padding-start:                               1.1em !default;
 
-/// @prop - Height of the button
-$button-md-height:                                      36px !default;
+/// @prop - Minimum height of the button
+$button-md-min-height:                                  36px !default;
 
 /// @prop - Border radius of the button
 $button-md-border-radius:                               4px !default;
@@ -63,7 +63,7 @@ $button-md-opacity-disabled:                           .5 !default;
 // --------------------------------------------------
 
 /// @prop - Padding top of the large button
-$button-md-large-padding-top:                           0 !default;
+$button-md-large-padding-top:                           14px !default;
 
 /// @prop - Padding end of the large button
 $button-md-large-padding-end:                           1em !default;
@@ -74,8 +74,8 @@ $button-md-large-padding-bottom:                        $button-md-large-padding
 /// @prop - Padding start of the large button
 $button-md-large-padding-start:                         $button-md-large-padding-end !default;
 
-/// @prop - Height of the large button
-$button-md-large-height:                                2.8em !default;
+/// @prop - Minimum height of the large button
+$button-md-large-min-height:                            2.8em !default;
 
 /// @prop - Font size of the large button
 $button-md-large-font-size:                             20px !default;
@@ -85,7 +85,7 @@ $button-md-large-font-size:                             20px !default;
 // --------------------------------------------------
 
 /// @prop - Padding top of the small button
-$button-md-small-padding-top:                           0 !default;
+$button-md-small-padding-top:                           4px !default;
 
 /// @prop - Padding end of the small button
 $button-md-small-padding-end:                           .9em !default;
@@ -96,8 +96,8 @@ $button-md-small-padding-bottom:                        $button-md-small-padding
 /// @prop - Padding start of the small button
 $button-md-small-padding-start:                         $button-md-small-padding-end !default;
 
-/// @prop - Height of the small button
-$button-md-small-height:                                2.1em !default;
+/// @prop - Minimum height of the small button
+$button-md-small-min-height:                            2.1em !default;
 
 /// @prop - Font size of the small button
 $button-md-small-font-size:                             13px !default;

core/src/components/button/button.scss

@@ -55,8 +55,8 @@
 
   text-align: center;
   text-decoration: none;
-  text-overflow: ellipsis;
 
+  // TODO(FW-4599): change to normal
   white-space: nowrap;
 
   user-select: none;
@@ -114,8 +114,6 @@
 :host(.button-block) .button-native {
   @include margin-horizontal(0);
 
-  display: block;
-
   width: 100%;
 
   clear: both;
@@ -138,8 +136,6 @@
 :host(.button-full) .button-native {
   @include margin-horizontal(0);
 
-  display: block;
-
   width: 100%;
 
   contain: content;
@@ -159,12 +155,17 @@
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include text-inherit();
 
-  display: block;
+  display: flex;
+
   position: relative;
 
+  align-items: center;
+
   width: 100%;
   height: 100%;
 
+  min-height: inherit;
+
   transition: var(--transition);
 
   border-width: var(--border-width);
@@ -210,11 +211,20 @@
 }
 
 
+// Button Slots
+// --------------------------------------------------
+
+::slotted([slot=start]),
+::slotted([slot=end]) {
+  flex-shrink: 0;
+}
+
+
 // Button Icons
 // --------------------------------------------------
 
 ::slotted(ion-icon) {
-  font-size: 1.4em;
+  font-size: 1.35em;
   pointer-events: none;
 }
 

core/src/components/button/button.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
@@ -32,6 +32,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private inItem = false;
   private inListHeader = false;
   private inToolbar = false;
+  private formButtonEl: HTMLButtonElement | null = null;
+  private formEl: HTMLFormElement | null = null;
   private inheritedAttributes: Attributes = {};
 
   @Element() el!: HTMLElement;
@@ -52,6 +54,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    * If `true`, the user cannot interact with the button.
    */
   @Prop({ reflect: true }) disabled = false;
+  @Watch('disabled')
+  disabledChanged() {
+    const { disabled } = this;
+    if (this.formButtonEl) {
+      this.formButtonEl.disabled = disabled;
+    }
+  }
 
   /**
    * Set to `"block"` for a full-width button or to `"full"` for a full-width button
@@ -144,6 +153,22 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    */
   @Event() ionBlur!: EventEmitter<void>;
 
+  connectedCallback(): void {
+    // Allow form to be submitted through `ion-button`
+    if (this.type !== 'button' && hasShadowDom(this.el)) {
+      this.formEl = this.findForm();
+      if (this.formEl) {
+        // Create a hidden native button inside of the form
+        this.formButtonEl = document.createElement('button');
+        this.formButtonEl.type = this.type;
+        this.formButtonEl.style.display = 'none';
+        // Only submit if the button is not disabled.
+        this.formButtonEl.disabled = this.disabled;
+        this.formEl.appendChild(this.formButtonEl);
+      }
+    }
+  }
+
   componentWillLoad() {
     this.inToolbar = !!this.el.closest('ion-buttons');
     this.inListHeader = !!this.el.closest('ion-list-header');
@@ -177,12 +202,63 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
       return form;
     }
     if (typeof form === 'string') {
-      const el = document.getElementById(form);
-      if (el instanceof HTMLFormElement) {
-        return el;
+      // Check if the string provided is a form id.
+      const el: HTMLElement | null = document.getElementById(form);
+      if (el) {
+        if (el instanceof HTMLFormElement) {
+          return el;
+        } else {
+          /**
+           * The developer specified a string for the form attribute, but the
+           * element with that id is not a form element.
+           */
+          printIonWarning(
+            `Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`,
+            this.el
+          );
+          return null;
+        }
+      } else {
+        /**
+         * The developer specified a string for the form attribute, but the
+         * element with that id could not be found in the DOM.
+         */
+        printIonWarning(
+          `Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
+          this.el
+        );
+        return null;
       }
     }
-    return null;
+    if (form !== undefined) {
+      /**
+       * The developer specified a HTMLElement for the form attribute,
+       * but the element is not a HTMLFormElement.
+       * This will also catch if the developer tries to pass in null
+       * as the form attribute.
+       */
+      printIonWarning(
+        `The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
+        this.el
+      );
+      return null;
+    }
+    /**
+     * If the form element is not set, the button may be inside
+     * of a form element. Query the closest form element to the button.
+     */
+    return this.el.closest('form');
+  }
+
+  private submitForm(ev: Event) {
+    // this button wants to specifically submit a form
+    // climb up the dom to see if we're in a <form>
+    // and if so, then use JS to submit it
+    if (this.formEl && this.formButtonEl) {
+      ev.preventDefault();
+
+      this.formButtonEl.click();
+    }
   }
 
   private handleClick = (ev: Event) => {
@@ -190,49 +266,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     if (this.type === 'button') {
       openURL(this.href, ev, this.routerDirection, this.routerAnimation);
     } else if (hasShadowDom(el)) {
-      // this button wants to specifically submit a form
-      // climb up the dom to see if we're in a <form>
-      // and if so, then use JS to submit it
-      let formEl = this.findForm();
-      const { form } = this;
-
-      if (!formEl && form !== undefined) {
-        /**
-         * The developer specified a form selector for
-         * the button to submit, but it was not found.
-         */
-        if (typeof form === 'string') {
-          printIonWarning(
-            `Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
-            el
-          );
-        } else {
-          printIonWarning(
-            `The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
-            el
-          );
-        }
-        return;
-      }
-
-      if (!formEl) {
-        /**
-         * If the form element is not set, the button may be inside
-         * of a form element. Query the closest form element to the button.
-         */
-        formEl = el.closest('form');
-      }
-
-      if (formEl) {
-        ev.preventDefault();
-
-        const fakeButton = document.createElement('button');
-        fakeButton.type = this.type;
-        fakeButton.style.display = 'none';
-        formEl.appendChild(fakeButton);
-        fakeButton.click();
-        fakeButton.remove();
-      }
+      this.submitForm(ev);
     }
   };
 

core/src/components/button/test/form-reference/button.e2e.ts

@@ -44,7 +44,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <form>
-           <ion-button type="submit">Submit</ion-button>
+          <ion-button type="submit">Submit</ion-button>
         </form>
       `,
         config
@@ -56,19 +56,93 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
       expect(submitEvent).toHaveReceivedEvent();
     });
+
+    test('should submit the closest form by pressing the `enter` button on a form element', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19368',
+      });
+
+      await page.setContent(
+        `
+        <form>
+          <input type="text" />
+          <ion-button type="submit">Submit</ion-button>
+        </form>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.press('input', 'Enter');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+
+    test('should submit the closest form with multiple elements by pressing the `enter` button', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19368',
+      });
+
+      await page.setContent(
+        `
+        <form>
+          <input type="text" />
+          <textarea></textarea>
+          <ion-button type="submit">Submit</ion-button>
+        </form>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.press('input', 'Enter');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+
+    test('should not submit the closest form when button is disabled', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19368',
+      });
+
+      await page.setContent(
+        `
+        <form>
+          <input type="text" />
+          <ion-button type="submit" disabled>Submit</ion-button>
+        </form>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.press('input', 'Enter');
+
+      expect(submitEvent).not.toHaveReceivedEvent();
+    });
   });
 
   test.describe(title('should throw a warning if the form cannot be found'), () => {
     test('form is a string selector', async ({ page }) => {
-      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`, config);
-
       const logs: string[] = [];
 
       page.on('console', (msg) => {
-        logs.push(msg.text());
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
       });
 
-      await page.click('ion-button');
+      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`, config);
 
       expect(logs.length).toBe(1);
       expect(logs[0]).toContain(
@@ -77,6 +151,14 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
     });
 
     test('form is an element reference', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
       await page.setContent(
         `
         <ion-button type="submit">Submit</ion-button>
@@ -90,14 +172,6 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         config
       );
 
-      const logs: string[] = [];
-
-      page.on('console', (msg) => {
-        logs.push(msg.text());
-      });
-
-      await page.click('ion-button');
-
       expect(logs.length).toBe(1);
       expect(logs[0]).toContain(
         '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'

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

@@ -0,0 +1,207 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: wrap'), () => {
+    test('should render button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap`));
+    });
+
+    test('should render small button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap" size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-small`));
+    });
+
+    test('should render large button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap" size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-large`));
+    });
+
+    test('should render button with long text and icons', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap">
+          <ion-icon slot="start" name="heart"></ion-icon>
+          This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+          <ion-icon slot="end" name="star"></ion-icon>
+        </ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-icons`));
+    });
+
+    test('should render block button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap" expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-block`));
+    });
+
+    test('should render block button with long text and icons', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap" expand="block">
+          <ion-icon slot="start" name="heart"></ion-icon>
+          This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+          <ion-icon slot="end" name="star"></ion-icon>
+        </ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-block-icons`));
+    });
+
+    test('should render full button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap" expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-full`));
+    });
+
+    test('should render full button with long text and icons', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-button class="ion-text-wrap" expand="full">
+          <ion-icon slot="start" name="heart"></ion-icon>
+          This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+          <ion-icon slot="end" name="star"></ion-icon>
+        </ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-wrap-full-icons`));
+    });
+
+    test('should render an item button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-button class="ion-text-wrap" slot="end">
+            This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+          </ion-button>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button`));
+    });
+
+    test('should render an item button with long text and icons', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-button class="ion-text-wrap" slot="end">
+            <ion-icon slot="start" name="heart"></ion-icon>
+            This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+            <ion-icon slot="end" name="star"></ion-icon>
+          </ion-button>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button-icons`));
+    });
+
+    test('should render a list header button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-list-header>
+          <ion-label>List Header</ion-label>
+          <ion-button class="ion-text-wrap">
+            This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+          </ion-button>
+        </ion-list-header>
+      `,
+        config
+      );
+
+      const listHeader = page.locator('ion-list-header');
+
+      await expect(listHeader).toHaveScreenshot(screenshot(`button-wrap-list-header-button`));
+    });
+
+    test('should render a toolbar button with long text', async ({ page }) => {
+      // TODO(FW-4599): remove ion-text-wrap class
+      await page.setContent(
+        `
+        <ion-toolbar>
+          <ion-buttons slot="end">
+            <ion-button class="ion-text-wrap">
+              This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const toolbar = page.locator('ion-toolbar');
+
+      await expect(toolbar).toHaveScreenshot(screenshot(`button-wrap-toolbar-button`));
+    });
+  });
+});