From f51fe57e88551ebe5c2ac52b25297d75160227e5 Mon Sep 17 00:00:00 2001
From: Mark Miro <contact@markmiro.com>
Date: Thu, 7 Dec 2023 09:39:33 -0800
Subject: [PATCH] Fix `unstyled` variant not unstyling enough. Add example with
 advanced styling

---
 src/styles.css                                | 26 ++++----
 .../src/components/CustomStyling/index.tsx    | 62 +++++++++++++++++++
 website/src/pages/index.tsx                   |  2 +
 3 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 website/src/components/CustomStyling/index.tsx

diff --git a/src/styles.css b/src/styles.css
index cf3fce9..cfe00ab 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -119,19 +119,19 @@ html[dir='rtl'],
   --lift-amount: calc(var(--lift) * var(--gap));
 }
 
-[data-sonner-toast] [data-description] {
+[data-sonner-toast][data-styled='true'] [data-description] {
   font-weight: 400;
   line-height: 1.4;
   color: inherit;
 }
 
-[data-sonner-toast] [data-title] {
+[data-sonner-toast][data-styled='true'] [data-title] {
   font-weight: 500;
   line-height: 1.5;
   color: inherit;
 }
 
-[data-sonner-toast] [data-icon] {
+[data-sonner-toast][data-styled='true'] [data-icon] {
   display: flex;
   height: 16px;
   width: 16px;
@@ -143,14 +143,14 @@ html[dir='rtl'],
   margin-right: var(--toast-icon-margin-end);
 }
 
-[data-sonner-toast][data-promise='true'] [data-icon] > svg {
+[data-sonner-toast][data-styled='true'][data-promise='true'] [data-icon] > svg {
   opacity: 0;
   transform: scale(0.8);
   transform-origin: center;
   animation: sonner-fade-in 300ms ease forwards;
 }
 
-[data-sonner-toast] [data-icon] > * {
+[data-sonner-toast][data-styled='true'] [data-icon] > * {
   flex-shrink: 0;
 }
 
@@ -165,7 +165,7 @@ html[dir='rtl'],
   gap: 2px;
 }
 
-[data-sonner-toast] [data-button] {
+[data-sonner-toast][data-styled='true'] [data-button] {
   border-radius: 4px;
   padding-left: 8px;
   padding-right: 8px;
@@ -184,7 +184,7 @@ html[dir='rtl'],
   transition: opacity 400ms, box-shadow 200ms;
 }
 
-[data-sonner-toast] [data-button]:focus-visible {
+[data-sonner-toast][data-styled='true'] [data-button]:focus-visible {
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
 }
 
@@ -202,7 +202,7 @@ html[dir='rtl'],
   background: rgba(255, 255, 255, 0.3);
 }
 
-[data-sonner-toast] [data-close-button] {
+[data-sonner-toast][data-styled='true'] [data-close-button] {
   position: absolute;
   left: var(--toast-close-button-start);
   right: var(--toast-close-button-end);
@@ -224,7 +224,7 @@ html[dir='rtl'],
   transition: opacity 100ms, background 200ms, border-color 200ms;
 }
 
-[data-sonner-toast] [data-close-button]:focus-visible {
+[data-sonner-toast][data-styled='true'] [data-close-button]:focus-visible {
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -232,17 +232,17 @@ html[dir='rtl'],
   cursor: not-allowed;
 }
 
-[data-sonner-toast]:hover [data-close-button] {
+[data-sonner-toast][data-styled='true']:hover [data-close-button] {
   opacity: 1;
 }
-[data-sonner-toast]:focus [data-close-button] {
+[data-sonner-toast][data-styled='true']:focus [data-close-button] {
   opacity: 1;
 }
-[data-sonner-toast]:focus-within [data-close-button] {
+[data-sonner-toast][data-styled='true']:focus-within [data-close-button] {
   opacity: 1;
 }
 
-[data-sonner-toast]:hover [data-close-button]:hover {
+[data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
   background: var(--gray2);
   border-color: var(--gray5);
 }
diff --git a/website/src/components/CustomStyling/index.tsx b/website/src/components/CustomStyling/index.tsx
new file mode 100644
index 0000000..894ba16
--- /dev/null
+++ b/website/src/components/CustomStyling/index.tsx
@@ -0,0 +1,62 @@
+import { toast } from 'sonner';
+import { CodeBlock } from '../CodeBlock';
+
+export const CustomStyling = () => {
+  return (
+    <div>
+      <h2>Advanced custom styling</h2>
+      <p>This example uses Tailwind class names, but you can use any CSS classes.</p>
+      <div className="buttons">
+        <button
+          className="button"
+          onClick={() => {
+            toast('Event has been created', {
+              description: 'Monday, January 3rd at 6:00pm',
+              icon: <span className="text-2xl">📆</span>,
+              action: {
+                label: 'Action',
+                onClick: () => {
+                  alert('Action clicked');
+                },
+              },
+              unstyled: true,
+              classNames: {
+                toast: 'border rounded-md p-4 w-full bg-white shadow-lg gap-2 flex',
+                title: 'font-bold',
+                actionButton: 'bg-black/10 px-3 py-1 rounded-md shrink-0 self-end',
+                closeButton: 'bg-red-200 absolute top-4 right-4 rounded-full p-1',
+              },
+            });
+          }}
+        >
+          Add toast
+        </button>
+      </div>
+      <CodeBlock>{`toast('Event has been created', {
+  description: 'Monday, January 3rd at 6:00pm',
+  icon: <span className="text-2xl">📆</span>,
+  action: {
+    label: 'Action',
+  },
+  // Remove default styling
+  unstyled: true,
+  // Add custom class names
+  classNames: {
+    toast: 'border rounded-md p-4 w-full bg-white shadow-lg gap-2 flex',
+    title: 'font-bold',
+    actionButton: 'bg-black/10 px-3 py-1 rounded-md shrink-0 self-end',
+    closeButton: 'bg-red-200 absolute top-4 right-4 rounded-full p-1',
+  },
+});`}</CodeBlock>
+      <p>
+        You can also pass the <code>classNames</code> to the Toaster if you want to style all toasts the same way.
+      </p>
+      <CodeBlock>{`<Toaster toastOptions={{
+  unstyled: true,
+  classNames: {
+    // ...
+  },
+}} />`}</CodeBlock>
+    </div>
+  );
+};
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 6052d6a..117f7c7 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -10,6 +10,7 @@ import { Usage } from '@/src/components/Usage';
 import { Other } from '@/src/components/Other/Other';
 import Head from '../components/Head';
 import { How } from '../components/How/How';
+import { CustomStyling } from '../components/CustomStyling';
 
 export default function Home() {
   const [expand, setExpand] = React.useState(false);
@@ -30,6 +31,7 @@ export default function Home() {
           <Position position={position} setPosition={setPosition} />
           <ExpandModes expand={expand} setExpand={setExpand} />
           <Other setCloseButton={setCloseButton} setRichColors={setRichColors} />
+          <CustomStyling />
           <How />
         </div>
       </main>