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>

Author: 3 people

core/src/components/searchbar/searchbar.md.scss

@@ -34,7 +34,13 @@
 // -----------------------------------------
 
 .searchbar-cancel-button {
- @include position(0, null, null, 5px);
+ /**
+ * The left edge of the cancel button
+ * should align with the left edge
+ * of the back button if the searchbar
+ * is used in a toolbar.
+ */
+ @include position(0, null, null, 9px);
 
  background-color: $searchbar-md-cancel-button-background-color;
 

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

@@ -25,7 +25,7 @@ $searchbar-md-cancel-button-color: $text-color-step-100 !default;
 $searchbar-md-cancel-button-background-color: transparent !default;
 
 /// @prop - Font size of the searchbar cancel button
-$searchbar-md-cancel-button-font-size: 1.6em !default;
+$searchbar-md-cancel-button-font-size: 1.5em !default;
 
 /// @prop - Color of the searchbar input search icon
 $searchbar-md-input-search-icon-color: $text-color-step-400 !default;

core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Chrome-linux.png

@@ -198,3 +198,33 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
  });
  });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('searchbar: cancel button alignment'), () => {
+ test('should align with the back button when used in a toolbar', async ({ page }, testInfo) => {
+ testInfo.annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/28468',
+ });
+ await page.setContent(
+ `
+ <ion-header>
+ <ion-toolbar>
+ <ion-buttons slot="start">
+ <ion-back-button default-href="#"></ion-back-button>
+ </ion-buttons>
+ <ion-title>Test</ion-title>
+ </ion-toolbar>
+ <ion-toolbar>
+ <ion-searchbar show-cancel-button="always"></ion-searchbar>
+ </ion-toolbar>
+ </ion-header>
+ `,
+ config
+ );
+
+ const header = page.locator('ion-header');
+ await expect(header).toHaveScreenshot(screenshot(`searchbar-back-button-align`));
+ });
+ });
+});