Coachmark reposition on page resize

change/@fluentui-react-92e3b62a-42e0-401c-be50-be5ee1c7240e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Coachmark: re-render and re-calculate bounds when page resizes",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/Coachmark/Coachmark.base.tsx

@@ -467,14 +467,24 @@ export const CoachmarkBase: React.FunctionComponent<ICoachmarkProps> = React.for
 
   const finalHeight: number | undefined = isCollapsed ? COACHMARK_HEIGHT : entityInnerHostRect.height;
 
+  function useGetBounds(): IRectangle | undefined {
+    const async = useAsync();
+    const [bounds, setBounds] = React.useState<IRectangle | undefined>();
+    const updateAsyncPosition = (): void => {
+      async.requestAnimationFrame(() => setBounds(getBounds(props)));
+    };
+    React.useEffect(updateAsyncPosition);
+    return bounds;
+  }
+
   return (
     <PositioningContainer
       target={target}
       offsetFromTarget={BEAK_HEIGHT}
       finalHeight={finalHeight}
       ref={forwardedRef}
       onPositioned={onPositioned}
-      bounds={getBounds(props)}
+      bounds={useGetBounds()}
       {...positioningContainerProps}
     >
       <div className={classNames.root}>

packages/react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx

@@ -34,30 +34,26 @@ const DEFAULT_PROPS = {
   directionalHint: DirectionalHint.bottomAutoEdge,
 };
 
-function useCachedBounds(props: IPositioningContainerProps, targetWindow: Window | undefined) {
+function useBounds(props: IPositioningContainerProps, targetWindow: Window | undefined) {
   /** The bounds used when determining if and where the PositioningContainer should be placed. */
-  const positioningBounds = React.useRef<IRectangle>();
-
-  const getCachedBounds = (): IRectangle => {
-    if (!positioningBounds.current) {
-      let currentBounds = props.bounds;
-
-      if (!currentBounds) {
-        currentBounds = {
-          top: 0 + props.minPagePadding!,
-          left: 0 + props.minPagePadding!,
-          right: targetWindow!.innerWidth - props.minPagePadding!,
-          bottom: targetWindow!.innerHeight - props.minPagePadding!,
-          width: targetWindow!.innerWidth - props.minPagePadding! * 2,
-          height: targetWindow!.innerHeight - props.minPagePadding! * 2,
-        };
-      }
-      positioningBounds.current = currentBounds;
+
+  const getBounds = (): IRectangle => {
+    let currentBounds = props.bounds;
+
+    if (!currentBounds) {
+      currentBounds = {
+        top: 0 + props.minPagePadding!,
+        left: 0 + props.minPagePadding!,
+        right: targetWindow!.innerWidth - props.minPagePadding!,
+        bottom: targetWindow!.innerHeight - props.minPagePadding!,
+        width: targetWindow!.innerWidth - props.minPagePadding! * 2,
+        height: targetWindow!.innerHeight - props.minPagePadding! * 2,
+      };
     }
-    return positioningBounds.current;
+    return currentBounds;
   };
 
-  return getCachedBounds;
+  return getBounds;
 }
 
 function usePositionState(
@@ -312,7 +308,7 @@ export const PositioningContainer: React.FunctionComponent<IPositioningContainer
   const rootRef = useMergedRefs(forwardedRef, positionedHost);
 
   const [targetRef, targetWindow] = useTarget(props.target, positionedHost);
-  const getCachedBounds = useCachedBounds(props, targetWindow);
+  const getCachedBounds = useBounds(props, targetWindow);
   const [positions, updateAsyncPosition] = usePositionState(
     props,
     positionedHost,