feat: rename Tooltip to TouchableTooltip

Tooltip has been kept as an alias and marked as deprecated
opengovsg · Nov 21, 2023 · 47ea47f · 47ea47f
1 parent 36c8896
commit 47ea47f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/react/src/Tooltip/Tooltip.tsx b/react/src/Tooltip/Tooltip.tsx
@@ -7,18 +7,30 @@ import {
   VisuallyHidden,
 } from '@chakra-ui/react'
 
-export interface TooltipProps extends ChakraTooltipProps {
+export interface TouchableTooltipProps
+  extends Omit<ChakraTooltipProps, 'delay'> {
   /**
    * Styles for the container which wraps the children.
    */
   wrapperStyles?: SystemStyleObject
 }
 
-export const Tooltip = ({
+/** @deprecated Use TouchableTooltipProps instead */
+export interface TooltipProps extends TouchableTooltipProps {}
+
+/**
+ * This component allows for touchable tooltips on mobile.
+ *
+ * Only use this component if you want the tooltip to be triggerable on mobile, otherwise
+ * use the `Tooltip` component.
+ *
+ * The component will not support the `delay` prop as the tooltip will open instantly when touched.
+ */
+export const TouchableTooltip = ({
   children,
   wrapperStyles,
   ...props
-}: TooltipProps): JSX.Element => {
+}: TouchableTooltipProps): JSX.Element => {
   // ChakraTooltip does not work on mobile by design. (see
   // https://github.com/chakra-ui/chakra-ui/issues/2691)
   // Hence adapt the tooltip to open when clicked on mobile
@@ -41,3 +53,12 @@ export const Tooltip = ({
     </>
   )
 }
+
+/**
+ * @deprecated Use `TouchableTooltip` instead.
+ *
+ * If you need to use the `delay` prop, use ChakraUI's `Tooltip` component instead.
+ * This is because the current tooltip implementation does not support the `delay` prop
+ * as the tooltip will open instantly when touched (for mobile compatibility).
+ */
+export const Tooltip = TouchableTooltip
diff --git a/react/src/Tooltip/Tooltip.stories.tsx → .../src/Tooltip/TouchableTooltip.stories.tsx b/react/src/Tooltip/Tooltip.stories.tsx → .../src/Tooltip/TouchableTooltip.stories.tsx
@@ -1,43 +1,45 @@
-import { Box, Icon, Placement, TooltipProps, VStack } from '@chakra-ui/react'
+import { Box, Icon, Placement, VStack } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
 import { BxsHelpCircle } from '~/icons/BxsHelpCircle'
 import { getMobileViewParameters } from '~/utils/storybook'
 
-import { Tooltip } from './Tooltip'
+import { TouchableTooltip, TouchableTooltipProps } from './Tooltip'
 
 export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
+  title: 'Components/TouchableTooltip',
+  component: TouchableTooltip,
   tags: ['autodocs'],
   decorators: [],
 } as Meta
 
-const TooltipStack = (
-  args: TooltipProps & { labels: { value: string; placement: Placement }[] },
+const TouchableTooltipStack = (
+  args: TouchableTooltipProps & {
+    labels: { value: string; placement: Placement }[]
+  },
 ): JSX.Element => {
   return (
     // bottom margin just so that story snapshot does not get cut off at bottom
     <VStack align="left" spacing="4rem" mb="4rem">
       {args.labels.map(({ value, placement }, idx) => (
         <Box key={idx}>
           {value}
-          <Tooltip
+          <TouchableTooltip
             {...args}
             label="Tooltip content goes here"
             placement={placement}
           >
             <Icon as={BxsHelpCircle} aria-hidden ml="0.5rem" />
-          </Tooltip>
+          </TouchableTooltip>
         </Box>
       ))}
     </VStack>
   )
 }
 
-const Template: StoryFn<TooltipProps> = (args) => {
+const Template: StoryFn<TouchableTooltipProps> = (args) => {
   return (
-    <TooltipStack
+    <TouchableTooltipStack
       {...args}
       labels={[
         { value: 'Tooltip on the right', placement: 'right' },
@@ -51,16 +53,16 @@ const Template: StoryFn<TooltipProps> = (args) => {
     />
   )
 }
-export const TooltipOnHover = Template.bind({})
+export const OnHover = Template.bind({})
 
 export const OpenTooltip = Template.bind({})
 OpenTooltip.args = {
   isOpen: true,
 }
 
-const MobileTemplate: StoryFn<TooltipProps> = (args) => {
+const MobileTemplate: StoryFn<TouchableTooltipProps> = (args) => {
   return (
-    <TooltipStack
+    <TouchableTooltipStack
       {...args}
       labels={[
         { value: 'Right', placement: 'right' },