feat(toast): support dynamic type (#28051)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Toast does not support the dynamic type feature in iOS. 

_A brief history on Ionic's toast..._

The toast component is influenced based on Material Design's
[Snackbar](https://m2.material.io/components/snackbars) component. iOS
does not include a toast component in their Human Interface Guidelines.
Ionic's implementation is a hybrid of a "close enough" design for iOS
that somewhat resembles iOS notifications.

Taking this into account, the new behavior specified below is very much
a best guess of reasonable defaults to provide an appropriate user
experience for a user that is displayed a toast while using the dynamic
type feature in iOS.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The toast content (header and message) content will scale to a maximum
of 310% of its base size of 14px.
- Note: Header is not a valid aspect of MD Snackbar. This is an area
where the iOS notification style has bled into public API. We scale both
the header and message text to be consistent, but developers should be
cautious with how much content they are rendering. MD recommends a
maximum of 2 lines of text for mobile, this would include both the
header and message text[^1].
- The toast button will scale based on the same sizing rules as the back
button does for dynamic type. The action is important to scale for
visibility, but the content of the toast is the primary content that
should be scaled to the maximum size allocated.
- On iOS, the toast container has a maximum height of 478px. This value
is taken from scaling the notification UI in iOS to 310% and capturing
the height of the largest allowed notification[^2]. Developers that
display too much text will have the contents overflow (visibly hidden).
This is intentional to prevent the toast from covering the entire
application UI and to enforce developers limit their text. Developers
can continue to override this value through the `--max-height` CSS
variable.
- The fixed height requirement for toast has been removed. On iOS, the
toast container can expand up to the max height (defaults to `478px`).
On MD, the container will expand and overflow the viewport. Once again,
developers _should_ follow best practices of limiting their message to
1-2 lines of text.


https://github.com/ionic-team/ionic-framework/assets/13732623/d19e93c9-55c3-4b35-85af-3be9d98e008d


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

I attempted to enforce the line requirements to have the header and
message text overflow, but line-clamp is not consistently implemented
across browsers and Safari does not render an ellipsis when the content
overflows. For this reason, I do not believe clamping the text to a
fixed number of lines is viable at this time.

[^1]: Reference to Material Design 2 Snackbar spec:
https://m2.material.io/components/snackbars#specs
[^2]: Reference image for iOS notifications scaled to 310%:
https://github.com/ionic-team/ionic-framework/assets/13732623/e2420340-8046-4a56-81c8-9e2ee1c1399b

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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

@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * This test does not check LTR vs RTL layouts
  */
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: a11y'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/toast/test/a11y`, config);
@@ -53,4 +53,138 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(toastButton).toHaveAttribute('aria-label', 'close button');
     });
   });
+
+  test.describe(title('toast: font scaling'), () => {
+    test('should scale header text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" header="Testing" message="Hello world"></ion-toast>
+      `,
+        config
+      );
+
+      const toast = page.locator('ion-toast');
+
+      await expect(toast).toBeVisible();
+
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-header-scale'));
+    });
+
+    test('should scale message text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world"></ion-toast>
+      `,
+        config
+      );
+
+      const toast = page.locator('ion-toast');
+
+      await expect(toast).toBeVisible();
+
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-message-scale'));
+    });
+
+    test('should scale content icon on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world" icon="alert"></ion-toast>
+      `,
+        config
+      );
+
+      const toast = page.locator('ion-toast');
+
+      await expect(toast).toBeVisible();
+
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-icon-scale'));
+    });
+
+    test('should scale button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world"></ion-toast>
+      `,
+        config
+      );
+
+      const toast = page.locator('ion-toast');
+
+      toast.evaluate((el: HTMLIonToastElement) => {
+        el.buttons = [
+          {
+            text: 'Cancel',
+          },
+        ];
+      });
+
+      await expect(toast).toBeVisible();
+
+      const toastWrapper = toast.locator('.toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot('toast-buttons-scale'));
+    });
+
+    test('should scale buttons and icons on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-toast is-open="true" message="Hello world"></ion-toast>
+      `,
+        config
+      );
+
+      const toast = page.locator('ion-toast');
+
+      toast.evaluate((el: HTMLIonToastElement) => {
+        el.buttons = [
+          {
+            text: 'Cancel',
+            icon: 'close',
+          },
+        ];
+      });
+
+      await expect(toast).toBeVisible();
+
+      /**
+       * Linux incorrectly clips the screenshot when capturing the toast container
+       * with the inset styling.
+       *
+       * We capture the entire toast container (entire page) to avoid this issue.
+       */
+      await expect(toast).toHaveScreenshot(screenshot('toast-buttons-icon-scale'));
+    });
+  });
 });

core/src/components/toast/toast.ios.scss

@@ -10,6 +10,7 @@
   --button-color: #{$toast-ios-button-color};
   --color: #{$toast-ios-title-color};
   --max-width: #{$toast-max-width};
+  --max-height: #{$toast-ios-max-height};
   --start: 10px;
   --end: 10px;
 
@@ -68,7 +69,7 @@
 .toast-button {
   @include padding($toast-ios-button-padding-top, $toast-ios-button-padding-end, $toast-ios-button-padding-bottom, $toast-ios-button-padding-start);
 
-  height: $toast-ios-button-min-height;
+  min-height: $toast-ios-button-min-height;
 
   transition: background-color, opacity 100ms linear;
 

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

@@ -3,71 +3,81 @@
 // iOS Toast
 // --------------------------------------------------
 
+/// @prop - The maximum height of the toast
+/// The maximum height of an iOS notification
+/// scaled to 310% is 478px.
+$toast-ios-max-height: 478px;
+
 /// @prop - Background Color of the toast wrapper
-$toast-ios-background-color:                      $background-color-step-50 !default;
+$toast-ios-background-color: $background-color-step-50 !default;
 
 /// @prop - Background Color alpha of the toast wrapper when translucent
-$toast-ios-translucent-background-color-alpha:    .8 !default;
+$toast-ios-translucent-background-color-alpha: 0.8 !default;
 
 /// @prop - Background Color of the toast wrapper when translucent
-$toast-ios-translucent-background-color:          rgba($background-color-rgb, $toast-ios-translucent-background-color-alpha) !default;
+$toast-ios-translucent-background-color: rgba(
+  $background-color-rgb,
+  $toast-ios-translucent-background-color-alpha
+) !default;
 
 /// @prop - Border radius of the toast wrapper
-$toast-ios-border-radius:                         14px !default;
+$toast-ios-border-radius: 14px !default;
 
 /// @prop - Color of the toast title
-$toast-ios-title-color:                           $text-color-step-150 !default;
+$toast-ios-title-color: $text-color-step-150 !default;
 
 /// @prop - Font size of the toast title
-$toast-ios-header-font-weight:                    500 !default;
+$toast-ios-header-font-weight: 500 !default;
 
 /// @prop - Spacing between the header and the message
-$toast-ios-header-margin-bottom:                  2px !default;
+$toast-ios-header-margin-bottom: 2px !default;
 
 /// @prop - Font size of the toast title
-$toast-ios-content-font-size:                     14px !default;
+$toast-ios-content-font-size: dynamic-font-clamp(1, 14px, 3.1) !default;
 
 /// @prop - Padding top of the toast content
-$toast-ios-content-padding-top:                   15px !default;
+$toast-ios-content-padding-top: 15px !default;
 
 /// @prop - Padding end of the toast content
-$toast-ios-content-padding-end:                   $toast-ios-content-padding-top !default;
+$toast-ios-content-padding-end: $toast-ios-content-padding-top !default;
 
 /// @prop - Padding bottom of the toast content
-$toast-ios-content-padding-bottom:                $toast-ios-content-padding-top !default;
+$toast-ios-content-padding-bottom: $toast-ios-content-padding-top !default;
 
 /// @prop - Padding start of the toast content
-$toast-ios-content-padding-start:                 $toast-ios-content-padding-end !default;
+$toast-ios-content-padding-start: $toast-ios-content-padding-end !default;
 
-/// @prop - Color of the toast button	
-$toast-ios-button-color:                          #{ion-color(primary, base)} !default;
+/// @prop - Color of the toast button
+$toast-ios-button-color: #{ion-color(primary, base)} !default;
 
 /// @prop - Filter of the translucent toast
-$toast-ios-translucent-filter:                    saturate(180%) blur(20px) !default;
+$toast-ios-translucent-filter: saturate(180%) blur(20px) !default;
 
 /// @prop - Minimum height of the toast button
-$toast-ios-button-min-height:                     44px !default;
+$toast-ios-button-min-height: 44px !default;
 
 /// @prop - Padding top of the toast button
-$toast-ios-button-padding-top:                    10px !default;
+$toast-ios-button-padding-top: 10px !default;
 
 /// @prop - Padding end of the toast button
-$toast-ios-button-padding-end:                    15px !default;
+$toast-ios-button-padding-end: 15px !default;
 
 /// @prop - Padding bottom of the toast button
-$toast-ios-button-padding-bottom:                 $toast-ios-button-padding-top !default;
+$toast-ios-button-padding-bottom: $toast-ios-button-padding-top !default;
 
 /// @prop - Padding start of the toast button
-$toast-ios-button-padding-start:                  15px !default;
+$toast-ios-button-padding-start: 15px !default;
 
 /// @prop - Font size of the toast button
-$toast-ios-button-font-size:                      17px !default;
+/// Uses the same font size scaling rules as back button.
+/// Prioritizing the toast header and message over the button.
+$toast-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.294) !default;
 
 /// @prop - Font size of the toast button
-$toast-ios-button-font-weight:                    500 !default;
+$toast-ios-button-font-weight: 500 !default;
 
 /// @prop - Background color alpha of the toast activated button
-$toast-ios-button-opacity-activated:              .4 !default;
+$toast-ios-button-opacity-activated: 0.4 !default;
 
 /// @prop - Background color of the toast button
-$toast-ios-button-background-color:               transparent !default;
+$toast-ios-button-background-color: transparent !default;

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

@@ -4,91 +4,92 @@
 // --------------------------------------------------
 
 /// @prop - Background of the toast
-$toast-md-background:                              $text-color-step-200 !default;
+$toast-md-background: $text-color-step-200 !default;
 
 /// @prop - Box shadow of the toast
-$toast-md-box-shadow:                              0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default;
+$toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
+  0 1px 18px 0 rgba(0, 0, 0, 0.12) !default;
 
 /// @prop - Font size of the toast
-$toast-md-font-size:                               14px !default;
+$toast-md-font-size: dynamic-font(14px) !default;
 
 /// @prop - Color of the toast
-$toast-md-color:                                   $background-color-step-50 !default;
+$toast-md-color: $background-color-step-50 !default;
 
 /// @prop - Border radius of the toast wrapper
-$toast-md-border-radius:                           4px !default;
+$toast-md-border-radius: 4px !default;
 
 /// @prop - Font size of the toast message
-$toast-md-header-line-height:                      20px !default;
+$toast-md-header-line-height: dynamic-font(20px) !default;
 
 /// @prop - Font size of the toast message
-$toast-md-header-font-weight:                      500 !default;
+$toast-md-header-font-weight: 500 !default;
 
 /// @prop - Spacing between the header and the message
-$toast-md-header-margin-bottom:                    2px !default;
+$toast-md-header-margin-bottom: 2px !default;
 
 /// @prop - Font size of the toast message
-$toast-md-message-line-height:                     20px !default;
+$toast-md-message-line-height: dynamic-font(20px) !default;
 
 /// @prop - Padding top of the toast message
-$toast-md-content-padding-top:                     14px !default;
+$toast-md-content-padding-top: 14px !default;
 
 /// @prop - Padding end of the toast content
-$toast-md-content-padding-end:                     16px !default;
+$toast-md-content-padding-end: 16px !default;
 
 /// @prop - Padding bottom of the toast content
-$toast-md-content-padding-bottom:                  $toast-md-content-padding-top !default;
+$toast-md-content-padding-bottom: $toast-md-content-padding-top !default;
 
 /// @prop - Padding start of the toast content
-$toast-md-content-padding-start:                   $toast-md-content-padding-end !default;
+$toast-md-content-padding-start: $toast-md-content-padding-end !default;
 
 /// @prop - Padding top of the toast button
-$toast-md-button-padding-top:                      10px !default;
+$toast-md-button-padding-top: 10px !default;
 
 /// @prop - Padding end of the toast button
-$toast-md-button-padding-end:                      15px !default;
+$toast-md-button-padding-end: 15px !default;
 
 /// @prop - Padding bottom of the toast button
-$toast-md-button-padding-bottom:                   $toast-md-button-padding-top !default;
+$toast-md-button-padding-bottom: $toast-md-button-padding-top !default;
 
 /// @prop - Padding start of the toast button
-$toast-md-button-padding-start:                    15px !default;
+$toast-md-button-padding-start: 15px !default;
 
 /// @prop - Font size of the toast button
-$toast-md-button-font-size:                        14px !default;
+$toast-md-button-font-size: dynamic-font(14px) !default;
 
 /// @prop - Font weight of the toast button
-$toast-md-button-font-weight:                      500 !default;
+$toast-md-button-font-weight: 500 !default;
 
 /// @prop - Letter spacing of the toast button
-$toast-md-button-letter-spacing:                   0.84px !default;
+$toast-md-button-letter-spacing: 0.84px !default;
 
 /// @prop - Background color of the toast button
-$toast-md-button-background-color:                 transparent !default;
+$toast-md-button-background-color: transparent !default;
 
 /// @prop - Text transform of the toast button
-$toast-md-button-text-transform:                   uppercase !default;
+$toast-md-button-text-transform: uppercase !default;
 
 /// @prop - Opacity of the toast button background on hover
-$toast-md-button-opacity-hover:                    0.08 !default;
+$toast-md-button-opacity-hover: 0.08 !default;
 
 /// @prop - Background color of the toast button on hover
-$toast-md-button-background-color-hover:           ion-color(primary, base, $toast-md-button-opacity-hover) !default;
+$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover) !default;
 
 /// @prop - Text color of the cancel toast button
-$toast-md-button-cancel-text-color:                $background-color-step-100 !default;
+$toast-md-button-cancel-text-color: $background-color-step-100 !default;
 
 /// @prop - Background color of the cancel toast button on hover
-$toast-md-button-cancel-background-color-hover:    rgba($background-color-rgb, $toast-md-button-opacity-hover) !default;
+$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover) !default;
 
 /// @prop - Padding of the icon only toast button
-$toast-md-button-icon-only-padding:                9px !default;
+$toast-md-button-icon-only-padding: 9px !default;
 
 /// @prop - Width of the icon only toast button
-$toast-md-button-icon-only-width:                  36px !default;
+$toast-md-button-icon-only-width: 36px !default;
 
 /// @prop - Height of the icon only toast button
-$toast-md-button-icon-only-height:                 $toast-md-button-icon-only-width !default;
+$toast-md-button-icon-only-height: $toast-md-button-icon-only-width !default;
 
 /// @prop - Border radius of the icon only toast button
-$toast-md-button-icon-only-border-radius:          50% !default;
+$toast-md-button-icon-only-border-radius: 50% !default;

core/src/components/toast/toast.scss

@@ -128,6 +128,10 @@
   @include margin(null, null, null, 16px);
 }
 
+.toast-content {
+  min-width: 0;
+}
+
 .toast-message {
   flex: 1;
 
@@ -165,7 +169,6 @@
   align-items: center;
 }
 
-
 // Toast Button: Hover
 // --------------------------------------------------