fix(react-router): parameterized routes create new instances

Issue number: resolves #27830

---------

<!-- 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. -->

Card modals set the body background to `black` to match iOS. This color
should be removed once the final card modal has been closed. When modals
were updated to work inline, the code that removed the background color
was never updated to account for this. As a result, opening multiple
inline card modals never removes the background color because there are
always >1 modals in the DOM.

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

- The card modal now queries for _visible_ modals in the DOM to
determine if it should remove the background color.

## 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.1-dev.11689879279.14e28634`

CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

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,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "7.1.4",
+  "version": "7.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.1.4",
+      "version": "7.2.0",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^3.4.0",
@@ -15,7 +15,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.2.1",
+        "@capacitor/core": "^5.2.2",
         "@capacitor/haptics": "^5.0.6",
         "@capacitor/keyboard": "^5.0.6",
         "@capacitor/status-bar": "^5.0.6",
@@ -607,9 +607,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.1.tgz",
-      "integrity": "sha512-v7nzTQZj9l99Sp0v8C7Zq8QX6Cg5ljq7ASneWk/Hc5nBR5LOj/k3a+yEx/RoclWtkxJfs89Y5k+KJTFFQ6cLoA==",
+      "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"
@@ -10784,9 +10784,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.1.tgz",
-      "integrity": "sha512-v7nzTQZj9l99Sp0v8C7Zq8QX6Cg5ljq7ASneWk/Hc5nBR5LOj/k3a+yEx/RoclWtkxJfs89Y5k+KJTFFQ6cLoA==",
+      "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"

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.1.4",
+  "version": "7.2.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.2.1",
+    "@capacitor/core": "^5.2.2",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",

core/src/components.d.ts

@@ -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)
          */
@@ -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/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`));
+    });
+  });
+});

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

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Button - Wrap</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>
+
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding" no-bounce>
+        <h2>Item</h2>
+        <ion-item>
+          <ion-button 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>
+        <ion-item>
+          <ion-button size="default" 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>
+        <ion-item>
+          <ion-button size="large" 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>
+
+        <h2>Toolbar</h2>
+        <ion-toolbar>
+          <ion-buttons slot="end">
+            <ion-button>
+              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>
+
+        <h2>Default</h2>
+        <ion-button>Button</ion-button>
+        <ion-button
+          >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-button>
+          <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>
+
+        <h2>Small</h2>
+        <ion-button size="small">Button</ion-button>
+        <ion-button 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>
+        <ion-button size="small">
+          <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>
+
+        <h2>Large</h2>
+        <ion-button size="large">Button</ion-button>
+        <ion-button 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>
+        <ion-button size="large">
+          <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>
+
+        <h2>Block</h2>
+        <ion-button expand="block">Button</ion-button>
+        <ion-button 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
+        >
+        <ion-button 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>
+
+        <h2>Full</h2>
+        <ion-button expand="full">Button</ion-button>
+        <ion-button 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
+        >
+        <ion-button 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>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/components/buttons/buttons.ios.scss

@@ -6,12 +6,19 @@
 // --------------------------------------------------
 
 ::slotted(*) ion-button {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
   --padding-start: 5px;
   --padding-end: 5px;
 
   @include margin-horizontal(2px, 2px);
 
-  height: 32px;
+  min-height: 32px;
+}
+
+::slotted(*) .button-has-icon-only {
+  --padding-top: 0;
+  --padding-bottom: 0;
 }
 
 ::slotted(*) ion-button:not(.button-round) {

core/src/components/buttons/buttons.md.scss

@@ -5,15 +5,20 @@
 // --------------------------------------------------
 
 ::slotted(*) ion-button {
-  --padding-top: 0;
-  --padding-bottom: 0;
+  --padding-top: 3px;
+  --padding-bottom: 3px;
   --padding-start: 8px;
   --padding-end: 8px;
   --box-shadow: none;
 
   @include margin-horizontal(2px, 2px);
 
-  height: 32px;
+  min-height: 32px;
+}
+
+::slotted(*) .button-has-icon-only {
+  --padding-top: 0;
+  --padding-bottom: 0;
 }
 
 ::slotted(*) ion-button:not(.button-round) {

core/src/components/item-sliding/item-sliding.scss

@@ -29,6 +29,9 @@ ion-item-sliding .item {
   will-change: transform;
 }
 
+.item-sliding-closing ion-item-options {
+  pointer-events: none;
+}
 
 .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
   @include multi-dir() {