feat(searchbar): support dynamic type (#28043)

core/src/components/searchbar/searchbar.ios.scss

@@ -15,13 +15,13 @@
 
   @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start);
 
-  height: $searchbar-ios-input-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom;
+  min-height: $searchbar-ios-input-min-height + $searchbar-ios-padding-top + $searchbar-ios-padding-bottom;
 
-  contain: strict;
+  contain: content;
 }
 
 .searchbar-input-container {
-  height: $searchbar-ios-input-height;
+  min-height: $searchbar-ios-input-min-height;
 }
 
 
@@ -45,16 +45,24 @@
 // -----------------------------------------
 
 .searchbar-input {
-  @include padding(0, 28px);
+  @include padding(6px, 0px);
 
   height: 100%;
 
-  font-size: 17px;
+  font-size: dynamic-font(17px);
   font-weight: 400;
 
   contain: strict;
 }
 
+/**
+ * We should only account for the clear button
+ * if the clear button is actually visible. Otherwise
+ * long text in an input can get cut off when it does not need to.
+ */
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-input {
+  @include padding(null, dynamic-font(28px));
+}
 
 // Searchbar Clear Input Icon
 // -----------------------------------------
@@ -65,7 +73,7 @@
 
   position: absolute;
 
-  width: 30px;
+  width: dynamic-font(30px);
   height: 100%;
 
   border: 0;
@@ -101,7 +109,7 @@
 }
 
 :host(.searchbar-left-aligned) .searchbar-input {
-  @include padding-horizontal(30px, null);
+  @include padding-horizontal(dynamic-font(30px), null);
 }
 
 

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

@@ -16,6 +16,7 @@ $searchbar-ios-padding-bottom:                    $searchbar-ios-padding-top !de
 $searchbar-ios-padding-start:                     $searchbar-ios-padding-end !default;
 
 /// @prop - Font size of the searchbar cancel button
+// The cancel button on iOS does not scale with Dynamic Type
 $searchbar-ios-cancel-button-font-size:           16px !default;
 
 /// @prop - Color of the searchbar cancel button
@@ -25,13 +26,13 @@ $searchbar-ios-cancel-button-color:               ion-color(primary, base) !defa
 $searchbar-ios-cancel-button-background-color:    transparent !default;
 
 /// @prop - Size of the searchbar input search icon
-$searchbar-ios-input-search-icon-size:            22px !default;
+$searchbar-ios-input-search-icon-size:            dynamic-font(22px) !default;
 
 /// @prop - Color of the searchbar input search icon
 $searchbar-ios-input-search-icon-color:           $text-color-step-400 !default;
 
-/// @prop - Height of the searchbar input
-$searchbar-ios-input-height:                      36px !default;
+/// @prop - Minimum Height of the searchbar input
+$searchbar-ios-input-min-height:                      36px !default;
 
 /// @prop - Border radius of the searchbar input
 $searchbar-ios-input-border-radius:               10px !default;
@@ -61,4 +62,4 @@ $searchbar-ios-input-icon-opacity:                .5 !default;
 $searchbar-ios-input-clear-icon-color:            $text-color-step-400 !default;
 
 /// @prop - Size of the searchbar input clear icon
-$searchbar-ios-input-clear-icon-size:             18px !default;
+$searchbar-ios-input-clear-icon-size:             dynamic-font(18px) !default;

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

@@ -25,8 +25,8 @@
 .searchbar-search-icon {
   @include position(11px, null, null, 16px);
 
-  width: $searchbar-md-input-search-icon-size + 1;
-  height: $searchbar-md-input-search-icon-size + 1;
+  width: $searchbar-md-input-search-icon-size;
+  height: $searchbar-md-input-search-icon-size;
 }
 
 
@@ -59,12 +59,12 @@
 // -----------------------------------------
 
 .searchbar-input {
-  @include padding(6px, 55px);
+  @include padding(dynamic-font(6px), dynamic-font(55px));
   @include background-position(start, 8px, center);
 
   height: $searchbar-md-input-height;
 
-  font-size: 16px;
+  font-size: dynamic-font(16px);
   font-weight: 400;
 
   line-height: $searchbar-md-input-line-height;

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

@@ -31,7 +31,7 @@ $searchbar-md-cancel-button-font-size:           1.6em !default;
 $searchbar-md-input-search-icon-color:           $text-color-step-400 !default;
 
 /// @prop - Size of the searchbar input search icon
-$searchbar-md-input-search-icon-size:            20px !default;
+$searchbar-md-input-search-icon-size:            dynamic-font(21px) !default;
 
 /// @prop - Height of the searchbar input
 $searchbar-md-input-height:                      auto !default;
@@ -58,4 +58,4 @@ $searchbar-md-input-border-radius:               2px !default;
 $searchbar-md-input-clear-icon-color:            $text-color-step-400 !default;
 
 /// @prop - Size of the searchbar input clear icon
-$searchbar-md-input-clear-icon-size:             22px !default;
+$searchbar-md-input-clear-icon-size:             dynamic-font(22px) !default;

core/src/components/searchbar/searchbar.scss

@@ -74,6 +74,7 @@
   display: block;
 
   width: 100%;
+  min-height: inherit;
 
   border: 0;
 

core/src/components/searchbar/searchbar.tsx

@@ -461,7 +461,13 @@ export class Searchbar implements ComponentInterface {
         const inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)';
 
         // Calculate the icon margin
-        const iconLeft = 'calc(50% - ' + (textWidth / 2 + 30) + 'px)';
+        /**
+         * We take the icon width to account
+         * for any text scales applied to the icon
+         * such as Dynamic Type on iOS as well as 8px
+         * of padding.
+         */
+        const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
 
         // Set the input padding start and icon margin start
         if (rtl) {

core/src/components/searchbar/test/a11y/searchbar.e2e.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-searchbar value="My Text" show-cancel-button="always" show-clear-button="always"></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-scale`));
+    });
+  });
+});

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

@@ -170,3 +170,31 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: ios clear button text cut off'), () => {
+    test('text should not be cut off when clear button is hidden', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar show-clear-button="focus" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non metus vel velit sollicitudin suscipit quis sed lectus. "></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-text-clear-hidden`));
+    });
+
+    test('text should be cut off when clear button is visible', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar show-clear-button="always" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non metus vel velit sollicitudin suscipit quis sed lectus. "></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-text-clear-visible`));
+    });
+  });
+});