SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 0 TypeScript

fix(searchbar): cancel icon aligns with back button (#28478)

Issue number: resolves #28468

---------

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

The cancel button in the searchbar used to align with the back button,
but that behavior gradually regressed between Ionic v4 and Ionic v7.

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

- Adjusted the padding on the searchbar back button
- Reduced the size of the searchbar back button. It was currently set to
25.6px whereas the `ion-back-button` icon was 24px. This caused the
icons to never align even with 9px. (This should cause a few additional
diffs)
- Added a screenshot test 

| v4 | v5 | v6 | v7 | branch |
| - | - | - | - | - |
| ![Screenshot 2023-11-06 at 5 41
16 PM](https://github.com/ionic-team/ionic-framework/assets/2721089/fadad5ba-00dc-42f2-b0c8-1968f47e90c9)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/798e30a8-5001-41eb-880d-bd3b0becd4cb)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/5e2841f7-a58c-43dc-8338-d9a355785ce9)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/20e590a9-5341-490f-8a3e-ca3666b899e1)
|
![image](https://github.com/ionic-team/ionic-framework/assets/2721089/d2143089-d636-44ec-a87e-28ef27709ffe)
|

Note that in v4 the alignment was slightly off. It was fixed in v5, but
then broke in v6 and remained unchanged in v7 (until now).


## 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.5.4-dev.11699310489.151b2717`

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
L
Liam DeBeasi committed
c053fd9c68d9b1add1335db80be962215946a0b1
Parent: 9e1e55a
Committed by GitHub <noreply@github.com> on 11/8/2023, 5:12:39 PM