refactor(menuitem): change to using tooltip and set delay to 500ms

\
isomerpages · Nov 10, 2023 · eb41ace · eb41ace
1 parent 1edcb8e
commit eb41ace
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/src/layouts/components/Editor/components/MenuBar.tsx b/src/layouts/components/Editor/components/MenuBar.tsx
@@ -1,7 +1,5 @@
 import { Divider, HStack } from "@chakra-ui/react"
 import { Editor } from "@tiptap/react"
-import { Fragment } from "react"
-import { v4 as uuid } from "uuid"
 
 import { useEditorModal } from "contexts/EditorModalContext"
 

diff --git a/src/layouts/components/Editor/components/MenuItem.tsx b/src/layouts/components/Editor/components/MenuItem.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from "@chakra-ui/react"
 import { IconButton } from "@opengovsg/design-system-react"
 import { MouseEventHandler } from "react"
 import remixiconUrl from "remixicon/fonts/remixicon.symbol.svg"
@@ -17,21 +18,23 @@ export const MenuItem = ({
   isRound,
   isActive = null,
 }: MenuItemProps) => (
-  <IconButton
-    _hover={{ bg: "gray.100" }}
-    _active={{ bg: "gray.200" }}
-    onClick={action}
-    title={title}
-    bgColor={isActive && isActive() ? "gray.200" : "transparent"}
-    border="none"
-    h="1.75rem"
-    w="1.75rem"
-    p="0.25rem"
-    aria-label={title || "divider"}
-    isRound={isRound}
-  >
-    <svg className="remix" height="1.25rem" width="1.25rem">
-      <use xlinkHref={`${remixiconUrl}#ri-${icon}`} />
-    </svg>
-  </IconButton>
+  // NOTE: Delay opening by 500ms
+  <Tooltip label={title || "divider"} openDelay={500}>
+    <IconButton
+      _hover={{ bg: "gray.100" }}
+      _active={{ bg: "gray.200" }}
+      onClick={action}
+      bgColor={isActive && isActive() ? "gray.200" : "transparent"}
+      border="none"
+      h="1.75rem"
+      w="1.75rem"
+      p="0.25rem"
+      aria-label={title || "divider"}
+      isRound={isRound}
+    >
+      <svg className="remix" height="1.25rem" width="1.25rem">
+        <use xlinkHref={`${remixiconUrl}#ri-${icon}`} />
+      </svg>
+    </IconButton>
+  </Tooltip>
 )