feat(input): defaultValue

core/api.txt

@@ -556,6 +556,7 @@ ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-input,prop,counter,boolean,false,false,false
 ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-input,prop,debounce,number | undefined,undefined,false,false
+ion-input,prop,defaultValue,null | number | string | undefined,this.getValue(),false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,errorText,string | undefined,undefined,false,false

core/package-lock.json

@@ -15,14 +15,14 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.4.1",
+        "@capacitor/core": "^5.4.0",
         "@capacitor/haptics": "^5.0.6",
         "@capacitor/keyboard": "^5.0.6",
         "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.38.1",
+        "@playwright/test": "^1.38.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.2",
@@ -44,7 +44,7 @@
         "jest-cli": "^27.5.1",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
-        "sass": "^1.33.0",
+        "sass": "^1.26.10",
         "serve": "^14.0.1",
         "stylelint": "^13.13.1",
         "stylelint-order": "^4.1.0",
@@ -607,9 +607,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
-      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1541,12 +1541,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
-      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
+      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.38.1"
+        "playwright": "1.38.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8190,12 +8190,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
-      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
+      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.38.1"
+        "playwright-core": "1.38.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8208,9 +8208,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
-      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
+      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -8825,12 +8825,12 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
-      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
+      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=2.0.0 <4.0.0"
       },
       "bin": {
         "sass": "sass.js"
@@ -10802,9 +10802,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
-      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11469,12 +11469,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
-      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
+      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
       "dev": true,
       "requires": {
-        "playwright": "1.38.1"
+        "playwright": "1.38.0"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -16344,19 +16344,19 @@
       }
     },
     "playwright": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
-      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
+      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.38.1"
+        "playwright-core": "1.38.0"
       }
     },
     "playwright-core": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
-      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
+      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
       "dev": true
     },
     "postcss": {
@@ -16798,12 +16798,12 @@
       "dev": true
     },
     "sass": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
-      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
+      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
       "dev": true,
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=2.0.0 <4.0.0"
       }
     },
     "saxes": {

core/package.json

@@ -37,14 +37,14 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.4.1",
+    "@capacitor/core": "^5.4.0",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.38.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",
@@ -66,7 +66,7 @@
     "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.33.0",
+    "sass": "^1.26.10",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",

core/src/components.d.ts

@@ -17,7 +17,7 @@ import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interf
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
-import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+import { InputChangeEventDetail, InputInputEventDetail, InputValue } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
 import { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
@@ -53,7 +53,7 @@ export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interf
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
-export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+export { InputChangeEventDetail, InputInputEventDetail, InputValue } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
 export { MenuChangeEventDetail, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
@@ -1189,6 +1189,7 @@ export namespace Components {
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
         "debounce"?: number;
+        "defaultValue"?: InputValue;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -1297,7 +1298,7 @@ export namespace Components {
         /**
           * The value of the input.
          */
-        "value"?: string | number | null;
+        "value"?: InputValue;
     }
     interface IonItem {
         /**
@@ -1336,7 +1337,6 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
-          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -5249,6 +5249,7 @@ declare namespace LocalJSX {
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
         "debounce"?: number;
+        "defaultValue"?: InputValue;
         /**
           * If `true`, the user cannot interact with the input.
          */
@@ -5369,7 +5370,7 @@ declare namespace LocalJSX {
         /**
           * The value of the input.
          */
-        "value"?: string | number | null;
+        "value"?: InputValue;
     }
     interface IonItem {
         /**
@@ -5408,7 +5409,6 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
-          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**

core/src/components/action-sheet/action-sheet.ios.scss

@@ -131,11 +131,11 @@
 .action-sheet-button {
   @include padding($action-sheet-ios-button-padding);
 
-  min-height: $action-sheet-ios-button-height;
+  height: $action-sheet-ios-button-height;
 
   font-size: $action-sheet-ios-button-font-size;
 
-  contain: content;
+  contain: strict;
 }
 
 .action-sheet-button .action-sheet-icon {

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start:                            $action-sheet-
 $action-sheet-ios-title-color:                                    $text-color-step-600 !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px) !default;
+$action-sheet-ios-title-font-size:                                13px !default;
 
 /// @prop - Font weight of the action sheet title
 $action-sheet-ios-title-font-weight:                              400 !default;
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color:                             rgba($text-col
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px) !default;
+$action-sheet-ios-sub-title-font-size:                            13px !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-ios-sub-title-padding-top:                          6px !default;
@@ -97,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start:                        $action-sheet-
 $action-sheet-ios-button-height:                                  56px !default;
 
 /// @prop - Padding of the action sheet button
-$action-sheet-ios-button-padding:                                 14px !default;
+$action-sheet-ios-button-padding:                                 18px !default;
 
 /// @prop - Text color of the action sheet button
 $action-sheet-ios-button-text-color:                              ion-color(primary, base) !default;
 
 /// @prop - Font size of the action sheet button icon
-$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px) !default;
+$action-sheet-ios-button-icon-font-size:                          28px !default;
 
 /// @prop - Padding right of the action sheet button icon
 $action-sheet-ios-button-icon-padding-right:                      .3em !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px) !default;
+$action-sheet-ios-button-font-size:                               20px !default;
 
 /// @prop - Border color alpha of the action sheet button
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;

core/src/components/action-sheet/action-sheet.md.scss

@@ -67,13 +67,13 @@
 
   position: relative;
 
-  min-height: $action-sheet-md-button-height;
+  height: $action-sheet-md-button-height;
 
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
 
-  contain: content;
+  contain: strict;
   overflow: hidden;
 }
 

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -26,7 +26,7 @@ $action-sheet-md-title-height:                          60px !default;
 $action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-md-title-font-size:                       dynamic-font(16px) !default;
+$action-sheet-md-title-font-size:                       16px !default;
 
 /// @prop - Padding top of the action sheet title
 $action-sheet-md-title-padding-top:                     20px !default;
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start:                   $action-sheet-md-title-p
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-md-sub-title-font-size:                   dynamic-font(14px) !default;
+$action-sheet-md-sub-title-font-size:                   14px !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-md-sub-title-padding-top:                 16px !default;
@@ -70,10 +70,10 @@ $action-sheet-md-button-height:                         52px !default;
 $action-sheet-md-button-text-color:                     $text-color-step-150 !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-md-button-font-size:                      dynamic-font(16px) !default;
+$action-sheet-md-button-font-size:                      16px !default;
 
 /// @prop - Padding top of the action sheet button
-$action-sheet-md-button-padding-top:                    12px !default;
+$action-sheet-md-button-padding-top:                    0 !default;
 
 /// @prop - Padding end of the action sheet button
 $action-sheet-md-button-padding-end:                    16px !default;
@@ -91,7 +91,7 @@ $action-sheet-md-button-background:                     transparent !default;
 // --------------------------------------------------
 
 /// @prop - Font size of the icon in the action sheet button
-$action-sheet-md-icon-font-size:                        dynamic-font(24px) !default;
+$action-sheet-md-icon-font-size:                        24px !default;
 
 /// @prop - Margin top of the icon in the action sheet button
 $action-sheet-md-icon-margin-top:                       0 !default;

core/src/components/action-sheet/action-sheet.scss

@@ -126,10 +126,7 @@
   justify-content: flex-end;
 
   height: 100%;
-
-  /* Fallback for browsers that do not support dvh */
   max-height: 100vh;
-  max-height: 100dvh;
 }
 
 .action-sheet-group {

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -86,37 +86,3 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('action-sheet: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-action-sheet></ion-action-sheet>
-
-        <script>
-          const actionSheet = document.querySelector('ion-action-sheet');
-          actionSheet.header = 'Header';
-          actionSheet.subHeader = 'Sub Header';
-          actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
-        </script>
-      `,
-        config
-      );
-
-      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-      const actionSheet = page.locator('ion-action-sheet');
-
-      await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
-      await ionActionSheetDidPresent.next();
-
-      await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
-    });
-  });
-});

core/src/components/back-button/back-button.ios.scss

@@ -13,26 +13,10 @@
   --color: #{$back-button-ios-color};
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
-  /**
-   * The icon should be sized relative
-   * to the size of the text which is
-   * why we use em here instead of rem.
-   * This allows developers to override
-   * the text font size while ensuring that
-   * the icon is sized relative to that.
-   */
   --icon-font-size: 1.6em;
   --min-height: 32px;
 
-  /**
-   * Main content should be prioritized over the back
-   * button which is why a maximum font size is applied.
-   * Also, we want the text to remain readable
-   * so a minimum font size is applied.
-   * Using 1.294 instead of 1.3 aligns the text
-   * with the icon a bit nicer in Firefox.
-   */
-  font-size: dynamic-font-clamp(1, 17px, 1.294);
+  font-size: 17px;
 }
 
 .button-native {

core/src/components/back-button/back-button.md.scss

@@ -13,14 +13,14 @@
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
-  --icon-font-size: #{dynamic-font(24px)};
+  --icon-font-size: 24px;
   --icon-font-weight: normal;
   --min-height: 32px;
   --min-width: 44px;
   --padding-start: 12px;
   --padding-end: 12px;
 
-  font-size: dynamic-font(14px);
+  font-size: 14px;
   font-weight: 500;
 
   text-transform: uppercase;
@@ -30,14 +30,7 @@
   --border-radius: 50%;
 
   min-width: 48px;
-  min-height: 48px;
-
-  /**
-   * This allows the icon only button to
-   * keep its circular shape even when the
-   * text scales up.
-   */
-  aspect-ratio: 1 / 1;
+  height: 48px;
 }
 
 .button-native {

core/src/components/back-button/test/a11y/back-button.e2e.ts

@@ -1,29 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('back-button: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button default-href="/" text="Back"></ion-back-button>
-          </ion-buttons>
-        </ion-toolbar>
-      `,
-        config
-      );
-
-      const backButton = page.locator('ion-back-button');
-
-      await expect(backButton).toHaveScreenshot(screenshot(`back-button-scale`));
-    });
-  });
-});

core/src/components/badge/badge.ios.scss

@@ -6,13 +6,4 @@
 
 :host {
   @include border-radius($badge-ios-border-radius);
-
-  /**
-   * "-apple-system-body" on iOS never goes smaller than
-   * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications.
-   * However, we still keep the max() usage here for consistency
-   * with other components and in case "-apple-system-body" does
-   * go smaller than 14px in the future.
-   */
-  font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }

core/src/components/badge/badge.vars.scss

@@ -18,11 +18,8 @@ $badge-padding-start:             $badge-padding-end !default;
 /// @prop - Minimum width of the badge
 $badge-min-width:                 10px !default;
 
-/// @prop - Baseline font size of the badge
-$badge-baseline-font-size: 13px !default;
-
 /// @prop - Font size of the badge
-$badge-font-size:                 dynamic-font($badge-baseline-font-size) !default;
+$badge-font-size:                 13px !default;
 
 /// @prop - Font weight of the badge
 $badge-font-weight:               bold !default;

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

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

core/src/components/breadcrumb/breadcrumb.ios.scss

@@ -10,14 +10,6 @@
   --color-hover: #{$breadcrumb-ios-color-active};
   --color-focused: var(--color-active);
   --background-focused: #{$breadcrumb-ios-background-focused};
-
-  /**
-   * Main content should be prioritized
-   * on iOS, so we set max font size for breadcrumbs.
-   * Breadcrumbs can be placed in the content too, so
-   * we add a min font size to keep the text legible.
-   */
-  font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
 }
 
 :host(.breadcrumb-active) {
@@ -66,7 +58,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-ios-icon-color;
 
-  font-size: dynamic-font-max(18px, 1.2);
+  font-size: 18px;
 }
 
 ::slotted(ion-icon[slot="start"]) {
@@ -100,7 +92,3 @@
 .breadcrumbs-collapsed-indicator:focus {
   background: $breadcrumb-ios-indicator-background-focused;
 }
-
-.breadcrumbs-collapsed-indicator ion-icon {
-  font-size: dynamic-font-max(22px, 1);
-}

core/src/components/breadcrumb/breadcrumb.md.scss

@@ -53,7 +53,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-md-icon-color;
 
-  font-size: dynamic-font(18px);
+  font-size: 18px;
 }
 
 ::slotted(ion-icon[slot="start"]) {

core/src/components/breadcrumb/breadcrumb.scss

@@ -156,5 +156,5 @@
 .breadcrumbs-collapsed-indicator ion-icon {
   margin-top: 1px;
 
-  font-size: dynamic-font(22px);
+  font-size: 22px;
 }

core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -6,10 +6,8 @@
 /// @prop - Font weight of the breadcrumb
 $breadcrumb-font-weight:         400 !default;
 
-$breadcrumb-baseline-font-size: 16px !default;
-
 /// @prop - Font size of the breadcrumb
-$breadcrumb-font-size:           dynamic-font($breadcrumb-baseline-font-size) !default;
+$breadcrumb-font-size:           16px !default;
 
 /// @prop - Color of the breadcrumb separator
 $breadcrumb-separator-color:     var(--ion-color-step-550, #73849a) !default;

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

@@ -12,30 +12,3 @@ configs().forEach(({ config, title }) => {
     });
   });
 });
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('breadcrumbs: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-breadcrumbs max-items="2" items-before-collapse="1">
-          <ion-breadcrumb>Home</ion-breadcrumb>
-          <ion-breadcrumb>Electronics</ion-breadcrumb>
-          <ion-breadcrumb>Photography</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-scale`));
-    });
-  });
-});

core/src/components/button/button.ios.scss

@@ -24,6 +24,20 @@
   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
 // --------------------------------------------------
@@ -68,25 +82,6 @@
 }
 
 
-// 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
 // --------------------------------------------------
 
@@ -132,7 +127,7 @@
 }
 
 
-// iOS Strong Button
+// iOS strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {

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

@@ -34,9 +34,7 @@ $button-ios-min-height:                               3.1em !default;
 $button-ios-border-radius:                            14px !default;
 
 /// @prop - Font size of the button text
-/// 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:                                dynamic-font-max(16px, 3) !default;
+$button-ios-font-size:                                16px !default;
 
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
@@ -85,9 +83,7 @@ $button-ios-large-min-height:                         3.1em !default;
 $button-ios-large-border-radius:                      16px !default;
 
 /// @prop - Font size of the large button
-/// 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:                          dynamic-font-max(20px, 3) !default;
+$button-ios-large-font-size:                          20px !default;
 
 
 // iOS Small Button
@@ -112,9 +108,7 @@ $button-ios-small-min-height:                         2.1em !default;
 $button-ios-small-border-radius:                      6px !default;
 
 /// @prop - Font size of the small button
-/// 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:                          dynamic-font-max(13px, 3) !default;
+$button-ios-small-font-size:                          13px !default;
 
 
 // iOS Outline Button
@@ -157,15 +151,13 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 // --------------------------------------------------
 
 /// @prop - Font size of the clear button
-/// 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:                          dynamic-font-max(17px, 3) !default;
+$button-ios-clear-font-size:                          17px !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;

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

@@ -34,7 +34,7 @@ $button-md-min-height:                                  36px !default;
 $button-md-border-radius:                               4px !default;
 
 /// @prop - Font size of the button text
-$button-md-font-size:                                   dynamic-font(14px) !default;
+$button-md-font-size:                                   14px !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-min-height:                            2.8em !default;
 
 /// @prop - Font size of the large button
-$button-md-large-font-size:                             dynamic-font(20px) !default;
+$button-md-large-font-size:                             20px !default;
 
 
 // Material Design Small Button
@@ -100,7 +100,7 @@ $button-md-small-padding-start:                         $button-md-small-padding
 $button-md-small-min-height:                            2.1em !default;
 
 /// @prop - Font size of the small button
-$button-md-small-font-size:                             dynamic-font(13px) !default;
+$button-md-small-font-size:                             13px !default;
 
 
 // Material Design Outline Button

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

@@ -1,82 +0,0 @@
-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(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button>Default</ion-button>
-      `,
-        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(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button fill="clear">Clear</ion-button>
-      `,
-        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(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button size="small">Small</ion-button>
-      `,
-        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(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button size="large">Large</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
-    });
-  });
-});

core/src/components/buttons/buttons.ios.scss

@@ -88,10 +88,7 @@
   @include margin(0);
   @include margin-horizontal(null, .3em);
 
-  // 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;
+  font-size: 24px;
 
   line-height: .67;
 }
@@ -100,10 +97,7 @@
   @include margin(0);
   @include margin-horizontal(.4em, null);
 
-  // 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;
+  font-size: 24px;
 
   line-height: .67;
 }
@@ -112,10 +106,7 @@
   @include padding(0);
   @include margin(0);
 
-  // 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;
+  font-size: 28px;
 
   line-height: .67;
 }

core/src/components/buttons/buttons.md.scss

@@ -65,8 +65,8 @@
 
   @include margin(0);
 
-  width: 3rem;
-  height: 3rem;
+  width: 48px;
+  height: 48px;
 }
 
 

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

@@ -1,95 +0,0 @@
-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(
-        `
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button>Default</ion-button>
-        </ion-buttons>
-      `,
-        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(
-        `
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button fill="clear">Clear</ion-button>
-        </ion-buttons>
-      `,
-        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(
-        `
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button>
-            <ion-icon slot="start" name="star"></ion-icon>
-            Default
-          </ion-button>
-        </ion-buttons>
-      `,
-        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(
-        `
-        <style>
-          html {
-            font-size: 135%;
-          }
-        </style>
-
-        <ion-buttons>
-          <ion-button>
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-only-scale`));
-    });
-  });
-});