fix(react-positioning): update writeArrowUpdates to correctly resolve…

… arrow positioning (microsoft#33260)

Co-authored-by: Oleksandr Fediashov <[email protected]>

apps/vr-tests-react-components/src/stories/Tooltip/TooltipPositioning.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { Tooltip } from '@fluentui/react-tooltip';
-
+import type { PositioningProps } from '@fluentui/react-positioning';
 import { useStyles } from './utils';
 import { getStoryVariant, withStoryWrightSteps, TestWrapperDecorator, RTL, HIGH_CONTRAST } from '../../utilities';
 
@@ -47,6 +47,86 @@ const TooltipPositioning: React.FC = () => {
   );
 };
 
+const TooltipPositioningWithFallbacks: React.FC = () => {
+  const [boundaryRef, setBoundaryRef] = React.useState<HTMLDivElement | null>(null);
+
+  const wrapWithTooltip = (content: string, element: JSX.Element, fallback: PositioningProps['fallbackPositions']) => (
+    <Tooltip
+      content={content}
+      relationship="label"
+      withArrow
+      visible
+      positioning={{
+        fallbackPositions: fallback,
+        flipBoundary: boundaryRef,
+      }}
+    >
+      {element}
+    </Tooltip>
+  );
+
+  const positions = [
+    {
+      fallback: ['below-start'],
+      style: { position: 'absolute', top: '0', left: '0' },
+      content: 'top left',
+    },
+    {
+      fallback: ['below'],
+      style: { position: 'absolute', top: '0', left: '50%', transform: 'translateX(-50%)' },
+      content: 'top center',
+    },
+    {
+      fallback: ['below-end'],
+      style: { position: 'absolute', top: '0', right: '0' },
+      content: 'top right',
+    },
+    {
+      fallback: ['after'],
+      style: { position: 'absolute', top: '50%', left: '0', transform: 'translateY(-50%)' },
+      content: 'middle left',
+    },
+    {
+      fallback: ['below', 'before'],
+      style: { position: 'absolute', top: '50%', right: '0', transform: 'translateY(-50%)' },
+      content: 'middle right',
+    },
+    {
+      fallback: ['above-start'],
+      style: { position: 'absolute', bottom: '0', left: '0' },
+      content: 'below left',
+    },
+    {
+      fallback: ['above'],
+      style: { position: 'absolute', bottom: '0', left: '50%', transform: 'translateX(-50%)' },
+      content: 'below center',
+    },
+    {
+      fallback: ['above-end'],
+      style: { position: 'absolute', bottom: '0', right: '0' },
+      content: 'below right',
+    },
+  ] satisfies {
+    fallback: PositioningProps['fallbackPositions'];
+    style: React.CSSProperties;
+    content: string;
+  }[];
+
+  return (
+    <div className={useStyles().wrapperBordered} ref={setBoundaryRef}>
+      {positions.map(({ content, fallback, style }, index) =>
+        wrapWithTooltip(
+          content,
+          <div key={index} style={style as React.CSSProperties}>
+            {content}
+          </div>,
+          fallback,
+        ),
+      )}
+    </div>
+  );
+};
+
 export default {
   title: 'Tooltip Converged',
 
@@ -61,8 +141,13 @@ export default {
 } satisfies Meta<typeof Tooltip>;
 
 export const Positioning = () => <TooltipPositioning />;
+
 Positioning.storyName = 'positioning';
 
+export const PositioningwithFallbacks = () => <TooltipPositioningWithFallbacks />;
+
+PositioningwithFallbacks.storyName = 'positioning with fallbacks';
+
 export const PositioningRTL = getStoryVariant(Positioning, RTL);
 
 export const PositioningHighContrast = getStoryVariant(Positioning, HIGH_CONTRAST);

apps/vr-tests-react-components/src/stories/Tooltip/utils.ts

@@ -14,4 +14,11 @@ export const useStyles = makeStyles({
       ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
     },
   },
+  wrapperBordered: {
+    position: 'relative',
+    height: '400px',
+    width: '400px',
+    padding: '10px',
+    ...shorthands.border('1px', 'dashed', 'red'),
+  },
 });

change/@fluentui-react-positioning-a171cb79-b220-449e-83a3-440d479bdc84.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update writeArrowUpdates to correctly resolve arrow position",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-positioning/src/utils/writeArrowUpdates.ts

@@ -12,7 +12,7 @@ export function writeArrowUpdates(options: { arrow: HTMLElement | null; middlewa
   const { x: arrowX, y: arrowY } = middlewareData.arrow;
 
   Object.assign(arrow.style, {
-    left: `${arrowX}px`,
-    top: `${arrowY}px`,
+    left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : '',
+    top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : '',
   });
 }