diff --git a/core/api.txt b/core/api.txt index dfbe534506..11f31c39ec 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2436,6 +2436,7 @@ 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 +ion-toast,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false ion-toast,prop,icon,string | undefined,undefined,false,false ion-toast,prop,isOpen,boolean,false,false,false ion-toast,prop,keyboardClose,boolean,false,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index cbafd50225..82ace58b59 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3844,6 +3844,10 @@ export namespace Components { * Additional attributes to pass to the toast. */ "htmlAttributes"?: { [key: string]: any }; + /** + * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors. Only applies to the `ionic` theme. + */ + "hue"?: 'bold' | 'subtle'; /** * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons */ @@ -9384,6 +9388,10 @@ declare namespace LocalJSX { * Additional attributes to pass to the toast. */ "htmlAttributes"?: { [key: string]: any }; + /** + * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors. Only applies to the `ionic` theme. + */ + "hue"?: 'bold' | 'subtle'; /** * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons */ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 7c3694b820..63a3b23151 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 6ee511d7e5..944995c9a6 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png index 2c6e8c1b00..99df1dbbc4 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2e5a871acd..52c3d633ce 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6234718e64..f791903d94 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png index cbf4d529af..9216eaaf21 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index c0ba2ed702..3a8d8ac77f 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index 3d08835441..f2d776d044 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index ce1d2fb270..d3efc768ff 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png index b10ba5ec33..d511078fca 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png index 89843300f3..56969878ee 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png index ea42377932..edbfcf661c 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6f594dbc4d..6a7851a054 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index e9d6eeb200..8e3ea9c3f1 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 66eebbbd0d..8ba446ba6c 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png index 6f0a8850fe..690808c5ec 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 81fe21af0b..0d12596d14 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png index 6246271db5..c81c1b12b3 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png index d5bd7c8232..07be2789ef 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png index b366dd4cec..50a865e244 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png index d5c3b0f39e..47a5cd4650 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index a38418f090..ee25c62192 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6e1b724224..e3cd427469 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png index 006fe51b90..104f336bcd 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png index 0dbdff78d2..644a01f391 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png index eaefd542d7..2f375a2d0f 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png index 9127f3d957..e1d3433588 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9f8b50955e..50396a94f6 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5bf232ee54..c490be182e 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 04c67a0f79..60e92a8539 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png index d0902c17d4..2a1acc08a4 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 6a485fd4e0..945c719ba7 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png index e1953c135b..a9fb9a673a 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png index 90eae0d6f3..51bd7c0f00 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png index dc712a8741..e5bddca717 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png index 5798ffb61a..f75ee8a068 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/hue/index.html b/core/src/components/toast/test/hue/index.html new file mode 100644 index 0000000000..a41d2ecaa0 --- /dev/null +++ b/core/src/components/toast/test/hue/index.html @@ -0,0 +1,123 @@ + + + + + Toast - Hue + + + + + + + + + + + + + Toast - Hue + + + + +

+ Toasts are presented indefinitely but can be closed by clicking the backdrop. The backdrop has been added for + demo purposes only. +

+ + + +
+ +
+ + + + + + + + + + + +
+ + + + + + diff --git a/core/src/components/toast/test/hue/toast.e2e.ts b/core/src/components/toast/test/hue/toast.e2e.ts new file mode 100644 index 0000000000..669d6fba39 --- /dev/null +++ b/core/src/components/toast/test/hue/toast.e2e.ts @@ -0,0 +1,59 @@ +import { expect } from '@playwright/test'; +import type { E2EPage, E2EPageOptions, ScreenshotFn, EventSpy } from '@utils/test/playwright'; +import { configs, test } from '@utils/test/playwright'; + +class ToastFixture { + readonly page: E2EPage; + + private ionToastDidPresent!: EventSpy; + + constructor(page: E2EPage) { + this.page = page; + } + + async goto(config: E2EPageOptions) { + const { page } = this; + await page.goto(`/src/components/toast/test/hue`, config); + this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent'); + } + + async openToast(selector: string) { + const { page, ionToastDidPresent } = this; + const button = page.locator(selector); + await button.click(); + + await ionToastDidPresent.next(); + + return { + toast: page.locator('ion-toast'), + }; + } + + async screenshot(screenshotModifier: string, screenshot: ScreenshotFn) { + const { page } = this; + + const screenshotString = screenshot(`toast-${screenshotModifier}`); + + await expect(page).toHaveScreenshot(screenshotString); + } +} + +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toast: hue'), () => { + let toastFixture: ToastFixture; + test.beforeEach(async ({ page }) => { + toastFixture = new ToastFixture(page); + await toastFixture.goto(config); + }); + + test('should show all subtle toasts', async () => { + await toastFixture.openToast('#show-subtle-toasts'); + await toastFixture.screenshot('subtle', screenshot); + }); + + test('should show all bold toasts', async () => { + await toastFixture.openToast('#show-bold-toasts'); + await toastFixture.screenshot('bold', screenshot); + }); + }); +}); diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..04a8397bc5 Binary files /dev/null and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1fbdd87e67 Binary files /dev/null and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ab654cbcb9 Binary files /dev/null and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..00be23d960 Binary files /dev/null and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a71586e169 Binary files /dev/null and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..33b68eb2da Binary files /dev/null and b/core/src/components/toast/test/hue/toast.e2e.ts-snapshots/toast-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index e7466de6cb..39b62e795d 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index 872777d841..bc9a51cd4d 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index 9981ce2f9f..84c96c47a9 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index c92a5e9e32..4c71bfc259 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index c45f0407bf..29680c67c9 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 5549fba8cf..df625e2a31 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 563ddf694f..6be4722ab3 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2d465bfb99..05031b6273 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index e0f64caf4f..43d3294b6f 100644 Binary files a/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/toast.ionic.scss b/core/src/components/toast/toast.ionic.scss index 29eda6c9d9..36b188f22c 100644 --- a/core/src/components/toast/toast.ionic.scss +++ b/core/src/components/toast/toast.ionic.scss @@ -5,10 +5,7 @@ // -------------------------------------------------- :host { - --background: #{globals.$ion-primitives-neutral-1200}; --box-shadow: #{globals.$ion-elevation-4}; - --button-color: #{globals.$ion-primitives-base-white}; - --color: #{globals.$ion-primitives-base-white}; --max-width: 343px; --start: 8px; --end: 8px; @@ -132,3 +129,41 @@ .toast-button-icon { font-size: globals.$ion-scale-600; } + +// Bold Toast +// -------------------------------------------------- + +:host(.toast-hue-bold) { + --background: #{globals.$ion-bg-neutral-boldest-default}; + --background-activated: #{globals.$ion-bg-neutral-boldest-press}; + --color: #{globals.$ion-text-inverse}; + --button-color: #{globals.$ion-text-inverse}; +} + +:host(.toast-hue-bold.ion-color) .toast-wrapper { + background: globals.current-color(base); + color: globals.current-color(contrast); +} + +:host(.toast-hue-bold.ion-color) .toast-button { + color: globals.current-color(contrast); +} + +// Subtle Toast +// -------------------------------------------------- + +:host(.toast-hue-subtle) { + --background: #{globals.$ion-bg-neutral-subtlest-default}; + --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; + --color: #{globals.$ion-text-default}; + --button-color: #{globals.$ion-text-link-default}; +} + +:host(.toast-hue-subtle) .toast-button-cancel { + color: #{globals.$ion-icon-subtlest}; +} + +:host(.toast-hue-subtle.ion-color) .toast-wrapper { + background: globals.current-color(base, $subtle: true); + color: globals.current-color(contrast, $subtle: true); +} diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 2d8cfec18c..f206ded020 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -135,6 +135,14 @@ export class Toast implements ComponentInterface, OverlayInterface { */ @Prop() header?: string; + /** + * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for + * a toast with muted, subtle colors. + * + * Only applies to the `ionic` theme. + */ + @Prop() hue?: 'bold' | 'subtle' = 'subtle'; + /** * Defines how the message and buttons are laid out in the toast. * 'baseline': The message and the buttons will appear on the same line. @@ -715,7 +723,7 @@ export class Toast implements ComponentInterface, OverlayInterface { } render() { - const { layout, el, revealContentToScreenReader, header, message } = this; + const { layout, el, revealContentToScreenReader, header, hue, message } = this; const allButtons = this.getButtons(); const startButtons = allButtons.filter((b) => b.side === 'start'); const endButtons = allButtons.filter((b) => b.side !== 'start'); @@ -753,6 +761,7 @@ export class Toast implements ComponentInterface, OverlayInterface { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, + [`toast-hue-${hue}`]: hue !== undefined, })} onIonToastWillDismiss={this.dispatchCancelHandler} > diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 325e804149..815b742a0d 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2439,7 +2439,7 @@ export declare interface IonTitle extends Components.IonTitle {} @ProxyCmp({ - inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], + inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'] }) @Component({ @@ -2447,7 +2447,7 @@ export declare interface IonTitle extends Components.IonTitle {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], + inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], }) export class IonToast { protected el: HTMLIonToastElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index b563708445..590555cdc8 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -2202,7 +2202,7 @@ export declare interface IonTitle extends Components.IonTitle {} @ProxyCmp({ defineCustomElementFn: defineIonToast, - inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], + inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'] }) @Component({ @@ -2210,7 +2210,7 @@ export declare interface IonTitle extends Components.IonTitle {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], + inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'], standalone: true }) export class IonToast { diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index b4e565ae0f..8947a5e628 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -28,5 +28,5 @@ export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'theme', 'translucent', 'trigger', 'triggerAction']); -export const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger']); +export const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger']);