feat: add support for tippy in button

Author: eshankvaish

src/Shared/Components/Button/Button.component.tsx

@@ -1,4 +1,5 @@
 import { Progressing } from '@Common/Progressing'
+import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 import { ButtonProps, ButtonStyleType, ButtonVariantType } from './types'
 import { BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP, BUTTON_SIZE_TO_LOADER_SIZE_MAP } from './constants'
@@ -15,23 +16,29 @@ const Button = ({
     endIcon,
     disabled,
     isLoading,
+    showTippy,
+    tippyContent,
 }: ButtonProps) => {
+    const isDisabled = disabled || isLoading
     const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]}`
 
     return (
-        <button
-            {...buttonProps}
-            disabled={disabled || isLoading}
-            // eslint-disable-next-line react/button-has-type
-            type={buttonProps.type || 'button'}
-            className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading })} ${disabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
-        >
-            {startIcon && <span className={iconClass}>{startIcon}</span>}
-            <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>
-            {endIcon && <span className={iconClass}>{endIcon}</span>}
-            {isLoading && <Progressing size={BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]} />}
-        </button>
+        <Tooltip content={tippyContent} alwaysShowTippyOnHover={showTippy && !!tippyContent}>
+            <div>
+                <button
+                    {...buttonProps}
+                    disabled={isDisabled}
+                    // eslint-disable-next-line react/button-has-type
+                    type={buttonProps.type || 'button'}
+                    className={`br-4 flex cursor dc__mnw-100 dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading })} ${isDisabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
+                >
+                    {startIcon && <span className={iconClass}>{startIcon}</span>}
+                    <span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>
+                    {endIcon && <span className={iconClass}>{endIcon}</span>}
+                    {isLoading && <Progressing size={BUTTON_SIZE_TO_LOADER_SIZE_MAP[size]} />}
+                </button>
+            </div>
+        </Tooltip>
     )
 }
-
 export default Button

src/Shared/Components/Button/constants.ts

@@ -3,7 +3,7 @@ import { ProgressingProps } from '@Common/Types'
 import { ButtonProps } from './types'
 
 export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
-    [ComponentSizeType.xs]: 'px-9 py-1 fs-14 lh-20 fw-6 dc__gap-6',
+    [ComponentSizeType.xs]: 'px-9 py-1 fs-12 lh-20 fw-6 dc__gap-6',
     [ComponentSizeType.small]: 'px-9 py-3 fs-12 lh-20 fw-6 dc__gap-6',
     [ComponentSizeType.medium]: 'px-11 py-5 fs-13 lh-20 fw-6 dc__gap-8',
     [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-10',

src/Shared/Components/Button/types.ts

@@ -1,3 +1,4 @@
+import { TooltipProps } from '@Common/Tooltip/types'
 import { ComponentSizeType } from '@Shared/constants'
 import { ButtonHTMLAttributes, ReactElement } from 'react'
 
@@ -16,7 +17,7 @@ export enum ButtonStyleType {
     neutral = 'neutral',
 }
 
-export interface ButtonProps {
+export type ButtonProps = {
     buttonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>
     variant?: ButtonVariantType
     size?: ComponentSizeType
@@ -26,4 +27,13 @@ export interface ButtonProps {
     endIcon?: ReactElement
     disabled?: boolean
     isLoading?: boolean
-}
+} & (
+    | {
+          showTippy: boolean
+          tippyContent: TooltipProps['content']
+      }
+    | {
+          showTippy?: never
+          tippyContent?: never
+      }
+)