From 2f66c2e87ad174f01e908b2db0af04e0095e4455 Mon Sep 17 00:00:00 2001 From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Sat, 13 Jan 2024 22:48:06 +0330 Subject: [PATCH 1/8] feat: add `icons` prop to `` (#270) Co-authored-by: amirhhashemi <87268103+amirhhashemi@users.noreply.github> --- src/index.tsx | 22 ++++++++++++++-------- src/types.ts | 18 ++++++++++++++++++ website/src/pages/styling.mdx | 24 ++++++++++++++++++++++++ website/src/pages/toaster.mdx | 2 +- 4 files changed, 57 insertions(+), 9 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 7afdb9a..6ef206c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -56,6 +56,7 @@ const Toast = (props: ToastProps) => { loadingIcon: loadingIconProp, expandByDefault, classNames, + icons, closeButtonAriaLabel = 'Close toast', } = props; const [mounted, setMounted] = React.useState(false); @@ -193,6 +194,13 @@ const Toast = (props: ToastProps) => { }, [deleteToast, toast.delete]); function getLoadingIcon() { + if (icons.loading) { + return ( +
+ {icons.loading} +
+ ); + } if (loadingIconProp) { return (
@@ -332,8 +340,9 @@ const Toast = (props: ToastProps) => { <> {toastType || toast.icon || toast.promise ? (
- {(toast.promise || toast.type === 'loading') && !toast.icon ? getLoadingIcon() : null} - {toast.icon || getAsset(toastType)} + {toast.promise || toastType === 'loading' + ? toast.icon || icons.loading || getLoadingIcon() + : toast.icon || icons[toastType] || getAsset(toastType)}
) : null} @@ -423,6 +432,7 @@ const Toaster = (props: ToasterProps) => { dir = getDocumentDirection(), gap, loadingIcon, + icons, containerAriaLabel = 'Notifications', } = props; const [toasts, setToasts] = React.useState([]); @@ -643,6 +653,7 @@ const Toaster = (props: ToasterProps) => { expandByDefault={expand} gap={gap} loadingIcon={loadingIcon} + icons={icons} expanded={expanded} /> ))} @@ -652,9 +663,4 @@ const Toaster = (props: ToasterProps) => { ); }; -export { - toast, - Toaster, - type ToastT, - type ExternalToast -}; +export { toast, Toaster, type ToastT, type ExternalToast }; diff --git a/src/types.ts b/src/types.ts index eab1a96..9a6f87c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -29,6 +29,14 @@ export interface ToastClassnames { default?: string; } +export interface ToastIcons { + success?: React.ReactNode; + info?: React.ReactNode; + warning?: React.ReactNode; + error?: React.ReactNode; + loading?: React.ReactNode; +} + export interface ToastT { id: number | string; title?: string | React.ReactNode; @@ -95,8 +103,17 @@ export interface ToasterProps { style?: React.CSSProperties; offset?: string | number; dir?: 'rtl' | 'ltr' | 'auto'; + /** + * @deprecated Please use the `icons` prop instead: + * ```jsx + * }} + * /> + * ``` + */ loadingIcon?: React.ReactNode; containerAriaLabel?: string; + icons?: ToastIcons; } export interface ToastProps { @@ -123,6 +140,7 @@ export interface ToastProps { descriptionClassName?: string; loadingIcon?: React.ReactNode; classNames?: ToastClassnames; + icons?: ToastIcons; closeButtonAriaLabel?: string; } diff --git a/website/src/pages/styling.mdx b/website/src/pages/styling.mdx index c5427d2..3482bb9 100644 --- a/website/src/pages/styling.mdx +++ b/website/src/pages/styling.mdx @@ -75,3 +75,27 @@ Styling per toast type is also possible. }} /> ``` + +## Changing Icons + +You can change the default icons using the `icons` prop: + +```jsx +, + info: , + warning: , + error: , + loading: , + }} +/> +``` + +You can also set an icon for each toast: + +```jsx +toast('Hello World', { + icon: +}); +``` diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx index 7a7323f..d9e6f53 100644 --- a/website/src/pages/toaster.mdx +++ b/website/src/pages/toaster.mdx @@ -63,4 +63,4 @@ Changes the directionality of the toast's text. | invert | Dark toasts in light mode and vice versa. | `false` | | toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` | | gap | Gap between toasts when expanded | `14` | -| loadingIcon | Changes the default loading icon | `-` | +| icons | Changes the default icons | `-` | From 2282469def652530d3b113bd3c24f38dd5c53787 Mon Sep 17 00:00:00 2001 From: emilkowalski Date: Sun, 14 Jan 2024 12:10:23 +0100 Subject: [PATCH 2/8] Check if icon exists --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 6ef206c..d0ba5b4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -342,7 +342,7 @@ const Toast = (props: ToastProps) => {
{toast.promise || toastType === 'loading' ? toast.icon || icons.loading || getLoadingIcon() - : toast.icon || icons[toastType] || getAsset(toastType)} + : toast.icon || icons?.[toastType] || getAsset(toastType)}
) : null} From 7c19a8c9030d9f4255927f2a7bb3f2ee721561c1 Mon Sep 17 00:00:00 2001 From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com> Date: Sun, 14 Jan 2024 12:18:31 +0100 Subject: [PATCH 3/8] Fix types of toaster icons (#294) --- src/index.tsx | 15 ++------------- src/types.ts | 18 ------------------ website/src/pages/styling.mdx | 24 ------------------------ website/src/pages/toaster.mdx | 2 +- 4 files changed, 3 insertions(+), 56 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index d0ba5b4..d60f56b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -56,7 +56,6 @@ const Toast = (props: ToastProps) => { loadingIcon: loadingIconProp, expandByDefault, classNames, - icons, closeButtonAriaLabel = 'Close toast', } = props; const [mounted, setMounted] = React.useState(false); @@ -194,13 +193,6 @@ const Toast = (props: ToastProps) => { }, [deleteToast, toast.delete]); function getLoadingIcon() { - if (icons.loading) { - return ( -
- {icons.loading} -
- ); - } if (loadingIconProp) { return (
@@ -340,9 +332,8 @@ const Toast = (props: ToastProps) => { <> {toastType || toast.icon || toast.promise ? (
- {toast.promise || toastType === 'loading' - ? toast.icon || icons.loading || getLoadingIcon() - : toast.icon || icons?.[toastType] || getAsset(toastType)} + {(toast.promise || toast.type === 'loading') && !toast.icon ? getLoadingIcon() : null} + {toast.icon || getAsset(toastType)}
) : null} @@ -432,7 +423,6 @@ const Toaster = (props: ToasterProps) => { dir = getDocumentDirection(), gap, loadingIcon, - icons, containerAriaLabel = 'Notifications', } = props; const [toasts, setToasts] = React.useState([]); @@ -653,7 +643,6 @@ const Toaster = (props: ToasterProps) => { expandByDefault={expand} gap={gap} loadingIcon={loadingIcon} - icons={icons} expanded={expanded} /> ))} diff --git a/src/types.ts b/src/types.ts index 9a6f87c..eab1a96 100644 --- a/src/types.ts +++ b/src/types.ts @@ -29,14 +29,6 @@ export interface ToastClassnames { default?: string; } -export interface ToastIcons { - success?: React.ReactNode; - info?: React.ReactNode; - warning?: React.ReactNode; - error?: React.ReactNode; - loading?: React.ReactNode; -} - export interface ToastT { id: number | string; title?: string | React.ReactNode; @@ -103,17 +95,8 @@ export interface ToasterProps { style?: React.CSSProperties; offset?: string | number; dir?: 'rtl' | 'ltr' | 'auto'; - /** - * @deprecated Please use the `icons` prop instead: - * ```jsx - * }} - * /> - * ``` - */ loadingIcon?: React.ReactNode; containerAriaLabel?: string; - icons?: ToastIcons; } export interface ToastProps { @@ -140,7 +123,6 @@ export interface ToastProps { descriptionClassName?: string; loadingIcon?: React.ReactNode; classNames?: ToastClassnames; - icons?: ToastIcons; closeButtonAriaLabel?: string; } diff --git a/website/src/pages/styling.mdx b/website/src/pages/styling.mdx index 3482bb9..c5427d2 100644 --- a/website/src/pages/styling.mdx +++ b/website/src/pages/styling.mdx @@ -75,27 +75,3 @@ Styling per toast type is also possible. }} /> ``` - -## Changing Icons - -You can change the default icons using the `icons` prop: - -```jsx -, - info: , - warning: , - error: , - loading: , - }} -/> -``` - -You can also set an icon for each toast: - -```jsx -toast('Hello World', { - icon: -}); -``` diff --git a/website/src/pages/toaster.mdx b/website/src/pages/toaster.mdx index d9e6f53..7a7323f 100644 --- a/website/src/pages/toaster.mdx +++ b/website/src/pages/toaster.mdx @@ -63,4 +63,4 @@ Changes the directionality of the toast's text. | invert | Dark toasts in light mode and vice versa. | `false` | | toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` | | gap | Gap between toasts when expanded | `14` | -| icons | Changes the default icons | `-` | +| loadingIcon | Changes the default loading icon | `-` | From 3f2162c91f691fb2fbdfa388b30c536b37e7ce83 Mon Sep 17 00:00:00 2001 From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com> Date: Sun, 14 Jan 2024 19:46:44 +0100 Subject: [PATCH 4/8] Fix loading icon bug (#295) * Fix loading icon bug * Revert hero changes --- src/styles.css | 1 - website/src/components/Hero/index.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles.css b/src/styles.css index 2c1a124..cd7797d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -520,7 +520,6 @@ html[dir='rtl'], .sonner-loading-bar:nth-child(1) { animation-delay: -1.2s; - /* Rotate trick to avoid adding an additional pixel in some sizes */ transform: rotate(0.0001deg) translate(146%); } diff --git a/website/src/components/Hero/index.tsx b/website/src/components/Hero/index.tsx index 8af5ae8..2e9dbcc 100644 --- a/website/src/components/Hero/index.tsx +++ b/website/src/components/Hero/index.tsx @@ -18,7 +18,7 @@ export const Hero = () => { data-primary="" onClick={() => { toast('Sonner', { - description: 'An opinionated toast component for React.' + description: 'An opinionated toast component for React.', }); }} className={styles.button} From 790ce11753bb7e5db1cc6c2437c5de00f89ee9b3 Mon Sep 17 00:00:00 2001 From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com> Date: Sun, 14 Jan 2024 19:54:00 +0100 Subject: [PATCH 5/8] Add close button prop to toast (#296) --- src/index.tsx | 2 +- src/types.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index d60f56b..08686ba 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -295,7 +295,7 @@ const Toast = (props: ToastProps) => { } }} > - {closeButton && !toast.jsx ? ( + {(closeButton || toast.closeButton) && !toast.jsx ? (