Merge pull request #1084 from FaheemOnHub/fix/popOver

Replacement of MuiTooltip with MuiPopover in helperText Component

Author: leecalcote

src/base/Tooltip/Tooltip.tsx

@@ -1,6 +1,10 @@
 import { Tooltip as MuiTooltip, type TooltipProps as MuiTooltipProps } from '@mui/material';
 
-export function Tooltip(props: MuiTooltipProps): JSX.Element {
+export interface TooltipProps extends MuiTooltipProps {
+  interactive?: boolean;
+}
+
+export function Tooltip(props: TooltipProps): JSX.Element {
   return <MuiTooltip {...props} />;
 }
 

src/base/Tooltip/index.tsx

@@ -1,6 +1,5 @@
-import { TooltipProps } from '@mui/material';
 import { tooltipClasses } from '@mui/material/Tooltip';
-import Tooltip from './Tooltip';
+import Tooltip, { TooltipProps } from './Tooltip';
 
 export { Tooltip, tooltipClasses };
 export type { TooltipProps };

src/custom/HelperTextPopover/helperTextPopover.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { IconButton, Popover } from '../../base';
+import { InfoCircleIcon } from '../../icons';
+import { WHITE } from '../../theme';
+import { RenderMarkdownTooltip } from '../Markdown';
+
+type HelperTextPopoverProps = {
+  content: string | React.ReactNode | JSX.Element;
+  fontSize?: string;
+  fontWeight?: number;
+  variant?: 'standard' | 'small';
+  bgColor?: string;
+  icon?: React.ReactNode;
+};
+
+function HelperTextPopover({
+  content,
+  fontSize,
+  fontWeight = 400,
+  variant = 'standard',
+  bgColor = '#141414',
+  icon = <InfoCircleIcon fontSize="small" />,
+  ...props
+}: HelperTextPopoverProps): JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        size="small"
+        onClick={handleOpen}
+        sx={{ color: 'inherit', padding: '2px', verticalAlign: 'middle' }}
+      >
+        {icon}
+      </IconButton>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        disablePortal
+        container={anchorEl?.ownerDocument?.body}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'center'
+        }}
+        transformOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center'
+        }}
+        PaperProps={{
+          sx: {
+            background: bgColor,
+            zIndex: 1501,
+            opacity: '1',
+            color: WHITE,
+            maxWidth: '500px',
+            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
+            fontWeight: fontWeight,
+            borderRadius: '0.5rem',
+            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
+            boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
+          }
+        }}
+        {...props}
+      >
+        {typeof content === 'string' ? <RenderMarkdownTooltip content={content} /> : content}
+      </Popover>
+    </>
+  );
+}
+
+export default HelperTextPopover;
+export type { HelperTextPopoverProps };

src/custom/HelperTextPopover/index.ts

@@ -0,0 +1,2 @@
+import HelperTextPopover from './helperTextPopover';
+export { HelperTextPopover };

src/custom/Modal/index.tsx

@@ -2,11 +2,12 @@ import { ButtonProps, DialogProps, styled } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
-import { iconLarge, iconMedium } from '../../constants/iconsSizes';
-import { CloseIcon, FullScreenIcon, InfoCircleIcon } from '../../icons';
+import { iconLarge } from '../../constants/iconsSizes';
+import { CloseIcon, FullScreenIcon } from '../../icons';
 import FullScreenExitIcon from '../../icons/Fullscreen/FullScreenExitIcon';
 import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
+import { HelperTextPopover } from '../HelperTextPopover';
 
 interface ModalProps extends DialogProps {
   closeModal: () => void;
@@ -217,11 +218,12 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, va
   return (
     <StyledFooter variant={variant} hasHelpText={!!helpText}>
       {helpText && (
-        <CustomTooltip title={helpText} variant="standard" placement="top">
-          <IconButton>
-            <InfoCircleIcon {...iconMedium} className="InfoCircleIcon" />
-          </IconButton>
-        </CustomTooltip>
+        // <CustomTooltip title={helpText} variant="standard" placement="top">
+        //   <IconButton>
+        //     <InfoCircleIcon {...iconMedium} className="InfoCircleIcon" />
+        //   </IconButton>
+        // </CustomTooltip>
+        <HelperTextPopover content={helpText} />
       )}
       {children}
     </StyledFooter>

src/custom/UniversalFilter.tsx

@@ -34,8 +34,7 @@ export const FilterHeader = styled('div')(({ theme }) => ({
   margin: '-1rem -1rem 1rem -1rem',
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'center',
-  color: theme.palette.text.constant?.white
+  alignItems: 'center'
 }));
 
 function UniversalFilter({

src/custom/index.ts

@@ -0,0 +1,4 @@
+// Export all custom components
+export * from './CustomTooltip';
+export * from './HelperTextPopover';
+export * from './Markdown';