[BUG] Styling issue with FluentUI Checkboxes when we insert mgt-person / mgt-people (in react: <Person /> <People />) graph tags in react component file

[chandraprakash-condeco]

Describe the bug We are facing some styling issue with FluentUI Checkboxes when we insert mgt-person / mgt-people (in react: <Person /> <People />) graph tags in our react component file. Look like mgt tag styles are making a conflict with FluentUI styles. When we insert the mgt tags, the styles of the Fluent Checkbox have been removed. And this is only happening with the Checkboxes. Other control like buttons and radio buttons working fine, Please check the video that I attached with the mail.

Check the border and background properties are updating after inserting the MGT tags. Please refer to the screenshots and videos attached.

To Reproduce Steps to reproduce the behavior:

1. Add FluentUI Checkboxes
2. Insert mgt-person / mgt-people (in react: <Person /> <People />) graph tags in react component file.
3. When you insert the mgt tags, the styles of the Fluent Checkbox get removed, looks like mgt tag styles are making a conflict with FluentUI styles.
4. Other control like button and radio button working fine

Expected behavior Fluent Checkbox and mgt-person / mgt-people tags must work togather.

Screenshots

Environment (please complete the following information):

• OS: Windows
• Browser: chrome
• Framework: react
• Context: Microsoft Teams
• Version [e.g. 0.1]
• Provider Msal2Provider

Additional context Add any other context about the problem here.

[ghost]

Hello chandraprakash-condeco, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[sebastienlevert]

I can't see your video on the issue. Can you share it again? It's also very interesting, as we don't have a dependency on Fluent UI React... So if there is an issue, I feel it's pure coincidental! Any repro using Stackblitz would be interesting! (You can fork the following : https://aka.ms/mgt/react/starter)

[chandraprakash-condeco]

Please find the video link https://www.dropbox.com/s/0fvfj6e9ps59ew3/React-App-with-dev-tool.webm?dl=0

Happy to show you the problem in a quick session-sharing meeting. A quick help is highly appreciated.

[EisenbergEffect]

Hello @chandraprakash-condeco. Thanks for reporting this issue. I'm one of the technical leads on the Fluent UI Web Components. I wasn't aware of this issue until today. I wanted to let you know that I'm following up internally to get all the relevant people together so we can find out what's going on here. Thanks for your patience.

[sebastienlevert]

Thanks for jumping in @EisenbergEffect! I would love @chandraprakash-condeco if you could provide a simple repro of your code to understand how you are using both MGT and Fluent UI Web Components together! This would be extremly useful for us to help debugging this issue.

Thanks!

[gavinbarron]

@chandraprakash-condeco if you can either share a minimal reproduction as Seb suggested, or let us know what versions of mgt and fluentUI you're using (Web Components / React + Semver) that would be really helpful for our team to pin this down.

[chandraprakash-condeco]

@gavinbarron @sebastienlevert @EisenbergEffect Please find the source code from dropbox, it has readme.txt inside. https://www.dropbox.com/s/mbs2gjg0xwhpy0z/Project.zip?dl=0

Happy to answer further queries or jump on a call for further assistance.

[gavinbarron]

Thank you @chandraprakash-condeco that sample reproduction was most useful.

Here's what I can make of the situation. You have a dependency on @fluentui/web-components^2.5.3 and a dependency on @microsoft/mgt-react^2.5.2.

@microsoft/mgt-react has a transitive dependency on @fluentui/[email protected] via @microsoft/mgt-components

The mgt-file-upload component uses fluent-checkbox, thus the packages that have that component included also have the v0.22.1 version of the fluent-checkbox. It looks like there was a change to the design of the fluent-checkbox made in @fluentui/[email protected] changing the outline from --neutral-outline-rest to --neutral-stroke-strong-rest.

Because of the inclusion of the older version of the fluent-checkbox in the mgt package that is the version that is getting used in your example when you introduce any of the mgt components into your solution. Now this is unfortunate, and we are currently working on upgrading to use the 2.5.x version of fluentui web-components and that will drop as part of our v3 milestone.

Now, that doesn't help immediately and I'm a little puzzled as to how to ensure that the v2 instances of the fluentui components are used in this situation.

However, I do have a small piece of good news. If you're not using mgt-file-upload then the offending behavior will not occur in production builds thanks tree shaking, which I validated in you sample app by searching the production build output for the offending style. The flip to that is you may have other components that are in use which revert to the styling that was shipped as part of fluentui web-components v0.22.1.

We will be having internal discussions to see what we can do avoid these kinds of problems in future and see if we can provide you with any other approaches.

[gavinbarron]

@chandraprakash-condeco I did think of a work-around that might help.

The underlying issue is that the v0.22.1 version of fluent-checkbox is registering first. If you can delay the loading of the mgt based components until after the fluentui components, then you'd get the latest version of the fluent-checkbox.

This can be done by putting the usages of mgt component into a wrapper components that are then loaded via React.lazy into layout components which use something from fluentui, such as the FluentDesignSystemProvider, the key is to ensure that mgt is loaded after fluentui.

Not an idea solution, and one that comes with the big caveat that this might break some mgt components. I tested this approach in your solution and mgt-login and mgt-people (and children) appear to be functioning and rendering as expected.

Hopefully this is helpful.

[chandraprakash-condeco]

Thanks @gavinbarron, let us try the workaround.

[apanwar22i]

@gavinbarron Putting checkbox into wrapper component is working. It is loading the styles now. But this is just a temporary solution. Because we have to manage checkbox attributes through React props.

[gavinbarron]

Closing this item. This was a case of mixing incompatible version of mgt and fluent ui