diff --git a/core/src/components/searchbar/searchbar.ios.scss b/core/src/components/searchbar/searchbar.ios.scss
index e15473d878..62215b8fbd 100644
--- a/core/src/components/searchbar/searchbar.ios.scss
+++ b/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);
}
diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss
index 1e0826bdda..d02ad78f88 100644
--- a/core/src/components/searchbar/searchbar.ios.vars.scss
+++ b/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;
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 5742482b13..b8c6f06ecd 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/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;
diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss
index 9709a5d1db..9f4470868c 100644
--- a/core/src/components/searchbar/searchbar.md.vars.scss
+++ b/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;
diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss
index 3768ca7329..0293b5b7bf 100644
--- a/core/src/components/searchbar/searchbar.scss
+++ b/core/src/components/searchbar/searchbar.scss
@@ -74,6 +74,7 @@
display: block;
width: 100%;
+ min-height: inherit;
border: 0;
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index c2e44fa5e0..7fab6590e4 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/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) {
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts
new file mode 100644
index 0000000000..148af26ad0
--- /dev/null
+++ b/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(
+ `
+
+
+ `,
+ config
+ );
+
+ const searchbar = page.locator('ion-searchbar');
+
+ await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-scale`));
+ });
+ });
+});
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7d5fa2eb6a
Binary files /dev/null and b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9bade344d1
Binary files /dev/null and b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d78548a2ca
Binary files /dev/null and b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7d8e177b54
Binary files /dev/null and b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8f81b057d9
Binary files /dev/null and b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3f7c19d3cd
Binary files /dev/null and b/core/src/components/searchbar/test/a11y/searchbar.e2e.ts-snapshots/searchbar-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts b/core/src/components/searchbar/test/basic/searchbar.e2e.ts
index 486afaa5c8..325b4a9bb4 100644
--- a/core/src/components/searchbar/test/basic/searchbar.e2e.ts
+++ b/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(
+ `
+
+ `,
+ 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(
+ `
+
+ `,
+ config
+ );
+
+ const searchbar = page.locator('ion-searchbar');
+ await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-text-clear-visible`));
+ });
+ });
+});
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0550c8f6a0
Binary files /dev/null and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5f8df41811
Binary files /dev/null and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4a87c5e72c
Binary files /dev/null and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-hidden-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ac7e57361b
Binary files /dev/null and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ff4c4932b7
Binary files /dev/null and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..276c0c6df9
Binary files /dev/null and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-text-clear-visible-ios-ltr-Mobile-Safari-linux.png differ