microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.53k stars 2.74k forks source link

[Bug]: Default dialog popover styles are lost when trigger button is a TreeLayout Action #33280

Open dacs30 opened 1 day ago

dacs30 commented 1 day ago

Component

Tree

Package version

^9.0.0

React version

^18

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 AMD Ryzen Threadripper PRO 5945WX 12-Cores
    Memory: 95.00 GB / 127.86 GB
  Browsers:
    Edge: Chromium (129.0.2792.79)
    Internet Explorer: 11.0.26100.1882

Current Behavior

When I have a dialog trigger and popover that are part of a tree action, the styles of the popover are weird when compared to when the dialog logic is out of the actions field. I have recorded a demo showing the bug.

https://github.com/user-attachments/assets/88c681c3-59d7-4ac5-a135-50b87c5cbc74

Expected Behavior

The default Fluent UI styles should be preserved for the actions

Reproduction

https://stackblitz.com/edit/lbqaha?file=package.json

Steps to reproduce

The code from the stackblitz have a component that isolates the menu and dialog logic. The "..." is the component getting placed outside of the actions menu. The other "..." is the component getting placed in within the TreeLayout actions.

When opening the dialog on both, you will notice that the components within the the actions do not have the default Fluent UI styles getting persisted as they do for the other case.

https://github.com/user-attachments/assets/77e6902e-b792-477c-8dce-3e4b1e5798df

Are you reporting an Accessibility issue?

None

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

micahgodbolt commented 1 day ago

This issue may be lower priority as the Nav control seems to fit the users use case better.