bugfix(react-dialog): ensures dialog surface style without surfaceMot…

…ion (#33247)
microsoft · Nov 11, 2024 · 0b6257a · 0b6257a
1 parent 1318c1a
commit 0b6257a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/change/@fluentui-react-dialog-5f8bb155-a039-460c-8314-c8d28bfe9cfa.json b/change/@fluentui-react-dialog-5f8bb155-a039-460c-8314-c8d28bfe9cfa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: ensures dialog surface style without surfaceMotion",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...onents/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/...onents/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts
@@ -39,6 +39,9 @@ const useRootBaseStyle = makeResetStyles({
   boxSizing: 'border-box',
   backgroundColor: tokens.colorNeutralBackground1,
   color: tokens.colorNeutralForeground1,
+  // Same styles as DialogSurfaceMotion last keyframe,
+  // to ensure dialog will be properly styled when surfaceMotion is opted-out
+  boxShadow: tokens.shadow64,
 
   [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
     maxWidth: '100vw',