enhance(Toast): hide dismissible button on toast and show with group …

…hover (#132)
uzh-bf · Sep 4, 2024 · 4888814 · 4888814
1 parent 0fd0b9f
commit 4888814
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git 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
@@ -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)