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

@@ -16,10 +16,13 @@
 
 import React, { HTMLAttributes } from "react";
 import { CSSObject } from "styled-components";
+import { HelpTipPlacement } from "../../global/global.types";
 
 export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
   label?: string;
   tooltip?: string;
   overrideLabelClasses?: string;
   sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }

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

@@ -16,6 +16,7 @@
 
 import React from "react";
 import { CSSObject } from "styled-components";
+import { HelpTipPlacement } from "../../global/global.types";
 
 export interface CodeEditorProps {
   value: string;
@@ -27,6 +28,8 @@ export interface CodeEditorProps {
   className?: string;
   helpTools?: React.ReactNode;
   sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }
 
 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

@@ -16,6 +16,7 @@
 
 import React from "react";
 import { CSSObject } from "styled-components";
+import { HelpTipPlacement } from "../../global/global.types";
 
 export interface CommentBoxProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -29,6 +30,8 @@ export interface CommentBoxProps
   required?: boolean;
   className?: string;
   error?: string;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }
 
 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

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { CSSObject } from "styled-components";
+import { HelpTipPlacement } from "../../global/global.types";
 import React from "react";
 
 export interface FileSelectorProps {
@@ -36,6 +37,8 @@ export interface FileSelectorProps {
   className?: string;
   noLabelMinWidth?: boolean;
   sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }
 
 export interface FileSelectorConstructorProps {

src/components/HelpTip/HelpTip.tsx

@@ -32,6 +32,7 @@ import {
 } from "./HelpTip.types";
 import Grid from "../Grid/Grid";
 import { HelpIconFilled } from "../Icons";
+import { HelpTipPlacement } from "../../global/global.types";
 
 const opacityAnimation = keyframes`
   from {
@@ -41,7 +42,6 @@ const opacityAnimation = keyframes`
     opacity: 1;
   }
 `;
-
 const HelptipWrapper = styled.span<HTMLAttributes<HTMLDivElement>>(
   {
     display: "inline-flex",
@@ -130,7 +130,7 @@ const HelptipItem = styled.div<HelpTipBuild>(({ theme, placement }) => {
     background: background,
     lineHeight: 1,
     zIndex: 10001,
-    padding: 8,
+    padding: 2,
     fontSize: 12,
     boxShadow: "#00000050 0px 3px 10px",
     maxWidth: 350,
@@ -213,34 +213,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 +248,7 @@ export const HelpTip: FC<HelpTipProps> = ({
       ? setTimeout(() => {
           setHelptipVisible(false);
           setHelptipOpen(false);
-        }, 5000)
+        }, 50000)
       : setTimeout(() => {
           setHelptipVisible(false);
         }, 1000);
@@ -272,7 +268,7 @@ export const HelpTip: FC<HelpTipProps> = ({
   }) => {
     let position = {};
     let calculatedPlacement = placement;
-    const boundYLimit = 45;
+    const boundYLimit = 25;
     const boundXLimit = 175;
 
     if (anchorEl) {
@@ -376,7 +372,6 @@ export const HelpTip: FC<HelpTipProps> = ({
           const calcInitPosition = bounds.left - boundXLimit;
 
           if (calcInitPosition < 0) {
-            calculatedPlacement = "right";
           }
 
           break;
@@ -451,7 +446,7 @@ export const HelpTip: FC<HelpTipProps> = ({
   const wrapperRef = useRef(null);
   useOutsideAlerter(wrapperRef);
 
-  return (
+  return placement && Object.values(HelpTipPlacement).includes(placement) ? (
     <Fragment>
       <HelptipWrapper
         ref={wrapperRef}
@@ -493,6 +488,8 @@ export const HelpTip: FC<HelpTipProps> = ({
           )}
       </HelptipWrapper>
     </Fragment>
+  ) : (
+    <Fragment>{children}</Fragment>
   );
 };
 

src/components/InputBox/InputBox.tsx

@@ -29,6 +29,7 @@ import InputLabel from "../InputLabel/InputLabel";
 import VisibilityOffIcon from "../Icons/VisibilityOffIcon";
 import VisibilityOnIcon from "../Icons/VisibilityOnIcon";
 import Box from "../Box/Box";
+import HelpTip from "../HelpTip/HelpTip";
 
 const InputBase = styled.input<InputBoxProps & ExtraInputProps>(
   ({ theme, error, startIcon, overlayIcon, overlayObject, originType }) => {
@@ -141,6 +142,8 @@ const InputBox: FC<InputBoxProps> = ({
   className,
   error,
   sx,
+  helpTip,
+  helpTipPlacement,
   ...props
 }) => {
   const [toggleTextInput, setToggleTextInput] = useState<boolean>(false);
@@ -168,6 +171,8 @@ const InputBox: FC<InputBoxProps> = ({
           htmlFor={id}
           noMinWidth={noLabelMinWidth}
           className={"inputLabel"}
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
         >
           {label}
           {required ? "*" : ""}

src/components/InputBox/InputBox.types.ts

@@ -16,6 +16,7 @@
 
 import React from "react";
 import { CSSObject } from "styled-components";
+import { HelpTipPlacement } from "../../global/global.types";
 
 export interface InputBoxProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -34,6 +35,8 @@ export interface InputBoxProps
   required?: boolean;
   className?: string;
   error?: string;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }
 
 export interface InputContainerProps {

src/components/InputLabel/InputLabel.tsx

@@ -14,10 +14,11 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { FC } from "react";
+import React, { FC, Fragment } from "react";
 import styled from "styled-components";
 import get from "lodash/get";
 import { InputLabelProps } from "./InputLabel.types";
+import HelpTip from "../HelpTip/HelpTip";
 
 const CustomLabel = styled.label<InputLabelProps>(({ theme, sx }) => ({
   fontWeight: 600,
@@ -45,12 +46,20 @@ const InputLabel: FC<InputLabelProps> = ({
   sx,
   noMinWidth,
   htmlFor,
+  helpTip,
+  helpTipPlacement,
   ...props
 }) => {
   return (
     <CustomLabel sx={sx} htmlFor={htmlFor} {...props}>
       <span className={`${noMinWidth ? "noMinWidthLabel" : ""}`}>
-        {children}
+        {helpTip ? (
+          <HelpTip placement={helpTipPlacement} content={helpTip}>
+            {children}
+          </HelpTip>
+        ) : (
+          children
+        )}
       </span>
     </CustomLabel>
   );

src/components/InputLabel/InputLabel.types.ts

@@ -16,10 +16,13 @@
 
 import { HTMLAttributes, ReactNode } from "react";
 import { CSSObject } from "styled-components";
+import { HelpTipPlacement } from "../../global/global.types";
 
 export interface InputLabelProps extends HTMLAttributes<HTMLLabelElement> {
   children?: ReactNode;
   sx?: CSSObject;
   noMinWidth?: boolean;
   htmlFor?: string;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }

src/components/RadioGroup/RadioGroup.tsx

@@ -99,6 +99,8 @@ const RadioGroup: FC<RadioGroupProps> = ({
   currentValue,
   disableOptions = false,
   displayInColumn = false,
+  helpTip,
+  helpTipPlacement,
 }) => {
   return (
     <FieldContainer
@@ -112,7 +114,12 @@ const RadioGroup: FC<RadioGroupProps> = ({
       }}
     >
       {label !== "" && (
-        <InputLabel htmlFor={id} noMinWidth>
+        <InputLabel
+          htmlFor={id}
+          noMinWidth
+          helpTip={helpTip}
+          helpTipPlacement={helpTipPlacement}
+        >
           {label}
           {tooltip && tooltip !== "" && (
             <div className={"tooltipContainer"}>

src/components/RadioGroup/RadioGroup.types.ts

@@ -17,6 +17,7 @@
 import React from "react";
 import { CSSObject } from "styled-components";
 import { SelectorType } from "../../global/global.types";
+import { HelpTipPlacement } from "../../global/global.types";
 
 export interface RadioGroupProps {
   label?: string;
@@ -33,6 +34,8 @@ export interface RadioGroupProps {
     extraValue?: any,
   ) => void;
   sx?: CSSObject;
+  helpTip?: React.ReactNode;
+  helpTipPlacement?: HelpTipPlacement;
 }
 
 export interface OptionsContainerProps {