Changed to accept tooltips in components that use FormElement internally

Author: kosuke-k

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/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/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;

stories/DateInput.stories.tsx

@@ -175,3 +175,21 @@ export const IncludeTimeData: ComponentStoryObj<typeof DateInput> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const WithTooltip: ComponentStoryObj<typeof DateInput> = {
+  name: 'With tooltip',
+  args: {
+    label: 'Date Input Label',
+    tooltip: 'Tooltip Text',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Date input control with tooltip',
+      },
+    },
+  },
+};

stories/Input.stories.tsx

@@ -253,3 +253,20 @@ export const ReadOnlyWithFixedText: ComponentStoryObj<typeof Input> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const WithTooltip: ComponentStoryObj<typeof Input> = {
+  name: 'With tooltip',
+  args: {
+    label: 'Input Label',
+    placeholder: 'Placeholder Text',
+    tooltip: 'Tooltip Text',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Input control with tooltip',
+    },
+  },
+};

stories/Lookup.stories.tsx

@@ -654,3 +654,22 @@ export const UncontrolledWithMultiScope: ComponentStoryObj<typeof Lookup> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const WithTooltip: ComponentStoryObj<typeof Lookup> = {
+  name: 'With tooltip',
+  args: {
+    label: 'Lookup Label',
+    tooltip: 'Tooltip Text',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Lookup component with tooltip',
+      },
+      iframeHeight: 120,
+    },
+  },
+};