move dialog resizers into shadow dom

[mayank99]

Changes

This is a slight refactor of the Resizer component used in Dialog.

• It is now rendered inside shadow DOM, and its styles have been updated to use CSS grid for positioning. As an added benefit of shadow DOM, I was able to use a plain <style> here (vs inline styles) without causing performance issues.
• User-facing change: It now protrudes outside the edge of the dialog, as originally intended (before it was reversed in fix resizable dialog issues #1424 due to overflow, which was recently removed in remove overflow and inline transform from Dialog #1795).
  • Screenshot below visualizes the resizers (corners in hotpink, perpendiculars in wheat); the corner resizers appear on top using a higher z-index.
    

Internal change: Extracted out ShadowTemplate into a shared component and renamed to ShadowRoot. Updated the logic inside to correctly handle isomorphic rendering (via declarative syntax). Also added a flushSync to immediately force a re-render (needed by createPortal); this ensures that any layout measurements are immediately reflected correctly. This is important because the Dialog resizing logic immediately measures the DOM inside a useLayoutEffect and was reporting incorrect measurements if the shadow root content was not present on first mount.

Testing

Updated affected unit tests. Since attachShadow is called inside queueMicrotask, I had to use fake timers.

Manually tested that resizing works correctly. Inspect the Resizable Dialog story and play with it in devtools to understand the new changes.

Docs

Added changeset for the one-user facing change.

[FlyersPh9]

I don't think I'm the best person to review the .tsx changes, but I will say the resize interaction does feel much nicer. 👍