Merge pull request #965 from joshunrau/playground-icons

Author: joshunrau

apps/playground/src/components/Header/ActionButton/ActionButton.tsx

@@ -11,7 +11,7 @@ export type ActionButtonProps = {
 
 export const ActionButton = ({ disabled, icon, onClick, tooltip }: ActionButtonProps) => (
   <div className="relative">
-    <Tooltip delayDuration={700}>
+    <Tooltip>
       <Tooltip.Trigger
         className="h-9 w-9"
         disabled={disabled}

apps/playground/src/components/Header/CloneButton/CloneButton.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Button, Dialog, Form } from '@douglasneuroinformatics/libui/components';
+import { Dialog, Form, Tooltip } from '@douglasneuroinformatics/libui/components';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
 import { CopyPlusIcon } from 'lucide-react';
 import { z } from 'zod';
@@ -33,41 +33,46 @@ export const CloneButton = () => {
   };
 
   return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <Dialog.Trigger asChild>
-        <Button className="h-9 w-9" size="icon" variant="outline">
-          <CopyPlusIcon />
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Content className="sm:max-w-[475px]">
-        <Dialog.Header>
-          <Dialog.Title>Create New Instrument</Dialog.Title>
-          <Dialog.Description>
-            This will save the current playground state in local storage as a new instrument.
-          </Dialog.Description>
-        </Dialog.Header>
-        <Form
-          className="[&_button]:max-w-32"
-          content={{
-            label: {
-              kind: 'string',
-              label: 'Label',
-              variant: 'input'
-            }
-          }}
-          submitBtnLabel="Save"
-          validationSchema={z.object({
-            label: z
-              .string()
-              .min(1)
-              .refine(
-                (arg) => !instruments.find((instrument) => instrument.label === arg),
-                'An instrument with this label already exists'
-              )
-          })}
-          onSubmit={(data) => void handleSubmit(data)}
-        />
-      </Dialog.Content>
-    </Dialog>
+    <Tooltip>
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <Dialog.Trigger asChild>
+          <Tooltip.Trigger className="h-9 w-9" size="icon" variant="outline">
+            <CopyPlusIcon />
+          </Tooltip.Trigger>
+        </Dialog.Trigger>
+        <Dialog.Content className="sm:max-w-[475px]">
+          <Dialog.Header>
+            <Dialog.Title>Create New Instrument</Dialog.Title>
+            <Dialog.Description>
+              This will save the current playground state in local storage as a new instrument.
+            </Dialog.Description>
+          </Dialog.Header>
+          <Form
+            className="[&_button]:max-w-32"
+            content={{
+              label: {
+                kind: 'string',
+                label: 'Label',
+                variant: 'input'
+              }
+            }}
+            submitBtnLabel="Save"
+            validationSchema={z.object({
+              label: z
+                .string()
+                .min(1)
+                .refine(
+                  (arg) => !instruments.find((instrument) => instrument.label === arg),
+                  'An instrument with this label already exists'
+                )
+            })}
+            onSubmit={(data) => void handleSubmit(data)}
+          />
+        </Dialog.Content>
+      </Dialog>
+      <Tooltip.Content side="bottom">
+        <p>Create New Instrument</p>
+      </Tooltip.Content>
+    </Tooltip>
   );
 };

apps/playground/src/components/Header/ShareButton/ShareButton.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { Button, Heading, Input, Popover } from '@douglasneuroinformatics/libui/components';
+import { Heading, Input, Popover, Tooltip } from '@douglasneuroinformatics/libui/components';
 import { CopyButton } from '@opendatacapture/react-core';
-import { ShareIcon } from 'lucide-react';
+import { Share2Icon } from 'lucide-react';
 
 import { useFilesRef } from '@/hooks/useFilesRef';
 import { useAppStore } from '@/store';
@@ -14,6 +14,7 @@ export const ShareButton = () => {
   const editorFilesRef = useFilesRef();
   const [shareURL, setShareURL] = useState(encodeShareURL({ files: editorFilesRef.current, label }));
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
 
   // The user cannot modify the editor without closing the popover
   useEffect(() => {
@@ -23,25 +24,37 @@ export const ShareButton = () => {
   }, [isPopoverOpen, label]);
 
   return (
-    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-      <Popover.Trigger asChild>
-        <Button className="h-9 w-9" size="icon" variant="outline">
-          <ShareIcon />
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align="end" className="w-[520px] p-4">
-        <div className="flex flex-col space-y-2 text-center sm:text-left">
-          <Heading variant="h5">Share Instrument</Heading>
-          <p className="text-muted-foreground text-sm">
-            Anyone with this link can open a snapshot of the current code in your playground. The total size of the
-            URL-encoded source files for this instrument is {formatSize(shareURL.size)}.
-          </p>
-        </div>
-        <div className="flex gap-2 pt-4">
-          <Input readOnly className="h-9" id="link" value={shareURL.href} />
-          <CopyButton size="sm" text={shareURL.href} />
-        </div>
-      </Popover.Content>
-    </Popover>
+    <Tooltip
+      open={isTooltipOpen}
+      onOpenChange={(open) => {
+        if (!isPopoverOpen) {
+          setIsTooltipOpen(open);
+        }
+      }}
+    >
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <Popover.Trigger asChild>
+          <Tooltip.Trigger className="h-9 w-9" size="icon" variant="outline">
+            <Share2Icon />
+          </Tooltip.Trigger>
+        </Popover.Trigger>
+        <Popover.Content align="end" className="w-[520px] p-4">
+          <div className="flex flex-col space-y-2 text-center sm:text-left">
+            <Heading variant="h5">Share Instrument</Heading>
+            <p className="text-muted-foreground text-sm">
+              Anyone with this link can open a snapshot of the current code in your playground. The total size of the
+              URL-encoded source files for this instrument is {formatSize(shareURL.size)}.
+            </p>
+          </div>
+          <div className="flex gap-2 pt-4">
+            <Input readOnly className="h-9" id="link" value={shareURL.href} />
+            <CopyButton size="sm" text={shareURL.href} />
+          </div>
+        </Popover.Content>
+      </Popover>
+      <Tooltip.Content side="bottom">
+        <p>Share</p>
+      </Tooltip.Content>
+    </Tooltip>
   );
 };