Improve unstyled prop, add docs (#240)

* Add unstled prop

* Add closeButtonLabel

src/index.tsx

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 
 import './styles.css';
 import { getAsset, Loader } from './assets';
-import type { HeightT, Position, ToastT, ToastToDismiss, ExternalToast, ToasterProps, ToastClassnames } from './types';
+import type { HeightT, ToastT, ToastToDismiss, ExternalToast, ToasterProps, ToastProps } from './types';
 import { ToastState, toast } from './state';
 
 // Visible toasts amount
@@ -27,33 +27,6 @@ const SWIPE_THRESHOLD = 20;
 
 const TIME_BEFORE_UNMOUNT = 200;
 
-interface ToastProps {
-  toast: ToastT;
-  toasts: ToastT[];
-  index: number;
-  expanded: boolean;
-  invert: boolean;
-  heights: HeightT[];
-  setHeights: React.Dispatch<React.SetStateAction<HeightT[]>>;
-  removeToast: (toast: ToastT) => void;
-  gap?: number;
-  position: Position;
-  visibleToasts: number;
-  expandByDefault: boolean;
-  closeButton: boolean;
-  interacting: boolean;
-  style?: React.CSSProperties;
-  cancelButtonStyle?: React.CSSProperties;
-  actionButtonStyle?: React.CSSProperties;
-  duration?: number;
-  className?: string;
-  unstyled?: boolean;
-  descriptionClassName?: string;
-  loadingIcon?: React.ReactNode;
-  classNames?: ToastClassnames;
-  closeButtonAriaLabel?: string;
-}
-
 function cn(...classes: (string | undefined)[]) {
   return classes.filter(Boolean).join(' ');
 }
@@ -62,6 +35,7 @@ const Toast = (props: ToastProps) => {
   const {
     invert: ToasterInvert,
     toast,
+    unstyled,
     interacting,
     setHeights,
     visibleToasts,
@@ -249,7 +223,7 @@ const Toast = (props: ToastProps) => {
         toast?.classNames?.[toastType],
       )}
       data-sonner-toast=""
-      data-styled={!Boolean(toast.jsx || toast.unstyled)}
+      data-styled={!Boolean(toast.jsx || toast.unstyled || unstyled)}
       data-mounted={mounted}
       data-promise={Boolean(toast.promise)}
       data-removed={removed}
@@ -661,6 +635,7 @@ const Toaster = (props: ToasterProps) => {
                   interacting={interacting}
                   position={position}
                   style={toastOptions?.style}
+                  unstyled={toastOptions?.unstyled}
                   classNames={toastOptions?.classNames}
                   cancelButtonStyle={toastOptions?.cancelButtonStyle}
                   actionButtonStyle={toastOptions?.actionButtonStyle}

src/types.ts

@@ -25,7 +25,6 @@ export interface ToastClassnames {
   warning?: string;
 }
 
-// TODO: CLEANUP TYPES
 export interface ToastT {
   id: number | string;
   title?: string | React.ReactNode;
@@ -96,6 +95,33 @@ export interface ToasterProps {
   containerAriaLabel?: string;
 }
 
+export interface ToastProps {
+  toast: ToastT;
+  toasts: ToastT[];
+  index: number;
+  expanded: boolean;
+  invert: boolean;
+  heights: HeightT[];
+  setHeights: React.Dispatch<React.SetStateAction<HeightT[]>>;
+  removeToast: (toast: ToastT) => void;
+  gap?: number;
+  position: Position;
+  visibleToasts: number;
+  expandByDefault: boolean;
+  closeButton: boolean;
+  interacting: boolean;
+  style?: React.CSSProperties;
+  cancelButtonStyle?: React.CSSProperties;
+  actionButtonStyle?: React.CSSProperties;
+  duration?: number;
+  className?: string;
+  unstyled?: boolean;
+  descriptionClassName?: string;
+  loadingIcon?: React.ReactNode;
+  classNames?: ToastClassnames;
+  closeButtonAriaLabel?: string;
+}
+
 export enum SwipeStateTypes {
   SwipedOut = 'SwipedOut',
   SwipedBack = 'SwipedBack',

website/src/components/Hero/index.tsx

@@ -19,6 +19,7 @@ export const Hero = () => {
           onClick={() => {
             toast('Sonner', {
               description: 'An opinionated toast component for React.',
+              unstyled: true,
             });
           }}
           className={styles.button}

website/src/pages/styling.mdx

@@ -26,18 +26,19 @@ toast('Hello World', {
 
 ## Tailwind CSS
 
-The preferred way to style the toasts with tailwind is by using the `classNames` prop. Exclamation mark in front of the class is required to override the default styles.
+The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.
 
 ```jsx
 <Toaster
   toastOptions={{
+    unstyled: true,
     classNames: {
-      toast: '!bg-blue-400',
-      title: '!text-red-400',
-      description: '!text-red-400',
-      actionButton: '!bg-zinc-400',
-      cancelButton: '!bg-orange-400',
-      closeButton: '!bg-lime-400',
+      toast: 'bg-blue-400',
+      title: 'text-red-400',
+      description: 'text-red-400',
+      actionButton: 'bg-zinc-400',
+      cancelButton: 'bg-orange-400',
+      closeButton: 'bg-lime-400',
     },
   }}
 />
@@ -47,13 +48,14 @@ You can do the same when calling `toast()`.
 
 ```jsx
 toast('Hello World', {
+  unstyled: true,
   classNames: {
-    toast: '!bg-blue-400',
-    title: '!text-red-400 !text-2xl',
-    description: '!text-red-400',
-    actionButton: '!bg-zinc-400',
-    cancelButton: '!bg-orange-400',
-    closeButton: '!bg-lime-400',
+    toast: 'bg-blue-400',
+    title: 'text-red-400 text-2xl',
+    description: 'text-red-400',
+    actionButton: 'bg-zinc-400',
+    cancelButton: 'bg-orange-400',
+    closeButton: 'bg-lime-400',
   },
 });
 ```
@@ -63,24 +65,13 @@ Styling per toast type is also possible.
 ```jsx
 <Toaster
   toastOptions={{
+    unstyled: true,
     classNames: {
-      error: '!bg-red-400',
-      success: '!text-green-400',
-      warning: '!text-yellow-400',
-      info: '!bg-blue-400',
+      error: 'bg-red-400',
+      success: 'text-green-400',
+      warning: 'text-yellow-400',
+      info: 'bg-blue-400',
     },
   }}
 />
 ```
-
-## No styles
-
-You can also disable default styles by going headless.
-
-```jsx
-toast.custom((t) => (
-  <div>
-    This is a custom component <button onClick={() => toast.dismiss(t)}>close</button>
-  </div>
-));
-```