From 41bc35168a0e2b60182527ce61067ed3b82d6662 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 5 Feb 2024 09:28:31 -0800 Subject: [PATCH 1/3] refactor(toast): remove cssClass from ToastButton --- BREAKING.md | 4 ++++ core/src/components/toast/toast-interface.ts | 7 ------- core/src/components/toast/toast.tsx | 1 - 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/BREAKING.md b/BREAKING.md index 7669b8840e1..1d897a92d4a 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -149,3 +149,7 @@ This allows components to inherit the color properly when used outside of Ionic - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period. - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively. - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. + +

Toast

+ +- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons. diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index d5ddff69e45..a8e0d1d304d 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -4,7 +4,6 @@ import type { IonicSafeString } from '../../utils/sanitization'; export interface ToastOptions { header?: string; message?: string | IonicSafeString; - cssClass?: string | string[]; duration?: number; buttons?: (ToastButton | string)[]; position?: 'top' | 'bottom' | 'middle'; @@ -27,18 +26,12 @@ export interface ToastOptions { export type ToastLayout = 'baseline' | 'stacked'; -// TODO FW-4923 remove cssClass property - export interface ToastButton { text?: string; icon?: string; side?: 'start' | 'end'; role?: 'cancel' | string; - /** - * @deprecated Use the toast button's CSS Shadow Parts instead. - */ - cssClass?: string | string[]; htmlAttributes?: { [key: string]: any }; handler?: () => boolean | void | Promise; } diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index fe960d3e32e..a71d2f5b238 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -778,7 +778,6 @@ const buttonClass = (button: ToastButton): CssClassMap => { [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true, - ...getClassMap(button.cssClass), }; }; From 10d5d9d68a95ab22aac5643cde660d33ae969bdd Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 5 Feb 2024 14:14:42 -0800 Subject: [PATCH 2/3] refactor(toast): add requested change --- BREAKING.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/BREAKING.md b/BREAKING.md index 1d897a92d4a..66cd108452c 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -153,3 +153,5 @@ This allows components to inherit the color properly when used outside of Ionic

Toast

- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons. + +For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming). From 9a5ef87aa751928499a6ca5309c5ed53133c03a9 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 6 Feb 2024 08:34:06 -0800 Subject: [PATCH 3/3] fix(toast): revert removal from ToastOptions --- core/src/components/toast/toast-interface.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index a8e0d1d304d..8039740438e 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -4,6 +4,7 @@ import type { IonicSafeString } from '../../utils/sanitization'; export interface ToastOptions { header?: string; message?: string | IonicSafeString; + cssClass?: string | string[]; duration?: number; buttons?: (ToastButton | string)[]; position?: 'top' | 'bottom' | 'middle';