microsoftgraph / microsoft-graph-toolkit

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

[MGTP-Samples-General-Cache]: 'Clear cache' button do not adopt doesn't adopt dark mode. #2309

Closed vagpt closed 8 months ago

vagpt commented 1 year ago

Test Environment: OS Build: Windows 11 Version: 22H2 (OS Build 25300.1000) Browser: Edge dev Browser Version 114.0.1807.5 (Official build) dev (64-bit) URL: https://mgt.dev/next/v3/?path=/story/samples-general--localization User ID: V-id

Pre-requisites:

  1. Turn on Dark mode (Color mode switch button>>Dark)

Repro Steps:

  1. Open the above URL and login with valid credentials.
  2. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
  3. Navigate to 'Components' button using tab key and expand it.
  4. Navigate to 'Samples' button using tab key and expand it.
  5. Navigate to 'General' button using arrow key and expand it.
  6. Navigate to 'Cache' link using arrow key and activate it.
  7. Navigate to 'Clear cache' button using tab key.
  8. Observe the issue in dark mode.

Actual Result: 'Clear cache' button does not adopt the 'Dark' mode.

Expected Result: 'Clear cache' button should be adopted when 'Dark' mode is enabled.

Observation:

  1. Issue doesn't reproduce when 'Aquatic/Desert' mode are enabled (Settings>>Accessibility>>Contrast themes>>Aquatic/Desert mode)

User Impact: When content or components disappear in aquatic mode, customers who rely on that feature are blocked from information and functionality of the full user experience within the site/app.

"Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)

Usable -  'Clear cache' button does not adopt when 'Dark' mode is enabled
ghost commented 1 year ago

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

gavinbarron commented 1 year ago

Update story to use a fluent button instead:

<fluent-button id="ClearCacheButton" appearance="accent">Clear Cache</fluent-button>
vagpt commented 9 months ago

Hi @gavinbarron,

Could you please provide us updated URL to verify this issue? We have checked and issue is still repro.

image

vagpt commented 8 months ago

Hi @Mnickii and @musale

This issue is working fine on the environment below, hence closing this issue.

Test Environment: OS Build: Windows 11 Version: 23H2 (OS Build 26040.1000) Browser: Edge dev Browser Version 122.0.2386.3 (Official build) dev (64-bit) URL: https://mgt.dev/next/pr/3010/?path=/story/samples-general--cache User ID: V-id

Snippet:

image