fix(react-dialog, react-drawer): Use tokens for backdrop color #33955
+16
−2
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
emmayjiang
requested review from
mltejera,
a team and
marcosmoura
as code owners
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
fabricteam
reviewed
Mar 8, 2025
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual regressions to review in the fluentuiv9 Visual Regression Report
Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Avatar Converged.badgeMask - RTL.normal.chromium.png | 2 | Changed |
Dialog 20 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Dialog.default - High Contrast.chromium.png | 168507 | Changed |
| Dialog.no title & no actions - Dark Mode.chromium.png | 173902 | Changed |
| Dialog.alert - Dark Mode.chromium.png | 169704 | Changed |
| Dialog.no title & no actions - High Contrast.chromium.png | 172704 | Changed |
| Dialog.actions position start - Dark Mode.chromium.png | 169704 | Changed |
| Dialog.actions position start & position end - Dark Mode.chromium.png | 169704 | Changed |
| Dialog.nested - High Contrast.chromium.png | 171336 | Changed |
| Dialog.no title - Dark Mode.chromium.png | 171433 | Changed |
| Dialog.nested - Dark Mode.chromium.png | 171282 | Changed |
| Dialog.no actions - High Contrast.chromium.png | 170976 | Changed |
| Dialog.actions position start & position end - High Contrast.chromium.png | 168507 | Changed |
| Dialog.no actions - Dark Mode.chromium.png | 172173 | Changed |
| Dialog.actions position start - High Contrast.chromium.png | 168507 | Changed |
| Dialog.alert - High Contrast.chromium.png | 168507 | Changed |
| Dialog.default - Dark Mode.chromium.png | 169704 | Changed |
| Dialog.no title - High Contrast.chromium.png | 170235 | Changed |
| Dialog.scroll long content - High Contrast.chromium.png | 124353 | Changed |
| Dialog.scroll long content - Dark Mode.chromium.png | 124315 | Changed |
| Dialog.title custom action - Dark Mode.chromium.png | 171926 | Changed |
| Dialog.title custom action - High Contrast.chromium.png | 170729 | Changed |
Drawer 17 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| Drawer.overlay drawer - High Contrast.chromium.png | 156253 | Changed |
| Drawer.default drawer - High Contrast.chromium.png | 156253 | Changed |
| Drawer.overlay drawer full - Dark Mode.chromium.png | 975 | Changed |
| Drawer.overlay drawer alert - High Contrast.chromium.png | 156253 | Changed |
| Drawer.overlay drawer large - Dark Mode.chromium.png | 95551 | Changed |
| Drawer.default drawer - Dark Mode.chromium.png | 156253 | Changed |
| Drawer.overlay drawer - Dark Mode.chromium.png | 156253 | Changed |
| Drawer.overlay drawer large - High Contrast.chromium.png | 95551 | Changed |
| Drawer.overlay drawer alert - Dark Mode.chromium.png | 156253 | Changed |
| Drawer.overlay drawer medium - Dark Mode.chromium.png | 129622 | Changed |
| Drawer.overlay drawer large content scroll - Dark Mode.chromium.png | 156253 | Changed |
| Drawer.overlay drawer large content scroll - High Contrast.chromium.png | 156253 | Changed |
| Drawer.overlay drawer medium - High Contrast.chromium.png | 129622 | Changed |
| Drawer.overlay drawer position end - Dark Mode.chromium.png | 156253 | Changed |
| Drawer.overlay drawer position end - High Contrast.chromium.png | 156253 | Changed |
| Drawer.overlay drawer position start - High Contrast.chromium.png | 156253 | Changed |
| Drawer.overlay drawer position start - Dark Mode.chromium.png | 156253 | Changed |
layershifter
approved these changes
Mar 10, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I was working on a project with a designer and we were discussing the backdrop color, where he showed me this
colorBackgroundOverlaytoken that we weren't using with the dialog and drawer backdrop. I'm curious if there was a reason for this, or if the token was simply a later addition and was never added to old code.Previous Behavior
The backdrop is implemented with a hard-coded
rgba(0, 0, 0, 0.4).New Behavior
Instead of using the hard-coded value, we use the token value
colorBackgroundOverlay:Related Issue(s)