From 4888814a49233a924fd3a6cb8a3833298aad234d Mon Sep 17 00:00:00 2001
From: Julius Schlapbach <80708107+sjschlapbach@users.noreply.github.com>
Date: Wed, 4 Sep 2024 16:56:43 +0200
Subject: [PATCH] enhance(Toast): hide dismissible button on toast and show
 with group hover (#132)

---
 packages/design-system/src/Toast.stories.tsx | 25 ++++++++++++++++----
 packages/design-system/src/Toast.tsx         |  4 ++--
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/design-system/src/Toast.stories.tsx b/packages/design-system/src/Toast.stories.tsx
index 23704400..d8f65aab 100644
--- a/packages/design-system/src/Toast.stories.tsx
+++ b/packages/design-system/src/Toast.stories.tsx
@@ -111,21 +111,36 @@ export const Error = () => {
 
 export const Dismissible = () => {
   return (
-    <div>
-      <div className="mb-2">
+    <div className="flex flex-col gap-2">
+      <div>
         Toast components can have an "addimissible" prop set to true. This will
         set the duration automatically to a minute, but offer an option to the
         user to manually close the tooltip. Optionally, the duration of a minute
         can also be overwritten using the duration prop.
       </div>
+      <Toast triggerText="Trigger - no overwritten duration" dismissible>
+        Toast Content
+      </Toast>
+      <Toast triggerText="Trigger - duration 5s" duration={5000} dismissible>
+        Toast Content
+      </Toast>
       <Toast
-        triggerText="Trigger - no overwritten duration"
-        className={{ trigger: 'mb-2' }}
+        type="success"
+        triggerText="Success Toast"
+        duration={5000}
         dismissible
       >
         Toast Content
       </Toast>
-      <Toast triggerText="Trigger - duration 5s" duration={5000} dismissible>
+      <Toast
+        type="warning"
+        triggerText="Warning Toast"
+        duration={5000}
+        dismissible
+      >
+        Toast Content
+      </Toast>
+      <Toast type="error" triggerText="Error Toast" duration={5000} dismissible>
         Toast Content
       </Toast>
     </div>
diff --git a/packages/design-system/src/Toast.tsx b/packages/design-system/src/Toast.tsx
index 529da507..bcdf43d9 100644
--- a/packages/design-system/src/Toast.tsx
+++ b/packages/design-system/src/Toast.tsx
@@ -124,7 +124,7 @@ export function Toast({
 
       <RadixToast.Root
         className={twMerge(
-          'border-md grid items-center gap-x-4 rounded-md bg-white p-3 shadow-md',
+          'border-md group grid items-center gap-x-4 rounded-md bg-white p-3 shadow-md',
           type === 'success' && 'border-2 border-solid border-green-500',
           type === 'warning' && 'border-2 border-solid border-orange-500',
           type === 'error' && 'border-2 border-solid border-red-500',
@@ -136,7 +136,7 @@ export function Toast({
       >
         {dismissible && (
           <Button
-            className={{ root: 'fixed right-6 top-4' }}
+            className={{ root: 'fixed right-6 top-4 hidden group-hover:block' }}
             basic
             onClick={() =>
               setOpenExternal ? setOpenExternal(false) : setOpen(false)