fix(share-link): tooltip adjustment

[Lindar90]

No description provided.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Denis Marusevich seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

Adds an optional tooltipWrapperClassName prop to several UI components and forwards it to the underlying Tooltip as targetWrapperClassName; applies wrapper class names in EmailSharedLink and UnifiedShareModal and adds corresponding CSS rules for full-width tooltip wrappers.

Changes

Cohort / File(s)	Summary
Pill selector components src/components/pill-selector-dropdown/PillSelector.js, src/components/pill-selector-dropdown/PillSelectorDropdown.js	Introduce optional tooltipWrapperClassName prop on Props; PillSelectorDropdown forwards it to PillSelector, which passes it to Tooltip as targetWrapperClassName.
Text area src/components/text-area/TextArea.js	Add optional tooltipWrapperClassName prop and pass it to Tooltip as targetWrapperClassName.
ContactsField (unified share) src/features/unified-share-modal/ContactsField.js	Add optional tooltipWrapperClassName prop and forward it to PillSelectorDropdown.
EmailSharedLink feature src/features/shared-link-modal/EmailSharedLink.js, src/features/shared-link-modal/EmailSharedLink.scss	Apply tooltipWrapperClassName="bdl-EmailSharedLink-tooltipWrapper" to PillSelectorDropdown and TextArea; add .bdl-EmailSharedLink-tooltipWrapper { width: 100% }.
UnifiedShareModal feature src/features/unified-share-modal/EmailForm.js, src/features/unified-share-modal/UnifiedShareModal.scss	Set targetWrapperClassName/tooltipWrapperClassName to bdl-UnifiedShareModal-tooltipWrapper for shared tooltips and pass through to ContactsField/TextArea; add .bdl-UnifiedShareModal-tooltipWrapper { width: 100% }.
Tests src/components/pill-selector-dropdown/__tests__/PillSelector.test.js, src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js, src/components/text-area/__tests__/TextArea.test.js, src/features/shared-link-modal/__tests__/EmailSharedLink.test.js, src/features/unified-share-modal/__tests__/ContactsField.test.js, src/features/unified-share-modal/__tests__/EmailForm.test.js	Add/adjust tests to assert tooltipWrapperClassName propagation to Tooltip or downstream components; update fixtures (numeric keys) where applicable.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix: expand TextInputWithCopyButton input to container width #4418: Adds similar tooltipWrapperClassName props to input components and full-width tooltip wrapper CSS—closely related implementation pattern.
• feat(react-tether): BREAKING CHANGE Bump BUIE to React 19 #4278: Introduces targetWrapperClassName handling in Tooltip rendering and target wrapper changes used by this PR.

Suggested labels

ready-to-merge

Suggested reviewers

• tjiang-box
• tjuanitas

Poem

🐇 A tiny prop hops into view,
I pass my class name straight to you.
Wrappers stretch from left to right,
Tooltips bask in full-width light.
Hooray — a snug, styled view!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided by the author, violating the repository's description template requirement.	Add a comprehensive pull request description following the template, including context about the tooltip width fix, related ticket reference, and testing details.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'fix(share-link): tooltip adjustment' directly relates to the main changes: it adds tooltip wrapper styling props and CSS classes across multiple components to fix the full-width display issue in shared-link and unified-share modals.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/features/unified-share-modal/EmailForm.js (1)

489-500: ⚠️ Potential issue | 🟠 Major

Use the correct class name for tooltip wrapper styling.

The TextArea uses "full-width", which is not defined anywhere in the codebase. Use "bdl-UnifiedShareModal-tooltipWrapper" instead, which is the established class defined in UnifiedShareModal.scss and sets width: 100%:

Suggested fix

                     <TextArea
                         data-testid="be-emailform-message"
                         label={<FormattedMessage {...messages.messageTitle} />}
                         onChange={this.handleMessageChange}
                         placeholder={intl.formatMessage(commonMessages.messageSelectorPlaceholder)}
                         rows={3}
-                        tooltipWrapperClassName="full-width"
+                        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
                         value={message}
                         {...messageProps}
                     />

🧹 Nitpick comments (1)

src/features/unified-share-modal/ContactsField.js (1)

28-29: Consider consistent prop naming across components.

The prop is named targetWrapperClassName here but tooltipWrapperClassName in PillSelector, PillSelectorDropdown, and TextArea. While the current implementation works (mapping to tooltipWrapperClassName at line 219), this naming inconsistency may confuse consumers of the API.

Consider renaming to tooltipWrapperClassName for consistency with sibling components:

♻️ Suggested refactor for naming consistency

 type Props = {
     disabled: boolean,
     error: string,
     fieldRef?: Object,
     getContactAvatarUrl?: (contact: Contact) => string,
     getContacts: (query: string) => Promise<Array<Contact>>,
     getPillClassName?: (option: SelectOptionProp) => string,
     intl: any,
     label: React.Node,
-    /** A CSS class for the tooltip's target wrapper element */
-    targetWrapperClassName?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     onContactAdd: Function,

             showContactAvatars,
-            targetWrapperClassName,
+            tooltipWrapperClassName,
             validateForError,
             validator,
         } = this.props;

                 selectorOptions={contacts}
-                tooltipWrapperClassName={targetWrapperClassName}
+                tooltipWrapperClassName={tooltipWrapperClassName}
                 validateForError={validateForError}

Also applies to: 180-180, 219-219

[loonskai]

Can we add some tests for the change? Also the snapshots seem to be outdated

[shahzadaziz]

It's not clear to me why tooltip wrapper impacts the input ?

[Lindar90]

the latest Tooltip change added display: inline-block; to tooltip wrapper