diff --git a/src/index.tsx b/src/index.tsx index d4a07ca..2763272 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; @@ -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) => { + @@ -143,7 +157,15 @@ export default function Home({ searchParams }: any) { {showAutoClose ?
: null} {showDismiss ?
: null} - + ); } 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)'); + }); });