search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
936 stars 296 forks source link

[BUG] mgt-file-list dark mode still has white background #2397

Closed AnthonyPhan closed 1 year ago

AnthonyPhan commented 1 year ago

Describe the bug When using the mgt-file-list component in dark mode there is still a white background applied to the component which shows. Due to the way the component uses shadow DOM and CSS variables, there's no clean way for the host component to change this bahaviour.

To Reproduce Steps to reproduce the behavior:

dive with a black background below is to simulate an app in dark mode

<div style="background-color: black; padding: 20">
<mgt-file-list class="mgt-dark" enable-file-upload></mgt-file-list>
</div>

Expected behavior The component should allow the user to set the --background-color CSS variable and not overwrite it.

Screenshots notice the white spaces in the corners below: image

When inspecting the DOM, you can see the component overwrites the CSS background-color variable using the :host selector image

Environment (please complete the following information):

ghost commented 1 year ago

Hello AnthonyPhan, 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 🙌

musale commented 1 year ago

Hello @AnthonyPhan what version of mgt are you using?

AnthonyPhan commented 1 year ago

@microsoft/mgt-react": "^2.10.0

But i can also confirm this occurs in Microsoft Graph Toolkit Playground which presumably runs the latest version of @microsoft/mgt

musale commented 1 year ago

@AnthonyPhan thank you for raising this issue. I can reproduce it. Would you be interested in making a fix and raising a PR? Also, you can try to test the new version v3.0.0-rc.3 release that has a new (and better) dark theme support.

AnthonyPhan commented 1 year ago

Unfortunately, I dont think I understand the code base well enough to contribute here. I have also raised a feature suggestion #2422 to try to address similar issues in the future.

gavinbarron commented 1 year ago

This specific issue is resolved with our next major version.

gavinbarron commented 1 year ago

I'm going to close this one for now as it's resolved in v3.0 which is available as a Release Candidate at present and will GA very soon