feat(pill-selector-dropdown): allow setting error tooltip position (#3330)

* feat(pill-selector-dropdown): allow setting error tooltip position

* fix: fix default prop type

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: tjuanitas

src/components/pill-selector-dropdown/PillSelector.js

@@ -11,6 +11,7 @@ import RoundPill from './RoundPill';
 import Pill from './Pill';
 import SuggestedPillsRow from './SuggestedPillsRow';
 import type { RoundOption, Option, OptionValue, SuggestedPillsFilter } from './flowTypes';
+import type { Position } from '../tooltip';
 
 function stopDefaultEvent(event) {
     event.preventDefault();
@@ -22,6 +23,8 @@ type Props = {
     className?: string,
     disabled?: boolean,
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
@@ -52,6 +55,7 @@ type DefaultProps = {
     allowInvalidPills: boolean,
     disabled: boolean,
     error: string,
+    errorTooltipPosition: Position,
     inputProps: Object,
     placeholder: string,
     selectedOptions: List<Object>,
@@ -65,6 +69,7 @@ class PillSelectorBase extends React.Component<Props, State> {
         allowInvalidPills: false,
         disabled: false,
         error: '',
+        errorTooltipPosition: 'bottom-left',
         inputProps: {},
         placeholder: '',
         selectedOptions: [],
@@ -185,6 +190,7 @@ class PillSelectorBase extends React.Component<Props, State> {
             className,
             disabled,
             error,
+            errorTooltipPosition,
             getPillClassName,
             getPillImageUrl,
             inputProps,
@@ -219,7 +225,7 @@ class PillSelectorBase extends React.Component<Props, State> {
         };
 
         return (
-            <Tooltip isShown={hasError} text={error || ''} position="bottom-left" theme="error">
+            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme="error">
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <span
                     className={classes}

src/components/pill-selector-dropdown/PillSelectorDropdown.js

@@ -12,6 +12,7 @@ import PillSelector from './PillSelector';
 import type { contactType as Contact } from '../../features/unified-share-modal/flowTypes';
 import type { SelectOptionProp } from '../select-field/props';
 import type { Option, OptionValue, SelectedOptions, SuggestedPillsFilter } from './flowTypes';
+import type { Position } from '../tooltip';
 
 import './PillSelectorDropdown.scss';
 
@@ -32,6 +33,8 @@ type Props = {
     dropdownScrollBoundarySelector?: string,
     /** Error message */
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /** Called on pill render to get a specific class name to use for a particular option. Note: Only has effect when showRoundedPills is true. */
     getPillClassName?: (option: Option) => string,
     /** Function to retrieve the image URL associated with a pill */
@@ -238,6 +241,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
             dividerIndex,
             dropdownScrollBoundarySelector,
             error,
+            errorTooltipPosition,
             getPillClassName,
             getPillImageUrl,
             inputProps,
@@ -276,6 +280,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         allowInvalidPills={allowInvalidPills}
                         disabled={disabled}
                         error={error}
+                        errorTooltipPosition={errorTooltipPosition}
                         getPillClassName={getPillClassName}
                         getPillImageUrl={getPillImageUrl}
                         onBlur={this.handleBlur}