diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 0725c54cf6..6fcb0816f8 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -24,20 +24,6 @@ letter-spacing: #{$button-ios-letter-spacing}; } -/** - * The default buttons in a toolbar - * have a different font size/weight - * than buttons outside of a toolbar on iOS. - * However, we still want the "size"/"strong" - * properties to be usable in a toolbar, so we add - * the .in-buttons selector such that we - * can add the different font size/weight in a toolbar - * but still let "size"/"strong" override it. - */ -:host(.in-buttons) { - font-size: #{$toolbar-ios-button-font-size}; - font-weight: 400; -} // iOS Solid Button // -------------------------------------------------- @@ -82,6 +68,25 @@ } +// iOS Toolbar Buttons +// -------------------------------------------------- + +/** + * The default buttons in a toolbar + * have a different font size/weight + * than buttons outside of a toolbar on iOS. + * However, we still want the "size"/"strong" + * properties to be usable in a toolbar, so we add + * the .in-buttons selector such that we + * can add the different font size/weight in a toolbar + * but still let "size"/"strong" override it. + */ + :host(.in-buttons) { + font-size: #{$toolbar-ios-button-font-size}; + font-weight: 400; + } + + // iOS Button Sizes // -------------------------------------------------- @@ -122,7 +127,7 @@ } -// iOS strong Button +// iOS Strong Button // -------------------------------------------------- :host(.button-strong) { diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index 49126cdadc..b41a988412 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -81,7 +81,10 @@ @include margin(0); @include margin-horizontal(null, .3em); - font-size: 24px; + // This value is calculated by dividing the font size the + // icon should be in px (24px) by the font size of its + // parent button (17px). e.g. 24 / 17 = 1.4117 + font-size: 1.41em; line-height: .67; } @@ -90,7 +93,10 @@ @include margin(0); @include margin-horizontal(.4em, null); - font-size: 24px; + // This value is calculated by dividing the font size the + // icon should be in px (24px) by the font size of its + // parent button (17px). e.g. 24 / 17 = 1.4117 + font-size: 1.41em; line-height: .67; } @@ -99,7 +105,10 @@ @include padding(0); @include margin(0); - font-size: 28px; + // This value is calculated by dividing the font size the + // icon should be in px (28px) by the font size of its + // parent button (17px). e.g. 28 / 17 = 1.647 + font-size: 1.65em; line-height: .67; } diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index cb10c4a484..da8a4a27d9 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -60,8 +60,8 @@ @include margin(0); - width: 48px; - height: 48px; + width: 3rem; + height: 3rem; } diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts b/core/src/components/buttons/test/a11y/buttons.e2e.ts new file mode 100644 index 0000000000..8c35d0c2c5 --- /dev/null +++ b/core/src/components/buttons/test/a11y/buttons.e2e.ts @@ -0,0 +1,95 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('buttons: font scaling'), () => { + test('should scale default button text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Default + + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`buttons-default-scale`)); + }); + + test('should scale clear button text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + Clear + + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`buttons-clear-scale`)); + }); + + test('should scale button with icon on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + + + Default + + + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`buttons-icon-scale`)); + }); + + test('should scale button with icon only on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + + + + + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`buttons-icon-only-scale`)); + }); + }); +}); diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7302eac8e1 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..05b1468a20 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d02e7b4c72 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..193b9d832e Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..96fa2c38d4 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8179b2dbbe Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-clear-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d18aa928f9 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..708ccb50e3 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d0598c640a Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0377820e43 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c23d0ef387 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..94a87a9fab Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-default-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..84dd63a8d4 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..eb3d659849 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ac2c130dd1 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3ee2e3e851 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..24d8bbe8a8 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fc39f2db21 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-only-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fcfe4efe66 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8d92ecef50 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a293ec2363 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..db9c6732df Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..95f8248afe Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..655bf758c7 Binary files /dev/null and b/core/src/components/buttons/test/a11y/buttons.e2e.ts-snapshots/buttons-icon-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png index 87451fae78..6db3d7f79d 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss index 964f8e6e59..d98fa34644 100644 --- a/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/core/src/components/toolbar/toolbar.ios.vars.scss @@ -32,7 +32,9 @@ $toolbar-ios-padding-bottom: $toolbar-ios-padding-top !de $toolbar-ios-padding-start: $toolbar-ios-padding-end !default; /// @prop - Font size of the toolbar button -$toolbar-ios-button-font-size: 17px !default; +/// The minimum and maximum font sizes for a toolbar button are +/// 100% and 135%, respectively, of their default font size +$toolbar-ios-button-font-size: clamp(17px, 1.0625rem, 21px) !default; /// @prop - Border radius of the toolbar button -$toolbar-ios-button-border-radius: 4px !default; \ No newline at end of file +$toolbar-ios-button-border-radius: 4px !default; diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss index 57b423a85d..1c7a05abfc 100644 --- a/core/src/components/toolbar/toolbar.md.vars.scss +++ b/core/src/components/toolbar/toolbar.md.vars.scss @@ -16,7 +16,7 @@ $toolbar-order-md: ( ); /// @prop - Font size of the toolbar button -$toolbar-md-button-font-size: 14px !default; +$toolbar-md-button-font-size: 0.875rem !default; /// @prop - Text color of the toolbar button $toolbar-md-button-color: $toolbar-md-color !default;