fix: Fix formatting and chromatic

jfox-box · jfox-box · commit a8d53eda1fcd · 2025-09-24T19:25:16.000-07:00
diff --git a/src/components/draft-js-editor/DraftJSEditor.js b/src/components/draft-js-editor/DraftJSEditor.js
@@ -126,7 +126,13 @@ class DraftJSEditor extends React.Component<Props> {
                     {description}
                 </span>
 
-                <Tooltip isShown={!!error} position="bottom-left" text={error ? error.message : ''} theme="error">
+                <Tooltip
+                    targetWrapperClassName="bdl-DraftJSEditor-target"
+                    isShown={!!error}
+                    position="bottom-left"
+                    text={error ? error.message : ''}
+                    theme="error"
+                >
                     {/* need div so tooltip can set aria-describedby */}
                     <div>
                         <Editor
diff --git a/src/components/draft-js-editor/DraftJSEditor.scss b/src/components/draft-js-editor/DraftJSEditor.scss
@@ -16,3 +16,7 @@
 .draft-js-editor {
     overflow: hidden;
 }
+
+.bdl-DraftJSEditor-target {
+    display: block;
+}
diff --git a/src/components/dropdown-menu/DropdownMenu.js b/src/components/dropdown-menu/DropdownMenu.js
@@ -13,6 +13,8 @@ type Props = {
     children: React.Node,
     /** Forces menu to render within the scroll parent */
     className?: string,
+    /** Optional class name for the target wrapper element */
+    targetWrapperClassName?: string,
     /** Forces menu to render within the visible window */
     constrainToScrollParent: boolean,
     /** Right aligns menu to button */
@@ -182,6 +184,7 @@ class DropdownMenu extends React.Component<Props, State> {
             bodyElement,
             children,
             className,
+            targetWrapperClassName,
             constrainToScrollParent,
             constrainToWindow,
             constrainToWindowWithPin,
@@ -271,13 +274,13 @@ class DropdownMenu extends React.Component<Props, State> {
                 renderElementTo={bodyEl}
                 targetAttachment={tetherTargetAttachment || targetAttachment}
                 renderTarget={ref => (
-                    <div ref={ref} style={{ display: 'inline-block' }}>
+                    <div ref={ref} className={classNames('bdl-DropdownMenu-target', targetWrapperClassName)}>
                         {React.cloneElement(menuButton, menuButtonProps)}
                     </div>
                 )}
                 renderElement={ref => {
                     return isOpen ? (
-                        <div ref={ref} style={{ display: 'inline-block' }}>
+                        <div ref={ref} className="bdl-DropdownMenu-element">
                             {React.cloneElement(menu, menuProps)}
                         </div>
                     ) : null;
diff --git a/src/components/dropdown-menu/DropdownMenu.scss b/src/components/dropdown-menu/DropdownMenu.scss
@@ -19,6 +19,10 @@
     margin-top: 5px;
 }
 
+.bdl-DropdownMenu-target {
+    display: inline-block;
+}
+
 @include breakpoint($medium-screen) {
     .bdl-DropdownMenu--responsive {
         &.dropdown-menu-enabled {
diff --git a/src/components/footer-indicator/FooterIndicator.scss b/src/components/footer-indicator/FooterIndicator.scss
@@ -35,3 +35,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
+.bdl-FooterIndicator-tooltipTarget {
+    height: 100%;
+}
diff --git a/src/components/footer-indicator/FooterIndicator.tsx b/src/components/footer-indicator/FooterIndicator.tsx
@@ -11,7 +11,11 @@ type Props = {
 const FooterIndicator = ({ indicatorText }: Props) => {
     return (
         <div className="bdl-FooterIndicator">
-            <Tooltip position={TooltipPosition.TOP_RIGHT} text={indicatorText}>
+            <Tooltip
+                targetWrapperClassName="bdl-FooterIndicator-tooltipTarget"
+                position={TooltipPosition.TOP_RIGHT}
+                text={indicatorText}
+            >
                 <div className="bdl-FooterIndicator-content">
                     <span className="bdl-FooterIndicator-iconWrapper">
                         <IconPuzzlePiece height={14} width={14} />
diff --git a/src/components/footer-indicator/__tests__/__snapshots__/FooterIndicator.test.tsx.snap b/src/components/footer-indicator/__tests__/__snapshots__/FooterIndicator.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`feature/footer-indicator/FooterIndicator should render a FooterIndicato
     constrainToWindow={true}
     isDisabled={false}
     position="top-right"
+    targetWrapperClassName="bdl-FooterIndicator-tooltipTarget"
     text="abcdefghijklmnopqrstuvwxyz"
     theme="default"
   >
diff --git a/src/components/media/Media.scss b/src/components/media/Media.scss
@@ -40,3 +40,7 @@
         margin-left: 10px;
     }
 }
+
+.bdl-Media-menu-target {
+    display: block;
+}
diff --git a/src/components/media/MediaMenu.tsx b/src/components/media/MediaMenu.tsx
@@ -38,7 +38,12 @@ const MediaMenu = ({
     intl,
     ...rest
 }: MediaMenuProps) => (
-    <DropdownMenu constrainToScrollParent isRightAligned {...dropdownProps}>
+    <DropdownMenu
+        constrainToScrollParent
+        isRightAligned
+        targetWrapperClassName="bdl-Media-menu-target"
+        {...dropdownProps}
+    >
         <PlainButton
             aria-label={intl.formatMessage(messages.menuButtonArialLabel)}
             className={classnames('bdl-Media-menu', className)}
diff --git a/src/components/media/__tests__/__snapshots__/Media.test.tsx.snap b/src/components/media/__tests__/__snapshots__/Media.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`components/Media compound component 1`] = `
     class="bdl-Media-body"
   >
     <div
-      style="display: inline-block;"
+      class="bdl-DropdownMenu-target bdl-Media-menu-target"
     >
       <button
         aria-expanded="false"
diff --git a/src/components/menu/MenuItem.scss b/src/components/menu/MenuItem.scss
@@ -0,0 +1,3 @@
+.bdl-MenuItem-radarTarget {
+    display: block;
+}
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
@@ -4,6 +4,8 @@ import omit from 'lodash/omit';
 
 import RadarAnimation from '../radar';
 
+import './MenuItem.scss';
+
 export interface MenuItemProps {
     /** 'aria-checked' - ARIA attribute for checkbox elements */
     'aria-checked'?: boolean;
@@ -68,7 +70,7 @@ class MenuItem extends React.Component<MenuItemProps> {
 
         let menuItem = <li {...menuItemProps}>{children}</li>;
         if (showRadar) {
-            menuItem = <RadarAnimation>{menuItem}</RadarAnimation>;
+            menuItem = <RadarAnimation targetWrapperClassName="bdl-MenuItem-radarTarget">{menuItem}</RadarAnimation>;
         }
 
         return menuItem;
diff --git a/src/components/menu/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/menu/__tests__/__snapshots__/MenuItem.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`components/menu/MenuItem render() should render a RadarAnimation if sho
   constrainToWindow={true}
   isShown={true}
   position="middle-right"
+  targetWrapperClassName="bdl-MenuItem-radarTarget"
 >
   <li
     className="menu-item"
diff --git a/src/components/radar/RadarAnimation.scss b/src/components/radar/RadarAnimation.scss
@@ -117,3 +117,7 @@ $radar-animation-offset: 1px;
 .radar-animation-element {
     z-index: $overlay-z-index;
 }
+
+.bdl-RadarAnimation-target {
+    display: inline-block;
+}
diff --git a/src/components/radar/RadarAnimation.stories.tsx b/src/components/radar/RadarAnimation.stories.tsx
@@ -58,9 +58,11 @@ export const topRight = () => (
 );
 
 export const withOffset = () => (
-    <RadarAnimation position={RadarAnimationPosition.MIDDLE_LEFT} offset="0 20px">
-        <Button>Middle Left, with offset</Button>
-    </RadarAnimation>
+    <div style={{ marginLeft: 5 }}>
+        <RadarAnimation position={RadarAnimationPosition.MIDDLE_LEFT} offset="0 20px">
+            <Button>Middle Left, with offset</Button>
+        </RadarAnimation>
+    </div>
 );
 
 export default {
diff --git a/src/components/radar/RadarAnimation.tsx b/src/components/radar/RadarAnimation.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import uniqueId from 'lodash/uniqueId';
 import TetherComponent, { type TetherProps } from 'react-tether';
 
@@ -62,6 +63,8 @@ export interface RadarAnimationProps {
     children: React.ReactElement;
     /** A CSS class for the radar */
     className?: string;
+    /** Optional class name for the target wrapper element */
+    targetWrapperClassName?: string;
     /** Whether to constrain the radar to the element's scroll parent. Defaults to `false` */
     constrainToScrollParent: boolean;
     /** Whether to constrain the radar to window. Defaults to `true` */
@@ -100,6 +103,7 @@ class RadarAnimation extends React.Component<RadarAnimationProps> {
         const {
             children,
             className = '',
+            targetWrapperClassName,
             constrainToScrollParent,
             constrainToWindow,
             position,
@@ -156,7 +160,7 @@ class RadarAnimation extends React.Component<RadarAnimationProps> {
                 ref={this.tetherRef}
                 {...tetherProps}
                 renderTarget={ref => (
-                    <div ref={ref} style={{ display: 'inline-block' }}>
+                    <div ref={ref} className={classNames('bdl-RadarAnimation-target', targetWrapperClassName)}>
                         {referenceElement}
                     </div>
                 )}
diff --git a/src/components/select/Select.js b/src/components/select/Select.js
@@ -63,12 +63,13 @@ const Select = ({
                             <span className="select-overlay" />
                         </span>
                         {infoTooltip && (
-                            <Tooltip isShown={infoTooltipIsOpen} position="middle-right" text={infoTooltip}>
-                                <PlainButton
-                                    type="button"
-                                    className="tooltip-icon-container"
-                                    onClick={() => setInfoTooltipIsOpen(!infoTooltipIsOpen)}
-                                >
+                            <Tooltip
+                                targetWrapperClassName="tooltip-icon-container"
+                                isShown={infoTooltipIsOpen}
+                                position="middle-right"
+                                text={infoTooltip}
+                            >
+                                <PlainButton type="button" onClick={() => setInfoTooltipIsOpen(!infoTooltipIsOpen)}>
                                     <IconInfo
                                         height={16}
                                         width={16}
diff --git a/src/components/select/__tests__/__snapshots__/Select.test.js.snap b/src/components/select/__tests__/__snapshots__/Select.test.js.snap
@@ -104,11 +104,11 @@ exports[`components/select/Select should render infoTooltip when specified 1`] =
           isDisabled={false}
           isShown={false}
           position="middle-right"
+          targetWrapperClassName="tooltip-icon-container"
           text="hello!!!"
           theme="default"
         >
           <PlainButton
-            className="tooltip-icon-container"
             onClick={[Function]}
             type="button"
           >
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
@@ -390,7 +390,6 @@ class Tooltip extends React.Component<TooltipProps, State> {
             <TetherComponent
                 {...tetherProps}
                 ref={this.tetherRef}
-                renderElementTo={bodyEl ?? (document.body as HTMLElement)}
                 renderTarget={(ref: React.RefObject<HTMLDivElement>) => {
                     const child = React.Children.only(children);
                     return child ? (
diff --git a/src/elements/content-sidebar/SidebarNavButton.js b/src/elements/content-sidebar/SidebarNavButton.js
@@ -82,7 +82,12 @@ const SidebarNavButton = React.forwardRef<Props, React.Ref<any>>((props: Props,
         };
 
         return (
-            <Tooltip position="middle-left" text={tooltip} isTabbable={false}>
+            <Tooltip
+                position="middle-left"
+                text={tooltip}
+                isTabbable={false}
+                targetWrapperClassName="bcs-NavButton-target"
+            >
                 <Button
                     accessibleWhenDisabled={true}
                     aria-controls={`${id}-content`}
diff --git a/src/elements/content-sidebar/activity-feed/comment/Comment.js b/src/elements/content-sidebar/activity-feed/comment/Comment.js
@@ -187,7 +187,7 @@ class Comment extends React.Component<Props, State> {
                                 constraints={[{ to: 'scrollParent', attachment: 'together' }]}
                                 targetAttachment="bottom right"
                                 renderTarget={ref => (
-                                    <div ref={ref} style={{ display: 'inline-block' }}>
+                                    <div ref={ref}>
                                         <Media.Menu
                                             isDisabled={isConfirmingDelete}
                                             data-testid="comment-actions-menu"
diff --git a/src/features/collapsible-sidebar/CollapsibleSidebar.scss b/src/features/collapsible-sidebar/CollapsibleSidebar.scss
@@ -113,6 +113,10 @@ $left-sidebar-z-index: 40 !default;
     }
 }
 
+.bdl-Tooltip-target.bdl-CollapsibleSidebar-menuItemToolTipTarget {
+    display: block;
+}
+
 @include breakpoint($xlarge-screen) {
     .bdl-CollapsibleSidebar-logo {
         margin-left: $collapsible-side-bar-h-padding - 1px;
diff --git a/src/features/collapsible-sidebar/CollapsibleSidebarMenuItem.js b/src/features/collapsible-sidebar/CollapsibleSidebarMenuItem.js
@@ -197,6 +197,7 @@ function CollapsibleSidebarMenuItem(props: Props) {
     return (
         <Tooltip
             className={classNames('bdl-CollapsibleSidebar-menuItemToolTip')}
+            targetWrapperClassName="bdl-CollapsibleSidebar-menuItemToolTipTarget"
             isDisabled={!isTextOverflowed}
             isShown={isScrolling || shouldHideTooltip ? false : undefined}
             isTabbable={false}
diff --git a/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarMenuItem.test.js.snap b/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarMenuItem.test.js.snap
@@ -13,6 +13,7 @@ exports[`components/core/collapsible-sidebar/__tests__/CollapsibleSidebarMenuIte
     isDisabled={true}
     isTabbable={false}
     position="middle-right"
+    targetWrapperClassName="bdl-CollapsibleSidebar-menuItemToolTipTarget"
     text="bar"
     theme="default"
   >
diff --git a/src/features/pagination/__tests__/__snapshots__/OffsetBasedPagination.test.js.snap b/src/features/pagination/__tests__/__snapshots__/OffsetBasedPagination.test.js.snap
@@ -54,11 +54,7 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
               targetAttachment="bottom right"
             >
               <div
-                style={
-                  {
-                    "display": "inline-block",
-                  }
-                }
+                className="bdl-DropdownMenu-target"
               >
                 <Button
                   aria-expanded="false"
@@ -332,11 +328,7 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
               targetAttachment="bottom right"
             >
               <div
-                style={
-                  {
-                    "display": "inline-block",
-                  }
-                }
+                className="bdl-DropdownMenu-target"
               >
                 <Button
                   aria-expanded="false"
@@ -610,11 +602,7 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
               targetAttachment="bottom right"
             >
               <div
-                style={
-                  {
-                    "display": "inline-block",
-                  }
-                }
+                className="bdl-DropdownMenu-target"
               >
                 <Button
                   aria-expanded="false"
@@ -888,11 +876,7 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
               targetAttachment="bottom right"
             >
               <div
-                style={
-                  {
-                    "display": "inline-block",
-                  }
-                }
+                className="bdl-DropdownMenu-target"
               >
                 <Button
                   aria-expanded="false"
@@ -1210,11 +1194,7 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
               targetAttachment="bottom right"
             >
               <div
-                style={
-                  {
-                    "display": "inline-block",
-                  }
-                }
+                className="bdl-DropdownMenu-target"
               >
                 <Button
                   aria-expanded="false"
@@ -1532,11 +1512,7 @@ exports[`elements/Pagination/OffsetBasedPagination should render properly with o
               targetAttachment="bottom right"
             >
               <div
-                style={
-                  {
-                    "display": "inline-block",
-                  }
-                }
+                className="bdl-DropdownMenu-target"
               >
                 <Button
                   aria-expanded="false"
diff --git a/src/features/sandbox-banner/SandboxBanner.tsx b/src/features/sandbox-banner/SandboxBanner.tsx
@@ -10,10 +10,8 @@ type Props = {
 
 const SandboxBanner = ({ children }: Props) => {
     return (
-        <Tooltip text={children}>
-            <div className="bdl-SandboxBanner">
-                <div className="bdl-SandboxBanner-text">{children}</div>
-            </div>
+        <Tooltip targetWrapperClassName="bdl-SandboxBanner" text={children}>
+            <div className="bdl-SandboxBanner-text">{children}</div>
         </Tooltip>
     );
 };
diff --git a/src/features/sandbox-banner/__tests__/__snapshots__/SandboxBanner.test.tsx.snap b/src/features/sandbox-banner/__tests__/__snapshots__/SandboxBanner.test.tsx.snap
diff --git a/src/features/unified-share-modal/SharedLinkSection.js b/src/features/unified-share-modal/SharedLinkSection.js
diff --git a/src/features/unified-share-modal/UnifiedShareModal.scss b/src/features/unified-share-modal/UnifiedShareModal.scss
diff --git a/src/features/unified-share-modal/__tests__/__snapshots__/SharedLinkSection.test.js.snap b/src/features/unified-share-modal/__tests__/__snapshots__/SharedLinkSection.test.js.snap

Original file line number	Diff line number	Diff line change
`@@ -16,3 +16,7 @@`
`16`	`16`	`.draft-js-editor {`
`17`	`17`	`overflow: hidden;`
`18`	`18`	`}`
	`19`	`+`
	`20`	`+.bdl-DraftJSEditor-target {`
	`21`	`+ display: block;`
	`22`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -35,3 +35,7 @@`
`35`	`35`	`white-space: nowrap;`
`36`	`36`	`text-overflow: ellipsis;`
`37`	`37`	`}`
	`38`	`+`
	`39`	`+.bdl-FooterIndicator-tooltipTarget {`
	`40`	`+ height: 100%;`
	`41`	`+}`
Original file line number	Diff line number	Diff line change
@@ -9,6 +9,7 @@ exports[`feature/footer-indicator/FooterIndicator should render a FooterIndicato
`9`	`9`	`constrainToWindow={true}`
`10`	`10`	`isDisabled={false}`
`11`	`11`	`position="top-right"`
	`12`	`+ targetWrapperClassName="bdl-FooterIndicator-tooltipTarget"`
`12`	`13`	`text="abcdefghijklmnopqrstuvwxyz"`
`13`	`14`	`theme="default"`
`14`	`15`	`>`
Original file line number	Diff line number	Diff line change
`@@ -40,3 +40,7 @@`
`40`	`40`	`margin-left: 10px;`
`41`	`41`	`}`
`42`	`42`	`}`
	`43`	`+`
	`44`	`+.bdl-Media-menu-target {`
	`45`	`+ display: block;`
	`46`	`+}`
Original file line number	Diff line number	Diff line change
@@ -16,7 +16,7 @@ exports[`components/Media compound component 1`] = `
`16`	`16`	`class="bdl-Media-body"`
`17`	`17`	`>`
`18`	`18`	`<div`
`19`		`- style="display: inline-block;"`
	`19`	`+ class="bdl-DropdownMenu-target bdl-Media-menu-target"`
`20`	`20`	`>`
`21`	`21`	`<button`
`22`	`22`	`aria-expanded="false"`