feat(tooltip): support error tooltip position (#3187)

Author: megansmith-box

src/components/select-button/SelectButton.js

@@ -3,18 +3,23 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import Tooltip from '../tooltip';
+import type { Position } from '../tooltip';
 import './SelectButton.scss';
 
 type Props = {
     children?: React.Node,
     className: string,
     error?: React.Node,
+    errorTooltipPosition?: Position,
     isDisabled: boolean,
 };
 
 const SelectButton = React.forwardRef<Props, HTMLButtonElement>(
-    ({ children, className = '', error, isDisabled = false, ...rest }: Props, ref) => (
-        <Tooltip isShown={!!error} position="middle-right" text={error} theme="error">
+    (
+        { children, className = '', error, errorTooltipPosition = 'middle-right', isDisabled = false, ...rest }: Props,
+        ref,
+    ) => (
+        <Tooltip isShown={!!error} position={errorTooltipPosition} text={error} theme="error">
             <button
                 className={classNames(className, 'select-button', 'bdl-SelectButton', {
                     'is-invalid': !!error,

src/components/select-button/__tests__/SelectButton.test.js

@@ -20,4 +20,12 @@ describe('components/select-button/SelectButton', () => {
         const wrapper = shallow(<SelectButton error="error">Button Text</SelectButton>);
         expect(wrapper).toMatchSnapshot();
     });
+    test('should align error tooltip on button when errorTooltipPosition has some value', () => {
+        const wrapper = shallow(
+            <SelectButton error="error" errorTooltipPosition="middle-left">
+                Button Text
+            </SelectButton>,
+        );
+        expect(wrapper.find('Tooltip').prop('position')).toBe('middle-left');
+    });
 });

src/components/select-field/BaseSelectField.js

@@ -11,6 +11,7 @@ import SelectButton from '../select-button';
 import DatalistItem from '../datalist-item';
 import PopperComponent from '../popper';
 import SelectFieldDropdown from './SelectFieldDropdown';
+import type { Position } from '../tooltip';
 import type { SelectOptionValueProp, SelectOptionProp } from './props';
 import { PLACEMENT_BOTTOM_END, PLACEMENT_BOTTOM_START } from '../popper/constants';
 import SearchForm from '../search-form/SearchForm';
@@ -47,6 +48,8 @@ type Props = {
     defaultValue?: SelectOptionValueProp,
     /** An optional error to show within a tooltip. */
     error?: React.Node,
+    /** Position of error message tooltip */
+    errorTooltipPosition?: Position,
     /* Intl object */
     intl: Object,
     /** The select button is disabled if true */
@@ -453,7 +456,7 @@ class BaseSelectField extends React.Component<Props, State> {
 
     renderSelectButton = () => {
         const { activeItemID, isOpen } = this.state;
-        const { buttonProps: buttonElProps, isDisabled, className, error } = this.props;
+        const { buttonProps: buttonElProps, isDisabled, className, error, errorTooltipPosition } = this.props;
         const buttonText = this.renderButtonText();
         const buttonProps = {
             ...buttonElProps,
@@ -473,7 +476,7 @@ class BaseSelectField extends React.Component<Props, State> {
         return (
             // Need to store the select button reference so we can calculate the button width
             // in order to set it as the min width of the dropdown list
-            <SelectButton {...buttonProps} error={error}>
+            <SelectButton {...buttonProps} error={error} errorTooltipPosition={errorTooltipPosition}>
                 {buttonText}
             </SelectButton>
         );

src/components/select-field/__tests__/BaseSelectField.test.js

@@ -135,6 +135,15 @@ describe('components/select-field/BaseSelectField', () => {
             const buttonWrapper = wrapper.find('PopperComponent').childAt(0);
             expect(buttonWrapper).toMatchSnapshot();
         });
+
+        test('should send error tooltip positon to select button when errorTooltipPosition prop has some value', () => {
+            const wrapper = shallowRenderSelectField({
+                error: 'error',
+                errorTooltipPosition: 'middle-left',
+            });
+            const buttonWrapper = wrapper.find('PopperComponent').childAt(0);
+            expect(buttonWrapper.prop('errorTooltipPosition')).toBe('middle-left');
+        });
     });
 
     describe('renderSearchInput', () => {