Styles for action and cancel buttons (#214)

* feat: ✨ cancel and action button custom styles Provide custom styles to cancel and action buttons * test: ✅ custom styles for buttons test tests to check the custom background color on action and cancel button * refactor: ⏪ remove duration remove duration on default-button
emilkowalski · Nov 5, 2023 · 2d7ba3e · 2d7ba3e
1 parent f8c7128
commit 2d7ba3e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git 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;
@@ -64,6 +66,8 @@ const Toast = (props: ToastProps) => {
     removeToast,
     closeButton,
     style,
+    cancelButtonStyle,
+    actionButtonStyle,
     className = '',
     descriptionClassName = '',
     duration: durationFromToaster,
@@ -357,6 +361,7 @@ const Toast = (props: ToastProps) => {
             <button
               data-button
               data-cancel
+              style={cancelButtonStyle}
               onClick={() => {
                 if (!dismissible) return;
                 deleteToast();
@@ -371,6 +376,7 @@ const Toast = (props: ToastProps) => {
           {toast.action ? (
             <button
               data-button=""
+              style={actionButtonStyle}
               onClick={(event) => {
                 toast.action?.onClick(event);
                 if (event.defaultPrevented) return;
@@ -624,6 +630,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
@@ -51,6 +51,8 @@ interface ToastOptions {
   className?: string;
   descriptionClassName?: string;
   style?: React.CSSProperties;
+  cancelButtonStyle?: React.CSSProperties;
+  actionButtonStyle?: React.CSSProperties;
   duration?: number;
   unstyled?: boolean;
 }

diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
@@ -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>
@@ -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
@@ -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)');
+  });
 });