[Feature]: Customize boundary for dialog

[YuanboXue-Amber]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Dialog boundary is not customzible. There is no features like overflowPadding as in Popover/Menu. In my use case, I want to make dialog not intersect with the titlebar of my page.

In my use case, I have fluent dialog in my repo and from external library as well. A possible approach that will work for both my dialog and external dialog can be: create a context in Dialog component that provides a boundary type DialogBoundaryContext = HTMLElement | { getBoundingClientRect: () => { x: number; y: number; ... } }. And in DialogSurface consumes this context, calculate the top/left value of the dialog to position it.

Additional context

No response

Have you discussed this feature with our team

@microsoft/teams-prg

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Medium