refactor: use InfoIconTippy

Author: eshankvaish

src/Shared/Components/CustomInput/CustomInput.tsx

@@ -49,7 +49,7 @@ const CustomInput = ({
     labelTooltipConfig,
     ...props
 }: CustomInputProps) => {
-    const inputRef = useRef<HTMLInputElement>()
+    const inputRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
         setTimeout(() => {

src/Shared/Components/CustomInput/types.ts

@@ -30,7 +30,7 @@ export interface CustomInputProps
      */
     shouldTrim?: boolean
     /**
-     * Size of the textarea
+     * Size of the input
      *
      * @default ComponentSizeType.large
      */

src/Shared/Components/FormFieldWrapper/FormFieldLabel.tsx

@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
-import { ReactComponent as ICHelp } from '@Icons/ic-help.svg'
-import { TippyCustomized } from '@Common/TippyCustomized'
-import { TippyTheme } from '@Common/Types'
 import { ConditionalWrap } from '@Common/Helper'
 import { ReactElement } from 'react'
 import { Tooltip, TooltipProps } from '@Common/Tooltip'
 import { getFormLabelElementId } from './utils'
 import { FormFieldLabelProps } from './types'
+import { InfoIconTippy } from '..'
 
 const FormFieldLabel = ({
     label,
@@ -74,21 +71,7 @@ const FormFieldLabel = ({
                 {required && <span>&nbsp;</span>}
             </div>
             {!isRowLayout && labelTippyCustomizedConfig && (
-                <TippyCustomized
-                    theme={TippyTheme.white}
-                    className="w-300 dc__align-left"
-                    placement="bottom-start"
-                    Icon={ICHelp}
-                    iconClass="fcv-5"
-                    showCloseButton
-                    trigger="click"
-                    interactive
-                    {...labelTippyCustomizedConfig}
-                >
-                    <div className="flex cursor">
-                        <ICHelpOutline className="fcn-7 icon-dim-16 dc__no-shrink" />
-                    </div>
-                </TippyCustomized>
+                <InfoIconTippy placement="bottom-start" iconClass="fcv-5" {...labelTippyCustomizedConfig} />
             )}
         </div>
     )

src/Shared/Components/FormFieldWrapper/types.ts

@@ -16,7 +16,7 @@
 
 import { ReactElement, ReactNode } from 'react'
 import { TooltipProps } from '@Common/Tooltip'
-import { TippyCustomizedProps } from '@Common/Types'
+import { InfoIconTippyProps } from '@Common/Types'
 import { BorderConfigType, ComponentLayoutType } from '@Shared/types'
 
 export type LabelOrAriaLabelType =
@@ -55,8 +55,8 @@ export type FormFieldLabelProps<Layout extends ComponentLayoutType = ComponentLa
               /**
                * Tippy configuration for the label in column layout
                */
-              labelTippyCustomizedConfig?: Required<Pick<TippyCustomizedProps, 'heading' | 'infoText'>> &
-                  Pick<TippyCustomizedProps, 'documentationLink' | 'documentationLinkText'>
+              labelTippyCustomizedConfig?: Required<Pick<InfoIconTippyProps, 'heading' | 'infoText'>> &
+                  Pick<InfoIconTippyProps, 'documentationLink' | 'documentationLinkText'>
           })
 
 export interface FormFieldInfoProps extends Pick<FormFieldLabelProps, 'inputId'> {