Merge pull request #455 from mashmatrix/accept-tooltip-in-components-use-formelement

Changed to accept tooltips in components that use FormElement internally

Author: stomita

src/scripts/Checkbox.tsx

@@ -1,4 +1,10 @@
-import React, { FC, InputHTMLAttributes, Ref, useContext } from 'react';
+import React, {
+  FC,
+  InputHTMLAttributes,
+  Ref,
+  useContext,
+  ReactNode,
+} from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
@@ -15,6 +21,8 @@ export type CheckboxProps = {
   value?: CheckboxValueType;
   checked?: boolean;
   defaultChecked?: boolean;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
 } & InputHTMLAttributes<HTMLInputElement>;
@@ -30,13 +38,22 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     required,
     error,
     cols,
+    tooltip,
+    tooltipIcon,
     elementRef,
     inputRef,
     children,
     ...rprops
   } = props;
   const { grouped } = useContext(CheckboxGroupContext);
-  const formElemProps = { required, error, cols, elementRef };
+  const formElemProps = {
+    required,
+    error,
+    cols,
+    tooltip,
+    tooltipIcon,
+    elementRef,
+  };
   const checkClassNames = classnames(className, 'slds-checkbox');
   const check = (
     <label className={checkClassNames}>

src/scripts/CheckboxGroup.tsx

@@ -5,10 +5,12 @@ import React, {
   useContext,
   useMemo,
   useRef,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
+import { TooltipContent } from './TooltipContent';
 import { useEventCallback } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
@@ -32,6 +34,8 @@ export type CheckboxGroupProps = {
   error?: FormElementProps['error'];
   name?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLFieldSetElement>;
   onValueChange?: Bivariant<(values: CheckboxValueType[]) => void>;
 } & FieldsetHTMLAttributes<HTMLFieldSetElement>;
@@ -51,6 +55,8 @@ export const CheckboxGroup = createFC<
       style,
       required,
       error,
+      tooltip,
+      tooltipIcon,
       elementRef,
       onValueChange,
       onChange: onChange_,
@@ -118,6 +124,11 @@ export const CheckboxGroup = createFC<
             </abbr>
           ) : undefined}
           {label}
+          {tooltip ? (
+            <span className='slds-m-left_x-small'>
+              <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            </span>
+          ) : null}
         </legend>
         <div className='slds-form-element__control' ref={controlElRef}>
           <CheckboxGroupContext.Provider value={grpCtx}>

src/scripts/DateInput.tsx

@@ -8,6 +8,7 @@ import React, {
   useRef,
   useState,
   useContext,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import dayjs from 'dayjs';
@@ -118,6 +119,8 @@ export type DateInputProps = {
   minDate?: string;
   maxDate?: string;
   menuAlign?: 'left' | 'right';
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   datepickerRef?: Ref<HTMLDivElement>;
   onBlur?: () => void;
@@ -149,6 +152,8 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
       minDate,
       maxDate,
       extensionRenderer,
+      tooltip,
+      tooltipIcon,
       elementRef: elementRef_,
       inputRef: inputRef_,
       datepickerRef: datepickerRef_,
@@ -316,7 +321,16 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
       }
     });
 
-    const formElemProps = { id, cols, label, required, error, elementRef };
+    const formElemProps = {
+      id,
+      cols,
+      label,
+      required,
+      error,
+      tooltip,
+      tooltipIcon,
+      elementRef,
+    };
     return (
       <FormElement {...formElemProps}>
         <div className={classnames(className, 'slds-dropdown-trigger')}>

src/scripts/Input.tsx

@@ -7,6 +7,7 @@ import React, {
   useContext,
   Ref,
   useRef,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import keycoder from 'keycoder';
@@ -92,6 +93,8 @@ export type InputProps = {
   iconRight?: string | JSX.Element;
   addonLeft?: string;
   addonRight?: string;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
@@ -120,6 +123,8 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       addonLeft,
       addonRight,
       symbolPattern,
+      tooltip,
+      tooltipIcon,
       elementRef,
       inputRef,
       onKeyDown: onKeyDown_,
@@ -207,6 +212,8 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
         error,
         readOnly,
         cols,
+        tooltip,
+        tooltipIcon,
         elementRef,
       };
       return <FormElement {...formElemProps}>{contentElem}</FormElement>;

src/scripts/Lookup.tsx

@@ -11,6 +11,7 @@ import React, {
   useState,
   useEffect,
   EventHandler,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { AutoAlign, AutoAlignInjectedProps, AutoAlignProps } from './AutoAlign';
@@ -571,6 +572,8 @@ export type LookupProps = {
   targetScope?: string;
   defaultTargetScope?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
 
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLDivElement>;
@@ -619,6 +622,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       listFooter,
       data,
       scopes,
+      tooltip,
+      tooltipIcon,
       onSelect: onSelect_,
       onScopeMenuClick: onScopeMenuClick_,
       onScopeSelect: onScopeSelect_,
@@ -763,7 +768,15 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       { 'slds-has-selection': selected },
       className
     );
-    const formElemProps = { id, cols, label, required, error };
+    const formElemProps = {
+      id,
+      cols,
+      label,
+      required,
+      error,
+      tooltip,
+      tooltipIcon,
+    };
     return (
       <FormElement {...formElemProps}>
         <div

src/scripts/Picklist.tsx

@@ -5,6 +5,7 @@ import React, {
   useContext,
   useRef,
   Ref,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
@@ -57,6 +58,8 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   disabled?: boolean;
   menuSize?: DropdownMenuProps['size'];
   menuStyle?: CSSProperties;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
@@ -98,6 +101,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       required,
       error,
       cols,
+      tooltip,
+      tooltipIcon,
       elementRef: elementRef_,
       buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
@@ -294,6 +299,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       required,
       error,
       cols,
+      tooltip,
+      tooltipIcon,
       elementRef,
     };
     return (

src/scripts/RadioGroup.tsx

@@ -4,9 +4,11 @@ import React, {
   createContext,
   useContext,
   useMemo,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FieldSetColumnContext } from './FieldSet';
+import { TooltipContent } from './TooltipContent';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
 
@@ -32,6 +34,8 @@ export type RadioGroupProps = {
   error?: boolean | string | { message: string };
   name?: string;
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLFieldSetElement>;
   onValueChange?: Bivariant<(value: RadioValueType) => void>;
 } & HTMLAttributes<HTMLFieldSetElement>;
@@ -50,6 +54,8 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
       style,
       children,
       name,
+      tooltip,
+      tooltipIcon,
       elementRef,
       onValueChange,
       ...rprops
@@ -96,6 +102,11 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
             </abbr>
           ) : undefined}
           {label}
+          {tooltip ? (
+            <span className='slds-m-left_x-small'>
+              <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
+            </span>
+          ) : null}
         </legend>
         <div className='slds-form-element__control'>
           <RadioGroupContext.Provider value={grpCtx}>

src/scripts/Select.tsx

@@ -6,6 +6,7 @@ import React, {
   useRef,
   ChangeEvent,
   FC,
+  ReactNode,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
@@ -21,6 +22,8 @@ export type SelectProps = {
   required?: boolean;
   cols?: number;
   error?: FormElementProps['error'];
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   selectRef?: Ref<HTMLSelectElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
@@ -38,6 +41,8 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
       required,
       error,
       cols,
+      tooltip,
+      tooltipIcon,
       elementRef,
       selectRef,
       children,
@@ -65,7 +70,16 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
       </select>
     );
     if (isFieldSetColumn || label || required || error || cols) {
-      const formElemProps = { id, label, required, error, cols, elementRef };
+      const formElemProps = {
+        id,
+        label,
+        required,
+        error,
+        cols,
+        tooltip,
+        tooltipIcon,
+        elementRef,
+      };
       return <FormElement {...formElemProps}>{selectElem}</FormElement>;
     }
     return selectElem;

src/scripts/Textarea.tsx

@@ -1,5 +1,6 @@
 import React, {
   ChangeEvent,
+  ReactNode,
   Ref,
   TextareaHTMLAttributes,
   useContext,
@@ -19,6 +20,8 @@ export type TextareaProps = {
   required?: boolean;
   error?: FormElementProps['error'];
   cols?: number;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
   textareaRef?: Ref<HTMLTextAreaElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
@@ -36,6 +39,8 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       required,
       error,
       cols,
+      tooltip,
+      tooltipIcon,
       elementRef,
       textareaRef,
       onChange: onChange_,
@@ -60,7 +65,16 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       />
     );
     if (isFieldSetColumn || label || required || error || cols) {
-      const formElemProps = { id, label, required, error, cols, elementRef };
+      const formElemProps = {
+        id,
+        label,
+        required,
+        error,
+        cols,
+        tooltip,
+        tooltipIcon,
+        elementRef,
+      };
       return <FormElement {...formElemProps}>{textareaElem}</FormElement>;
     }
     return textareaElem;