From ae4e1cd1649789bbce4455887c797a2f302b741c Mon Sep 17 00:00:00 2001
From: jorgeAgoiz <jorgeagoiz@gmail.com>
Date: Wed, 1 Nov 2023 12:08:22 +0100
Subject: [PATCH 1/3] feat: :sparkles: cancel and action button custom styles

Provide custom styles to cancel and action buttons
---
 src/index.tsx | 8 ++++++++
 src/types.ts  | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/src/index.tsx b/src/index.tsx
index 0c2af4a..d54179f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -43,6 +43,8 @@ interface ToastProps {
   closeButton: boolean;
   interacting: boolean;
   style?: React.CSSProperties;
+  cancelButtonStyle?: React.CSSProperties;
+  actionButtonStyle?: React.CSSProperties;
   duration?: number;
   className?: string;
   unstyled?: boolean;
@@ -63,6 +65,8 @@ const Toast = (props: ToastProps) => {
     removeToast,
     closeButton,
     style,
+    cancelButtonStyle,
+    actionButtonStyle,
     className = '',
     descriptionClassName = '',
     duration: durationFromToaster,
@@ -346,6 +350,7 @@ const Toast = (props: ToastProps) => {
             <button
               data-button
               data-cancel
+              style={cancelButtonStyle}
               onClick={() => {
                 if (!dismissible) return;
                 deleteToast();
@@ -360,6 +365,7 @@ const Toast = (props: ToastProps) => {
           {toast.action ? (
             <button
               data-button=""
+              style={actionButtonStyle}
               onClick={(event) => {
                 toast.action?.onClick(event);
                 if (event.defaultPrevented) return;
@@ -612,6 +618,8 @@ const Toaster = (props: ToasterProps) => {
                   interacting={interacting}
                   position={position}
                   style={toastOptions?.style}
+                  cancelButtonStyle={toastOptions?.cancelButtonStyle}
+                  actionButtonStyle={toastOptions?.actionButtonStyle}
                   removeToast={removeToast}
                   toasts={toasts}
                   heights={heights}
diff --git a/src/types.ts b/src/types.ts
index 51eec33..a9b8b64 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -51,6 +51,8 @@ interface ToastOptions {
   className?: string;
   descriptionClassName?: string;
   style?: React.CSSProperties;
+  cancelButtonStyle?: React.CSSProperties;
+  actionButtonStyle?: React.CSSProperties;
   duration?: number;
   unstyled?: boolean;
 }

From 851eace218f72091a3c86affbd1ab65f725f9cef Mon Sep 17 00:00:00 2001
From: jorgeAgoiz <jorgeagoiz@gmail.com>
Date: Wed, 1 Nov 2023 14:01:50 +0100
Subject: [PATCH 2/3] test: :white_check_mark: custom styles for buttons test

tests to check the custom background color on action and cancel button
---
 test/src/app/page.tsx    | 30 ++++++++++++++++++++++++++----
 test/tests/basic.spec.ts | 16 +++++++++++++++-
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
index 73181ea..0b5c52e 100644
--- a/test/src/app/page.tsx
+++ b/test/src/app/page.tsx
@@ -16,7 +16,7 @@ export default function Home({ searchParams }: any) {
       <button data-testid="theme-button" className="button" onClick={() => setTheme('dark')}>
         Change theme
       </button>
-      <button data-testid="default-button" className="button" onClick={() => toast('My Toast')}>
+      <button data-testid="default-button" className="button" onClick={() => toast('My Toast', { duration: 4000 })}>
         Render Toast
       </button>
       <button data-testid="default-button-top" className="button" onClick={() => toast('My Toast')}>
@@ -90,6 +90,20 @@ export default function Home({ searchParams }: any) {
       >
         Render Custom Toast
       </button>
+      <button
+        data-testid="custom-cancel-button-toast"
+        className="button"
+        onClick={() =>
+          toast('My Custom Cancel Button', {
+            cancel: {
+              label: 'Cancel',
+              onClick: () => console.log('Cancel'),
+            },
+          })
+        }
+      >
+        Render Custom Cancel Button
+      </button>
       <button data-testid="infinity-toast" className="button" onClick={() => toast('My Toast', { duration: Infinity })}>
         Render Infinity Toast
       </button>
@@ -132,8 +146,8 @@ export default function Home({ searchParams }: any) {
         onClick={() => {
           const toastId = toast('My Unupdated Toast', {
             duration: 10000,
-        });
-        toast('My Updated Toast', {
+          });
+          toast('My Updated Toast', {
             id: toastId,
             duration: 10000,
           });
@@ -143,7 +157,15 @@ export default function Home({ searchParams }: any) {
       </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
-      <Toaster position={searchParams.position || 'bottom-right'} theme={theme} dir={searchParams.dir || 'auto'} />
+      <Toaster
+        position={searchParams.position || 'bottom-right'}
+        toastOptions={{
+          actionButtonStyle: { backgroundColor: 'rgb(219, 239, 255)' },
+          cancelButtonStyle: { backgroundColor: 'rgb(254, 226, 226)' },
+        }}
+        theme={theme}
+        dir={searchParams.dir || 'auto'}
+      />
     </>
   );
 }
diff --git a/test/tests/basic.spec.ts b/test/tests/basic.spec.ts
index de74409..f450701 100644
--- a/test/tests/basic.spec.ts
+++ b/test/tests/basic.spec.ts
@@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => {
 test.describe('Basic functionality', () => {
   test('toast is rendered and disappears after the default timeout', async ({ page }) => {
     await page.getByTestId('default-button').click();
-    await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
+    await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
     await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
   });
 
@@ -165,4 +165,18 @@ test.describe('Basic functionality', () => {
     await expect(page.getByText('My Unupdated Toast')).toHaveCount(0);
     await expect(page.getByText('My Updated Toast')).toHaveCount(1);
   });
+
+  test('cancel button is rendered with custom styles', async ({ page }) => {
+    await page.getByTestId('custom-cancel-button-toast').click();
+    const button = await page.locator('[data-cancel]');
+
+    await expect(button).toHaveCSS('background-color', 'rgb(254, 226, 226)');
+  });
+
+  test('action button is rendered with custom styles', async ({ page }) => {
+    await page.getByTestId('action').click();
+    const button = await page.locator('[data-button]');
+
+    await expect(button).toHaveCSS('background-color', 'rgb(219, 239, 255)');
+  });
 });

From 3b832e1a11a1426d2925a524b7c21276c21fbd49 Mon Sep 17 00:00:00 2001
From: jorgeAgoiz <jorgeagoiz@gmail.com>
Date: Wed, 1 Nov 2023 14:05:18 +0100
Subject: [PATCH 3/3] refactor: :rewind: remove duration

remove duration on default-button
---
 test/src/app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
index 0b5c52e..598cf3d 100644
--- a/test/src/app/page.tsx
+++ b/test/src/app/page.tsx
@@ -16,7 +16,7 @@ export default function Home({ searchParams }: any) {
       <button data-testid="theme-button" className="button" onClick={() => setTheme('dark')}>
         Change theme
       </button>
-      <button data-testid="default-button" className="button" onClick={() => toast('My Toast', { duration: 4000 })}>
+      <button data-testid="default-button" className="button" onClick={() => toast('My Toast')}>
         Render Toast
       </button>
       <button data-testid="default-button-top" className="button" onClick={() => toast('My Toast')}>