feat(toast): add global config toastDuration (#26401)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

core/api.txt

@@ -1382,7 +1382,7 @@ ion-toast,prop,animated,boolean,true,false,false
 ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
 ion-toast,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-toast,prop,duration,number,0,false,false
+ion-toast,prop,duration,number,config.getNumber('toastDuration', 0),false,false
 ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false

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

@@ -1,5 +1,5 @@
-import { expect } from '@playwright/test';
 import type { Locator, TestInfo } from '@playwright/test';
+import { expect } from '@playwright/test';
 import type { E2EPage, EventSpy } from '@utils/test/playwright';
 import { test } from '@utils/test/playwright';
 
@@ -134,3 +134,31 @@ test.describe('toast: properties', () => {
     await expect(toast).toHaveClass(/my-custom-class/);
   });
 });
+
+test.describe('toast: duration config', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+  test('should have duration set to 0', async ({ page }) => {
+    await page.setContent(`
+    <ion-toast></ion-toast>
+  `);
+    const toast = page.locator('ion-toast');
+    await expect(toast).toHaveJSProperty('duration', 0);
+  });
+
+  test('should have duration set to 5000', async ({ page }) => {
+    await page.setContent(`
+    <ion-toast></ion-toast>
+    <script>
+      window.Ionic = {
+        config: { toastDuration: 5000 } 
+      }
+    </script>
+  `);
+
+    const toast = page.locator('ion-toast');
+    await expect(toast).toHaveJSProperty('duration', 5000);
+  });
+});

core/src/components/toast/toast.tsx

@@ -1,6 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
@@ -77,7 +78,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
    * How many milliseconds to wait before hiding the toast. By default, it will show
    * until `dismiss()` is called.
    */
-  @Prop() duration = 0;
+  @Prop() duration = config.getNumber('toastDuration', 0);
 
   /**
    * Header to be shown in the toast.

core/src/utils/config.ts

@@ -96,6 +96,11 @@ export interface IonicConfig {
    */
   tabButtonLayout?: TabButtonLayout;
 
+  /**
+   * Overrides the default `duration` for all `ion-toast` components.
+   */
+  toastDuration?: number;
+
   /**
    * Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application.
    * This prop allows to replace the default transition and provide a custom one that applies to all navigation outlets.