feat: add support for tippy and tooltip in form field label

Author: eshankvaish

src/Common/Tooltip/index.ts

@@ -16,3 +16,4 @@
 
 export { default as Tooltip } from './Tooltip'
 export { TOOLTIP_CONTENTS } from './constants'
+export type { TooltipProps } from './types'

src/Shared/Components/CustomInput/CustomInput.tsx

@@ -44,6 +44,8 @@ const CustomInput = ({
     type = 'text',
     autoFocus = false,
     endIconButtonConfig,
+    labelTippyCustomizedConfig,
+    labelTooltipConfig,
     ...props
 }: CustomInputProps) => {
     const inputRef = useRef<HTMLInputElement>()
@@ -98,6 +100,8 @@ const CustomInput = ({
             fullWidth={fullWidth}
             ariaLabel={ariaLabel}
             borderRadiusConfig={borderRadiusConfig}
+            labelTippyCustomizedConfig={labelTippyCustomizedConfig}
+            labelTooltipConfig={labelTooltipConfig}
         >
             <>
                 <input

src/Shared/Components/FormFieldWrapper/FormFieldLabel.tsx

@@ -1,30 +1,80 @@
-import { FormFieldLabelProps } from './types'
+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'
 
-const FormFieldLabel = ({ label, inputId, required, layout }: FormFieldLabelProps) => {
+const FormFieldLabel = ({
+    label,
+    inputId,
+    required,
+    layout,
+    labelTooltipConfig,
+    labelTippyCustomizedConfig,
+}: FormFieldLabelProps) => {
     if (!label) {
         return null
     }
 
     const labelId = getFormLabelElementId(inputId)
     const isRowLayout = layout === 'row'
+    const showTooltip = !!labelTooltipConfig?.content
 
-    return (
-        <label
-            className={`fs-13 lh-20 fw-4 dc__block mb-0 ${isRowLayout ? 'cn-9' : 'cn-7'}`}
-            htmlFor={inputId}
-            id={labelId}
-            data-testid={labelId}
+    const wrapWithTooltip = (children: ReactElement) => (
+        <Tooltip
+            {...({
+                placement: 'bottom',
+                alwaysShowTippyOnHover: true,
+                ...labelTooltipConfig,
+            } as TooltipProps)}
         >
-            {typeof label === 'string' ? (
-                <span className={`flex left ${required ? 'dc__required-field' : ''}`}>
-                    <span className="dc__truncate">{label}</span>
-                    {required && <span>&nbsp;</span>}
-                </span>
-            ) : (
-                label
+            {children}
+        </Tooltip>
+    )
+
+    return (
+        <div className="flex left dc__gap-4">
+            <div className={`flex left ${required ? 'dc__required-field' : ''}`}>
+                <ConditionalWrap condition={showTooltip} wrap={wrapWithTooltip}>
+                    <label
+                        className={`fs-13 lh-20 fw-4 dc__block mb-0 cursor ${isRowLayout ? `cn-9 ${showTooltip ? 'dc__underline' : ''}` : 'cn-7'}`}
+                        htmlFor={inputId}
+                        id={labelId}
+                        data-testid={labelId}
+                    >
+                        {typeof label === 'string' ? (
+                            <span className="flex left">
+                                <span className="dc__truncate">{label}</span>
+                            </span>
+                        ) : (
+                            label
+                        )}
+                    </label>
+                </ConditionalWrap>
+                {required && <span>&nbsp;</span>}
+            </div>
+            {!isRowLayout && labelTippyCustomizedConfig && (
+                <TippyCustomized
+                    theme={TippyTheme.white}
+                    className="w-400 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>
             )}
-        </label>
+        </div>
     )
 }
 

src/Shared/Components/FormFieldWrapper/FormFieldWrapper.tsx

@@ -12,6 +12,8 @@ const FormFieldWrapper = ({
     warningText,
     required,
     children,
+    labelTippyCustomizedConfig,
+    labelTooltipConfig,
 }: Required<FormFieldWrapperProps>) => {
     const isRowLayout = layout === 'row'
     const itemContainerClassName = isRowLayout ? 'dc__mxw-250 w-100 mxh-36 dc__align-self-stretch' : ''
@@ -21,7 +23,19 @@ const FormFieldWrapper = ({
             <div className={`flex left top dc__gap-6 ${!isRowLayout ? 'column' : ''} w-100`}>
                 {label && (
                     <div className={`${itemContainerClassName} flex left`}>
-                        <FormFieldLabel inputId={inputId} label={label} required={required} layout={layout} />
+                        <FormFieldLabel
+                            inputId={inputId}
+                            label={label}
+                            required={required}
+                            layout={layout}
+                            {...(isRowLayout
+                                ? {
+                                      labelTooltipConfig,
+                                  }
+                                : {
+                                      labelTippyCustomizedConfig,
+                                  })}
+                        />
                     </div>
                 )}
                 <div className="w-100 dc__position-rel">{children}</div>

src/Shared/Components/FormFieldWrapper/types.ts

@@ -1,3 +1,5 @@
+import { TooltipProps } from '@Common/Tooltip'
+import { TippyCustomizedProps } from '@Common/Types'
 import { ReactElement, ReactNode } from 'react'
 
 export type LabelOrAriaLabelType =
@@ -10,7 +12,9 @@ export type LabelOrAriaLabelType =
           ariaLabel: string
       }
 
-export type FormFieldLabelProps = LabelOrAriaLabelType & {
+type LayoutType = 'row' | 'column'
+
+export type FormFieldLabelProps<Layout extends LayoutType = LayoutType> = LabelOrAriaLabelType & {
     /**
      * If true, the field is required and * is shown with the label
      */
@@ -22,8 +26,25 @@ export type FormFieldLabelProps = LabelOrAriaLabelType & {
     /**
      * Layout of the field
      */
-    layout?: 'row' | 'column'
-}
+    layout?: Layout
+} & (Layout extends 'row'
+        ? {
+              /**
+               * Tooltip configuration for the label in row layout
+               */
+              labelTooltipConfig?: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo'>
+              labelTippyCustomizedConfig?: never
+          }
+        : {
+              labelTooltipConfig?: never
+              /**
+               * Tippy configuration for the label in column layout
+               */
+              labelTippyCustomizedConfig?: Pick<
+                  TippyCustomizedProps,
+                  'heading' | 'infoText' | 'documentationLink' | 'documentationLinkText'
+              >
+          })
 
 export interface FormFieldInfoProps extends Pick<FormFieldLabelProps, 'inputId'> {
     /**
@@ -48,7 +69,10 @@ export interface FormInfoItemProps {
 }
 
 export interface FormFieldWrapperProps
-    extends Pick<FormFieldLabelProps, 'label' | 'required' | 'ariaLabel' | 'layout'>,
+    extends Pick<
+            FormFieldLabelProps,
+            'label' | 'required' | 'ariaLabel' | 'layout' | 'labelTippyCustomizedConfig' | 'labelTooltipConfig'
+        >,
         FormFieldInfoProps {
     /**
      * If true, the field takes the full width of the parent

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -219,6 +219,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     layout,
     ariaLabel,
     borderRadiusConfig,
+    labelTippyCustomizedConfig,
+    labelTooltipConfig,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const [isFocussed, setIsFocussed] = useState(false)
@@ -380,8 +382,10 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             required={required}
             fullWidth={fullWidth}
             ariaLabel={ariaLabel}
-            // TODO: Add support for custom border radius with CustomInput refactoring
+            // TODO: Add support for custom border radius with Select refactoring
             borderRadiusConfig={borderRadiusConfig}
+            labelTippyCustomizedConfig={labelTippyCustomizedConfig}
+            labelTooltipConfig={labelTooltipConfig}
         >
             <ConditionalWrap condition={isDisabled && !!disabledTippyContent} wrap={renderDisabledTippy}>
                 <div className="w-100">

src/Shared/Components/Textarea/Textarea.component.tsx

@@ -27,6 +27,8 @@ const Textarea = ({
     size = ComponentSizeType.large,
     ariaLabel,
     borderRadiusConfig,
+    labelTooltipConfig,
+    labelTippyCustomizedConfig,
     ...props
 }: TextareaProps) => {
     const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -96,6 +98,8 @@ const Textarea = ({
             fullWidth={fullWidth}
             ariaLabel={ariaLabel}
             borderRadiusConfig={borderRadiusConfig}
+            labelTooltipConfig={labelTooltipConfig}
+            labelTippyCustomizedConfig={labelTippyCustomizedConfig}
         >
             <textarea
                 {...props}