diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 1a7adecf6c..eada67d4c2 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -34,7 +34,9 @@ $button-ios-height: 3.1em !default; $button-ios-border-radius: 14px !default; /// @prop - Font size of the button text -$button-ios-font-size: 16px !default; +/// The maximum font size is calculated by taking the default font size +/// and multiplying it by 3, since 310% of the default is the maximum +$button-ios-font-size: min(1rem, 48px) !default; /// @prop - Font weight of the button text $button-ios-font-weight: 500 !default; @@ -83,7 +85,9 @@ $button-ios-large-height: 3.1em !default; $button-ios-large-border-radius: 16px !default; /// @prop - Font size of the large button -$button-ios-large-font-size: 20px !default; +/// The maximum font size is calculated by taking the default font size +/// and multiplying it by 3, since 310% of the default is the maximum +$button-ios-large-font-size: min(1.25rem, 60px) !default; // iOS Small Button @@ -108,7 +112,9 @@ $button-ios-small-height: 2.1em !default; $button-ios-small-border-radius: 6px !default; /// @prop - Font size of the small button -$button-ios-small-font-size: 13px !default; +/// The maximum font size is calculated by taking the default font size +/// and multiplying it by 3, since 310% of the default is the maximum +$button-ios-small-font-size: min(0.8125rem, 39px) !default; // iOS Outline Button @@ -151,13 +157,15 @@ $button-ios-outline-background-color-focused: ion-color(primary, base, $ // -------------------------------------------------- /// @prop - Font size of the clear button -$button-ios-clear-font-size: 17px !default; +/// The maximum font size is calculated by taking the default font size +/// and multiplying it by 3, since 310% of the default is the maximum +$button-ios-clear-font-size: min(1.0625rem, 51px) !default; /// @prop - Font weight of the clear button $button-ios-clear-font-weight: normal !default; /// @prop - Letter spacing of the button -$button-ios-letter-spacing: 0 !default; +$button-ios-letter-spacing: 0 !default; /// @prop - Border color of the clear button $button-ios-clear-border-color: transparent !default; diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index a5af53c952..198f94e214 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -34,7 +34,7 @@ $button-md-height: 36px !default; $button-md-border-radius: 4px !default; /// @prop - Font size of the button text -$button-md-font-size: 14px !default; +$button-md-font-size: 0.875rem !default; /// @prop - Font weight of the button text $button-md-font-weight: 500 !default; @@ -78,7 +78,7 @@ $button-md-large-padding-start: $button-md-large-padding $button-md-large-height: 2.8em !default; /// @prop - Font size of the large button -$button-md-large-font-size: 20px !default; +$button-md-large-font-size: 1.25rem !default; // Material Design Small Button @@ -100,7 +100,7 @@ $button-md-small-padding-start: $button-md-small-padding $button-md-small-height: 2.1em !default; /// @prop - Font size of the small button -$button-md-small-font-size: 13px !default; +$button-md-small-font-size: 0.8125rem !default; // Material Design Outline Button diff --git a/core/src/components/button/test/a11y/button.e2e.ts b/core/src/components/button/test/a11y/button.e2e.ts new file mode 100644 index 0000000000..c6efe22d93 --- /dev/null +++ b/core/src/components/button/test/a11y/button.e2e.ts @@ -0,0 +1,82 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('button: 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(`button-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(`button-clear-scale`)); + }); + + test('should scale small button text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + Small + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-small-scale`)); + }); + + test('should scale large button text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + Large + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-large-scale`)); + }); + }); +}); diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2dbb542b16 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3c5deb7cd4 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2f922a18c5 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d749b093c3 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5bb4527663 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..aa65408d33 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-clear-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..904dcdc8dc Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5ae5defaf1 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..89c3498d84 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2f36749186 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..40392ebfed Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..759ef7a3d5 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..268141eb5d Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4736211887 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..97003abe05 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..840b5ec58d Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f30c0c8aaa Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..baf148bc19 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..dba28972d9 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..62bb829eb1 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..24c1721550 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0950c75a33 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7861de2939 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e184b698e3 Binary files /dev/null and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png differ