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