From da3fdda0ab19c4b2bc15443f4f4656237c40f74e Mon Sep 17 00:00:00 2001
From: Clara Castillo <claracastillochale@gmail.com>
Date: Tue, 16 Apr 2024 13:16:17 +0200
Subject: [PATCH] feat: add closeButton property to toast options (#17)

* feat: add closeButton property to toast options

* tests: add closeButton tests
---
 libs/ngx-sonner/src/lib/toast.component.ts |  7 +++++--
 libs/ngx-sonner/src/lib/types.ts           | 11 ++++++-----
 libs/ngx-sonner/src/tests/toaster.spec.ts  | 15 +++++++++++++--
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/libs/ngx-sonner/src/lib/toast.component.ts b/libs/ngx-sonner/src/lib/toast.component.ts
index 101a6b0..3bbb736 100644
--- a/libs/ngx-sonner/src/lib/toast.component.ts
+++ b/libs/ngx-sonner/src/lib/toast.component.ts
@@ -79,7 +79,7 @@ const defaultClasses: ToastClassnames = {
       (pointerdown)="onPointerDown($event)"
       (pointerup)="onPointerUp()"
       (pointermove)="onPointerMove($event)">
-      @if (toast().dismissible && closeButton() && !toast().component) {
+      @if (closeButton() && !toast().component) {
         <button
           aria-label="Close toast"
           [attr.data-disabled]="disabled()"
@@ -219,7 +219,9 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
   position = input.required<ToastProps['position']>();
   visibleToasts = input.required<ToastProps['visibleToasts']>();
   expandByDefault = input.required<ToastProps['expandByDefault']>();
-  closeButton = input.required<ToastProps['closeButton']>();
+  _closeButton = input.required<ToastProps['closeButton']>({
+    alias: 'closeButton',
+  });
   interacting = input.required<ToastProps['interacting']>();
   cancelButtonStyle = input<ToastProps['cancelButtonStyle']>();
   actionButtonStyle = input<ToastProps['actionButtonStyle']>();
@@ -268,6 +270,7 @@ export class ToastComponent implements AfterViewInit, OnDestroy {
     }, 0)
   );
   invert = computed(() => this.toast().invert ?? this._invert());
+  closeButton = computed(() => this.toast().closeButton ?? this._closeButton());
   disabled = computed(() => this.toastType() === 'loading');
 
   timeoutId: ReturnType<typeof setTimeout> | undefined;
diff --git a/libs/ngx-sonner/src/lib/types.ts b/libs/ngx-sonner/src/lib/types.ts
index b9ab864..e6b0af9 100644
--- a/libs/ngx-sonner/src/lib/types.ts
+++ b/libs/ngx-sonner/src/lib/types.ts
@@ -35,9 +35,9 @@ export type ToastT = {
   component?: Type<unknown>;
   componentProps?: Record<string, unknown>;
   invert?: boolean;
+  closeButton?: boolean;
+  dismissible?: boolean;
   description?: string | Type<unknown>;
-  cancelButtonStyle?: string;
-  actionButtonStyle?: string;
   duration?: number;
   delete?: boolean;
   important?: boolean;
@@ -51,16 +51,17 @@ export type ToastT = {
   };
   onDismiss?: (toast: ToastT) => void;
   onAutoClose?: (toast: ToastT) => void;
-  dismissible?: boolean;
   promise?: PromiseT;
+  cancelButtonStyle?: string;
+  actionButtonStyle?: string;
   style?: Record<string, unknown>;
+  unstyled?: boolean;
   class?: string;
   classes?: ToastClassnames;
   descriptionClass?: string;
   position?: Position;
-  unstyled?: boolean;
   /**
-   * @internal This is used to determine if the toast has been updated to determine when to reset timer. Hacky but works.
+   * @internal This is used to determine if the toast has been updated to determine when to reset timer.
    */
   updated?: boolean;
 };
diff --git a/libs/ngx-sonner/src/tests/toaster.spec.ts b/libs/ngx-sonner/src/tests/toaster.spec.ts
index 301b592..effac62 100644
--- a/libs/ngx-sonner/src/tests/toaster.spec.ts
+++ b/libs/ngx-sonner/src/tests/toaster.spec.ts
@@ -263,9 +263,9 @@ describe('Toaster', () => {
     expect(closeButton).not.toBeNull();
   });
 
-  it('should not show close button if the toast is not dismissible', async () => {
+  it('should not show close button if the toast has closeButton false', async () => {
     const { user, trigger, container } = await setup({
-      callback: toast => toast('Hello world', { dismissible: false }),
+      callback: toast => toast('Hello world', { closeButton: false }),
       closeButton: true,
     });
 
@@ -273,4 +273,15 @@ describe('Toaster', () => {
     const closeButton = container.querySelector('[data-close-button]');
     expect(closeButton).toBeNull();
   });
+
+  it('should show close button if the toast has closeButton true', async () => {
+    const { user, trigger, container } = await setup({
+      callback: toast => toast('Hello world', { closeButton: true }),
+      closeButton: false,
+    });
+
+    await user.click(trigger);
+    const closeButton = container.querySelector('[data-close-button]');
+    expect(closeButton).not.toBeNull();
+  });
 });