Helptip improvements and placement in mds components

src/components/Checkbox/Checkbox.tsx

@@ -66,7 +66,17 @@ const CheckboxItem = styled.label<InputLabelProps>(({ sx, theme }) => ({
 
 const Checkbox: FC<
   CheckboxProps & React.InputHTMLAttributes<HTMLInputElement>
-> = ({ tooltip, label, id, overrideLabelClasses, sx, className, ...props }) => {
+> = ({
+  tooltip,
+  label,
+  id,
+  overrideLabelClasses,
+  sx,
+  className,
+  helpTip,
+  helpTipPlacement,
+  ...props
+}) => {
   return (
     <FieldContainer
       className={`inputItem ${className ? className : ""}`}
@@ -90,6 +100,8 @@ const Checkbox: FC<
           sx={{
             marginLeft: 10,
           }}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
         >
           {label}
           {tooltip && tooltip !== "" && (

src/components/Checkbox/Checkbox.types.ts

@@ -22,4 +22,6 @@ export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
   tooltip?: string;
   overrideLabelClasses?: string;
   sx?: CSSObject;
+  helpTip?: any;
+  helpTipPlacement?: "top" | "bottom" | "left" | "right";
 }

src/components/CodeEditor/CodeEditor.tsx

@@ -240,6 +240,8 @@ const CodeMirrorWrapper: FC<CodeEditorProps> = ({
   sx,
   helpTools,
   className,
+  helpTip,
+  helpTipPlacement,
 }) => {
   return (
     <CodeEditorBase
@@ -249,6 +251,8 @@ const CodeMirrorWrapper: FC<CodeEditorProps> = ({
     >
       <InputLabel
         sx={{ marginBottom: "10px", display: "flex", alignItems: "center" }}
+        helpTip={helpTip}
+        helpTipPlacement={helpTipPlacement}
       >
         <span>{label}</span>
         {tooltip !== "" && (

src/components/CodeEditor/CodeEditor.types.ts

@@ -27,6 +27,8 @@ export interface CodeEditorProps {
   className?: string;
   helpTools?: React.ReactNode;
   sx?: CSSObject;
+  helpTip?: any;
+  helpTipPlacement?: "top" | "bottom" | "left" | "right";
 }
 
 export interface CodeEditorBaseProps {

src/components/CommentBox/CommentBox.tsx

@@ -115,6 +115,8 @@ const InputBox: FC<CommentBoxProps> = ({
   className,
   error,
   sx,
+  helpTip,
+  helpTipPlacement,
   ...props
 }) => {
   return (
@@ -128,6 +130,8 @@ const InputBox: FC<CommentBoxProps> = ({
           htmlFor={id}
           noMinWidth={noLabelMinWidth}
           className={"inputLabel"}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
         >
           {label}
           {required ? "*" : ""}

src/components/CommentBox/CommentBox.types.ts

@@ -29,6 +29,8 @@ export interface CommentBoxProps
   required?: boolean;
   className?: string;
   error?: string;
+  helpTip?: any;
+  helpTipPlacement?: "top" | "bottom" | "left" | "right";
 }
 
 export interface CommentContainerProps {

src/components/FileSelector/FileSelector.tsx

@@ -100,6 +100,8 @@ const FileSelector: FC<FileSelectorProps> = ({
   noLabelMinWidth = false,
   returnEncodedData = false,
   sx,
+  helpTip,
+  helpTipPlacement,
 }) => {
   const fileUpload = useRef<HTMLInputElement>(null);
 
@@ -114,6 +116,8 @@ const FileSelector: FC<FileSelectorProps> = ({
           htmlFor={id}
           noMinWidth={noLabelMinWidth}
           className={"inputLabel"}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
         >
           {label}
           {required ? "*" : ""}

src/components/FileSelector/FileSelector.types.ts

@@ -36,6 +36,8 @@ export interface FileSelectorProps {
   className?: string;
   noLabelMinWidth?: boolean;
   sx?: CSSObject;
+  helpTip?: any;
+  helpTipPlacement?: "top" | "bottom" | "left" | "right";
 }
 
 export interface FileSelectorConstructorProps {

src/components/HelpTip/HelpTip.tsx

@@ -41,7 +41,7 @@ const opacityAnimation = keyframes`
     opacity: 1;
   }
 `;
-
+let placementOptions = new Set<string>(["top", "bottom", "left", "right"]);
 const HelptipWrapper = styled.span<HTMLAttributes<HTMLDivElement>>(
   {
     display: "inline-flex",
@@ -57,86 +57,88 @@ const HelptipWrapper = styled.span<HTMLAttributes<HTMLDivElement>>(
   `,
 );
 
-const HelptipItem = styled.div<HelpTipBuild>(({ theme, placement }) => {
-  const tooltipArrowSize = "6px";
-
-  const background = get(theme, "tooltip.background", "#737373");
-  const textColor = get(theme, "tooltip.color", "#FFFFFF");
-
-  let placementPosition = {};
-  const beforePosition = {
-    content: "' '",
-    left: "50%",
-    border: "solid transparent",
-    height: 0,
-    width: 0,
-    position: "absolute",
-    pointerEvents: "none",
-    borderWidth: tooltipArrowSize,
-    marginLeft: `calc(${tooltipArrowSize} * -1);`,
-  };
-
-  switch (placement) {
-    case "top":
-      placementPosition = {
-        transform: "translateX(-50%) translateY(-50%)",
-        "&::before": {
-          ...beforePosition,
-          top: "100%",
-          borderTopColor: background,
-        },
-      };
-      break;
-    case "right":
-      placementPosition = {
-        transform: "translateX(0) translateY(-50%)",
-        "&::before": {
-          ...beforePosition,
-          left: `calc(${tooltipArrowSize} * -1)`,
-          top: "50%",
-          transform: "translateX(0) translateY(-50%)",
-          borderRightColor: background,
-        },
-      };
-      break;
-    case "left":
-      placementPosition = {
-        transform: "translateX(-100%) translateY(-50%)",
-        "&::before": {
-          ...beforePosition,
-          left: "auto",
-          right: `calc(${tooltipArrowSize} * -2)`,
-          top: "50%",
+const HelptipItem = styled.div<HelpTipBuild>(
+  ({ theme, placement = "hide" }) => {
+    const tooltipArrowSize = "6px";
+
+    const background = get(theme, "tooltip.background", "#737373");
+    const textColor = get(theme, "tooltip.color", "#FFFFFF");
+
+    let placementPosition = {};
+    const beforePosition = {
+      content: "' '",
+      left: "50%",
+      border: "solid transparent",
+      height: 0,
+      width: 0,
+      position: "absolute",
+      pointerEvents: "none",
+      borderWidth: tooltipArrowSize,
+      marginLeft: `calc(${tooltipArrowSize} * -1);`,
+    };
+
+    switch (placement) {
+      case "top":
+        placementPosition = {
+          transform: "translateX(-50%) translateY(-50%)",
+          "&::before": {
+            ...beforePosition,
+            top: "100%",
+            borderTopColor: background,
+          },
+        };
+        break;
+      case "right":
+        placementPosition = {
           transform: "translateX(0) translateY(-50%)",
-          borderLeftColor: background,
-        },
-      };
-      break;
-    default:
-      placementPosition = {
-        transform: "translateX(-50%)",
-        "&::before": {
-          ...beforePosition,
-          bottom: "100%",
-          borderBottomColor: background,
-        },
-      };
-  }
+          "&::before": {
+            ...beforePosition,
+            left: `calc(${tooltipArrowSize} * -1)`,
+            top: "50%",
+            transform: "translateX(0) translateY(-50%)",
+            borderRightColor: background,
+          },
+        };
+        break;
+      case "left":
+        placementPosition = {
+          transform: "translateX(-100%) translateY(-50%)",
+          "&::before": {
+            ...beforePosition,
+            left: "auto",
+            right: `calc(${tooltipArrowSize} * -2)`,
+            top: "50%",
+            transform: "translateX(0) translateY(-50%)",
+            borderLeftColor: background,
+          },
+        };
+        break;
+      default:
+        placementPosition = {
+          transform: "translateX(-50%)",
+          "&::before": {
+            ...beforePosition,
+            bottom: "100%",
+            borderBottomColor: background,
+          },
+        };
+    }
 
-  return {
-    position: "fixed",
-    borderRadius: 4,
-    color: textColor,
-    background: background,
-    lineHeight: 1,
-    zIndex: 10001,
-    padding: 8,
-    fontSize: 12,
-    boxShadow: "#00000050 0px 3px 10px",
-    maxWidth: 350,
-    ...placementPosition,
-  };
-});
+    return {
+      position: "fixed",
+      borderRadius: 4,
+      color: textColor,
+      background: background,
+      lineHeight: 1,
+      zIndex: 10001,
+      padding: 2,
+      fontSize: 12,
+      boxShadow: "#00000050 0px 3px 10px",
+      maxWidth: 350,
+      ...placementPosition,
+    };
+  },
+);
 
 const HelpTargetItem = styled.div<HelpTipBuild>(({ theme, placement }) => {
   const tooltipArrowSize = "6px";
@@ -213,34 +215,30 @@ const BaseHelpTip = styled.div(({ theme }) => ({
   border: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`,
   borderRadius: 2,
   backgroundColor: get(theme, "boxBackground", "#FBFAFA"),
-  paddingLeft: 25,
-  paddingTop: 20,
-  paddingBottom: 20,
-  paddingRight: 30,
+  paddingLeft: 10,
+  paddingTop: 5,
+  paddingBottom: 5,
+  paddingRight: 10,
   "& .leftItems": {
     fontSize: 16,
     fontWeight: "bold",
     display: "flex",
     alignItems: "center",
     "& .min-icon": {
-      marginRight: 15,
+      marginRight: 5,
       height: 28,
       width: 38,
     },
   },
   "& .helpText": {
     fontSize: 10,
     paddingLeft: 5,
-    marginTop: 15,
+    marginTop: 5,
     color: "black",
   },
 }));
 
-export const HelpTip: FC<HelpTipProps> = ({
-  children,
-  content,
-  placement = "bottom",
-}) => {
+export const HelpTip: FC<HelpTipProps> = ({ children, content, placement }) => {
   const [anchorEl, setAnchorEl] = useState<
     (EventTarget & HTMLSpanElement) | null
   >(null);
@@ -252,7 +250,7 @@ export const HelpTip: FC<HelpTipProps> = ({
       ? setTimeout(() => {
           setHelptipVisible(false);
           setHelptipOpen(false);
-        }, 5000)
+        }, 50000)
       : setTimeout(() => {
           setHelptipVisible(false);
         }, 1000);
@@ -272,7 +270,7 @@ export const HelpTip: FC<HelpTipProps> = ({
   }) => {
     let position = {};
     let calculatedPlacement = placement;
-    const boundYLimit = 45;
+    const boundYLimit = 25;
     const boundXLimit = 175;
 
     if (anchorEl) {
@@ -376,7 +374,6 @@ export const HelpTip: FC<HelpTipProps> = ({
           const calcInitPosition = bounds.left - boundXLimit;
 
           if (calcInitPosition < 0) {
-            calculatedPlacement = "right";
           }
 
           break;
@@ -451,7 +448,7 @@ export const HelpTip: FC<HelpTipProps> = ({
   const wrapperRef = useRef(null);
   useOutsideAlerter(wrapperRef);
 
-  return (
+  return placement && placementOptions.has(placement) ? (
     <Fragment>
       <HelptipWrapper
         ref={wrapperRef}
@@ -469,7 +466,7 @@ export const HelpTip: FC<HelpTipProps> = ({
           createPortal(
             <HelptipTarget
               placement={placement}
-              content={<HelpIconFilled />}
+              content={<HelpIconFilled color="red" />}
               anchorEl={anchorEl}
             />,
             document.body,
@@ -493,6 +490,8 @@ export const HelpTip: FC<HelpTipProps> = ({
           )}
       </HelptipWrapper>
     </Fragment>
+  ) : (
+    <Fragment>{children}</Fragment>
   );
 };