fix(share-link): tooltip adjustment

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

@@ -47,6 +47,8 @@ type Props = {
     suggestedPillsData?: Array<Object>,
     suggestedPillsFilter?: SuggestedPillsFilter,
     suggestedPillsTitle?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     validator: (option: Option | OptionValue) => boolean,
 };
 
@@ -211,6 +213,7 @@ class PillSelectorBase extends React.Component<Props, State> {
             suggestedPillsData,
             suggestedPillsFilter,
             suggestedPillsTitle,
+            tooltipWrapperClassName,
             validator,
             ...rest
         } = this.props;
@@ -231,7 +234,13 @@ class PillSelectorBase extends React.Component<Props, State> {
         };
 
         return (
-            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme="error">
+            <Tooltip
+                isShown={hasError}
+                position={errorTooltipPosition}
+                targetWrapperClassName={tooltipWrapperClassName}
+                text={error || ''}
+                theme="error"
+            >
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <span
                     className={classes}

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

@@ -81,6 +81,8 @@ type Props = {
     suggestedPillsFilter?: SuggestedPillsFilter,
     /** String describes the suggested pills */
     suggestedPillsTitle?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     /** Validate the given input value, and update `error` prop if necessary */
     validateForError?: Function,
     /** Called to check if pill item data is valid. The `item` is passed in. */
@@ -258,6 +260,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
             suggestedPillsFilter,
             suggestedPillsTitle,
             shouldSetActiveItemOnOpen,
+            tooltipWrapperClassName,
             validator,
         } = this.props;
 
@@ -295,6 +298,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         suggestedPillsData={suggestedPillsData}
                         suggestedPillsFilter={suggestedPillsFilter}
                         suggestedPillsTitle={suggestedPillsTitle}
+                        tooltipWrapperClassName={tooltipWrapperClassName}
                         validator={validator}
                         value={this.state.inputValue}
                     />

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

@@ -88,6 +88,20 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             expect(wrapper.find('.show-error').length).toBe(0);
         });
 
+        test('should pass tooltipWrapperClassName to Tooltip as targetWrapperClassName when provided', () => {
+            const tooltipWrapperClassName = 'custom-tooltip-wrapper';
+            const wrapper = shallow(
+                <PillSelector
+                    error="error"
+                    onInput={onInputStub}
+                    onRemove={onRemoveStub}
+                    tooltipWrapperClassName={tooltipWrapperClassName}
+                />,
+            );
+
+            expect(wrapper.find('Tooltip').prop('targetWrapperClassName')).toBe(tooltipWrapperClassName);
+        });
+
         test('should render pills when there are selected options using legacy text attribute', () => {
             const options = [
                 { text: 'test', value: 'test' },

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

@@ -56,6 +56,14 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             expect(pillSelector.dive().instance().props.value).toEqual('value');
         });
 
+        test('should pass tooltipWrapperClassName to PillSelector when provided', () => {
+            const tooltipWrapperClassName = 'custom-tooltip-wrapper';
+            const wrapper = getWrapper({ tooltipWrapperClassName });
+            const selectorElement = wrapper.find('SelectorDropdown').prop('selector');
+
+            expect(selectorElement.props.tooltipWrapperClassName).toBe(tooltipWrapperClassName);
+        });
+
         test('should render disabled pill selector', () => {
             const wrapper = getWrapper({ disabled: true });
 

src/components/text-area/TextArea.js

@@ -28,6 +28,8 @@ type Props = {
     textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements
     /** A CSS class for the tooltip's tether element component */
     tooltipTetherClassName?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
 };
 
 const TextArea = ({
@@ -42,6 +44,7 @@ const TextArea = ({
     label,
     textareaRef,
     tooltipTetherClassName,
+    tooltipWrapperClassName,
     ...rest
 }: Props) => {
     const hasError = !!error;
@@ -70,6 +73,7 @@ const TextArea = ({
                 <Tooltip
                     isShown={hasError}
                     position={errorTooltipPosition || 'bottom-left'}
+                    targetWrapperClassName={tooltipWrapperClassName}
                     tetherElementClassName={tooltipTetherClassName}
                     text={error || ''}
                     theme="error"

src/components/text-area/__tests__/TextArea.test.js

@@ -80,6 +80,15 @@ describe('components/text-area/TextArea', () => {
         wrapper.unmount();
     });
 
+    test('should pass tooltipWrapperClassName to Tooltip as targetWrapperClassName when provided', () => {
+        const tooltipWrapperClassName = 'custom-tooltip-wrapper';
+        const wrapper = shallow(
+            <TextArea error="error" label="label" tooltipWrapperClassName={tooltipWrapperClassName} />,
+        );
+
+        expect(wrapper.find('Tooltip').prop('targetWrapperClassName')).toBe(tooltipWrapperClassName);
+    });
+
     test('should not show optional text when hideOptionalLabel is true', () => {
         const wrapper = shallow(<TextArea label="label" hideOptionalLabel />);
         expect(wrapper).toMatchSnapshot();

src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap

@@ -18,7 +18,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
       theme="error"
     >
       <textarea
-        aria-errormessage="errorMessage22"
+        aria-errormessage="errorMessage24"
         aria-invalid={false}
         style={
           {
@@ -29,7 +29,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage22"
+      id="errorMessage24"
       role="alert"
     />
   </Label>
@@ -46,7 +46,7 @@ exports[`components/text-area/TextArea should render text area with description
   >
     <div
       className="text-area-description"
-      id="description27"
+      id="description29"
     >
       some description
     </div>
@@ -60,8 +60,8 @@ exports[`components/text-area/TextArea should render text area with description
       theme="error"
     >
       <textarea
-        aria-describedby="description27"
-        aria-errormessage="errorMessage26"
+        aria-describedby="description29"
+        aria-errormessage="errorMessage28"
         aria-invalid={false}
         style={
           {
@@ -72,7 +72,7 @@ exports[`components/text-area/TextArea should render text area with description
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage26"
+      id="errorMessage28"
       role="alert"
     />
   </Label>
@@ -97,7 +97,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
       theme="error"
     >
       <textarea
-        aria-errormessage="errorMessage24"
+        aria-errormessage="errorMessage26"
         aria-invalid={false}
         style={
           {
@@ -108,7 +108,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage24"
+      id="errorMessage26"
       role="alert"
     />
   </Label>

src/features/shared-link-modal/EmailSharedLink.js

@@ -187,6 +187,7 @@ class EmailSharedLink extends Component {
                     placeholder={formatMessage(commonMessages.pillSelectorPlaceholder)}
                     selectedOptions={selectedOptions}
                     selectorOptions={selectorOptions}
+                    tooltipWrapperClassName="bdl-EmailSharedLink-tooltipWrapper"
                     validateForError={this.validateForError}
                     validator={this.validator}
                 >
@@ -199,6 +200,7 @@ class EmailSharedLink extends Component {
                     label={<FormattedMessage {...messages.messageTitle} />}
                     onChange={this.handleMessageChange}
                     rows={3}
+                    tooltipWrapperClassName="bdl-EmailSharedLink-tooltipWrapper"
                     value={emailMessage}
                 />
                 {isExpanded && (

src/features/shared-link-modal/EmailSharedLink.scss

@@ -22,6 +22,10 @@
         transition: height 0.2s;
     }
 
+    .bdl-EmailSharedLink-tooltipWrapper {
+        width: 100%;
+    }
+
     .bdl-PillSelector,
     textarea {
         width: 100%;

src/features/shared-link-modal/__tests__/EmailSharedLink.test.js

@@ -324,10 +324,12 @@ describe('features/shared-link-modal/EmailSharedLink', () => {
             expect(pillSelector.length).toBe(1);
             expect(pillSelector.find('ContactDatalistItem').length).toBe(11);
             expect(pillSelector.prop('inputProps')['data-resin-thing']).toEqual('hey');
+            expect(pillSelector.prop('tooltipWrapperClassName')).toBe('bdl-EmailSharedLink-tooltipWrapper');
             pillSelector.prop('inputProps').onFocus(); // should call props.onExpand
 
             const textArea = wrapper.find('TextArea');
             expect(textArea.length).toBe(1);
+            expect(textArea.prop('tooltipWrapperClassName')).toBe('bdl-EmailSharedLink-tooltipWrapper');
         });
 
         test('should add is-expanded class to form and show buttons when props.isExpanded is true', () => {

src/features/unified-share-modal/ContactsField.js

@@ -25,6 +25,8 @@ type Props = {
     getPillClassName?: (option: SelectOptionProp) => string,
     intl: any,
     label: React.Node,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     onContactAdd: Function,
     onContactRemove: Function,
     onInput?: Function,
@@ -175,6 +177,7 @@ class ContactsField extends React.Component<Props, State> {
             onPillCreate,
             selectedContacts,
             showContactAvatars,
+            tooltipWrapperClassName,
             validateForError,
             validator,
         } = this.props;
@@ -213,6 +216,7 @@ class ContactsField extends React.Component<Props, State> {
                 showAvatars
                 showRoundedPills
                 selectorOptions={contacts}
+                tooltipWrapperClassName={tooltipWrapperClassName}
                 validateForError={validateForError}
                 validator={validator}
             >

src/features/unified-share-modal/EmailForm.js

@@ -103,10 +103,8 @@ class EmailForm extends React.Component<Props, State> {
         const { isRestrictionJustificationEnabled } = this.props;
         const { isRestrictionJustificationEnabled: prevIsRestrictionJustificationEnabled } = prevProps;
         const { contactsFieldError, contactsRestrictionError } = this.state;
-        const {
-            contactsFieldError: prevContactsFieldError,
-            contactsRestrictionError: prevContactsRestrictionError,
-        } = prevState;
+        const { contactsFieldError: prevContactsFieldError, contactsRestrictionError: prevContactsRestrictionError } =
+            prevState;
 
         // Only display one type of error at a time and give preference
         // to the one triggered most recently
@@ -189,13 +187,8 @@ class EmailForm extends React.Component<Props, State> {
     validateContactsRestrictions = () => {
         let contactsRestrictionError = '';
         const { selectedJustificationReason } = this.state;
-        const {
-            intl,
-            isRestrictionJustificationEnabled,
-            selectedContacts,
-            restrictedEmails,
-            restrictedGroups,
-        } = this.props;
+        const { intl, isRestrictionJustificationEnabled, selectedContacts, restrictedEmails, restrictedGroups } =
+            this.props;
 
         const hasRestrictedCollabs = hasRestrictedContacts(selectedContacts, restrictedEmails, restrictedGroups);
         const isMissingRequiredJustification = isRestrictionJustificationEnabled && !selectedJustificationReason;
@@ -395,13 +388,15 @@ class EmailForm extends React.Component<Props, State> {
             isShown: showEnterEmailsCallout,
             position: 'middle-right',
             showCloseButton: true,
+            targetWrapperClassName: 'bdl-UnifiedShareModal-tooltipWrapper',
             text: <FormattedMessage {...messages.enterEmailAddressesCalloutText} />,
             theme: 'callout',
         };
 
         const recommendedSharingTooltipProps = {
             isShown: !!recommendedSharingTooltipCalloutName,
             position: 'middle-left',
+            targetWrapperClassName: 'bdl-UnifiedShareModal-tooltipWrapper',
             text: (
                 <FormattedMessage
                     {...messages.recommendedSharingTooltipCalloutText}
@@ -432,6 +427,7 @@ class EmailForm extends React.Component<Props, State> {
                         onPillCreate={onPillCreate}
                         selectedContacts={selectedContacts}
                         suggestedCollaborators={suggestedCollaborators}
+                        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
                         validateForError={this.validateContactField}
                         validator={this.isValidContactPill}
                         showContactAvatars
@@ -490,6 +486,7 @@ class EmailForm extends React.Component<Props, State> {
                         onChange={this.handleMessageChange}
                         placeholder={intl.formatMessage(commonMessages.messageSelectorPlaceholder)}
                         rows={3}
+                        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
                         value={message}
                         {...messageProps}
                     />

src/features/unified-share-modal/UnifiedShareModal.scss

@@ -51,6 +51,10 @@
     display: block;
 }
 
+.bdl-UnifiedShareModal-tooltipWrapper {
+    width: 100%;
+}
+
 .usm-ftux-toggle-tooltip-target {
     flex: 1;
 }

src/features/unified-share-modal/__tests__/ContactsField.test.js

@@ -67,7 +67,7 @@ describe('features/unified-share-modal/ContactsField', () => {
 
     const suggestions = {
         // expectedContacts[1]
-        '23456': {
+        23456: {
             id: '23456',
             userScore: 0.5,
             email: 'y@example.com',
@@ -76,7 +76,7 @@ describe('features/unified-share-modal/ContactsField', () => {
             isExternalUser: false,
         },
         // expectedContacts[2]
-        '34567': {
+        34567: {
             id: '34567',
             userScore: 0.1,
             email: 'z@example.com',
@@ -183,7 +183,7 @@ describe('features/unified-share-modal/ContactsField', () => {
             expect(addSuggestedContactsMock).not.toHaveBeenCalled();
 
             wrapper.setProps({
-                suggestedCollaborators: { '12345': { id: 12345 }, '23456': { id: 23456 } },
+                suggestedCollaborators: { 12345: { id: 12345 }, 23456: { id: 23456 } },
             });
 
             wrapper.instance().filterContacts(contactsFromServer);
@@ -376,7 +376,7 @@ describe('features/unified-share-modal/ContactsField', () => {
         test('should pass overlayTitle when there are suggested collabs', async () => {
             const wrapper = getWrapper({
                 getContacts,
-                suggestedCollaborators: { '12': { id: 12, userScore: 1 } },
+                suggestedCollaborators: { 12: { id: 12, userScore: 1 } },
             });
 
             wrapper.setState({ pillSelectorInputValue: 'a' });
@@ -388,13 +388,20 @@ describe('features/unified-share-modal/ContactsField', () => {
         test('should render divider at the correct index when there are suggested collabs', async () => {
             const wrapper = getWrapper({
                 getContacts,
-                suggestedCollaborators: { '12': { id: 12, userScore: 1 } },
+                suggestedCollaborators: { 12: { id: 12, userScore: 1 } },
             });
 
             wrapper.setState({ pillSelectorInputValue: 'a' });
             await wrapper.instance().getContactsPromise('a');
 
             expect(wrapper.find('PillSelectorDropdown').props().dividerIndex).toBe(1);
         });
+
+        test('should pass tooltipWrapperClassName to PillSelectorDropdown when provided', () => {
+            const tooltipWrapperClassName = 'bdl-UnifiedShareModal-tooltipWrapper';
+            const wrapper = getWrapper({ tooltipWrapperClassName });
+
+            expect(wrapper.find('PillSelectorDropdown').prop('tooltipWrapperClassName')).toBe(tooltipWrapperClassName);
+        });
     });
 });