From 356d301b8deb4e2d953fbd40a5ce82bbb17a389a Mon Sep 17 00:00:00 2001
From: varholak-peter <peter.varholak@gmail.com>
Date: Tue, 7 Dec 2021 19:03:16 +0100
Subject: [PATCH] fix: radio-dialog conformance

---
 .../react-dialog/src/components/Dialog/Dialog.tsx     |  2 +-
 .../Dialog/__snapshots__/Dialog.test.tsx.snap         | 11 +++++++++++
 .../src/components/Dialog/useDialogStyles.ts          |  4 +++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-dialog/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap

diff --git a/packages/react-dialog/src/components/Dialog/Dialog.tsx b/packages/react-dialog/src/components/Dialog/Dialog.tsx
index f716a5f0af7ec..ccf1ac32d3a2d 100644
--- a/packages/react-dialog/src/components/Dialog/Dialog.tsx
+++ b/packages/react-dialog/src/components/Dialog/Dialog.tsx
@@ -6,7 +6,7 @@ import type { DialogProps } from './Dialog.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * Dialog component
+ * A Dialog is an elevated Card triggered by a user’s action.
  */
 export const Dialog: ForwardRefComponent<DialogProps> = React.forwardRef((props, ref) => {
   const state = useDialog(props, ref);
diff --git a/packages/react-dialog/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/react-dialog/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
new file mode 100644
index 0000000000000..5483ee1e275b8
--- /dev/null
+++ b/packages/react-dialog/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog renders a default state 1`] = `
+<div>
+  <div
+    class="fui-Dialog"
+  >
+    Default Dialog
+  </div>
+</div>
+`;
diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 6cc079e8ce93c..94f58ae3539f9 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import type { DialogState } from './Dialog.types';
 
+export const dialogClassName = 'fui-Dialog';
+
 /**
  * Styles for the root slot
  */
@@ -17,7 +19,7 @@ const useStyles = makeStyles({
  */
 export const useDialogStyles = (state: DialogState): DialogState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.root.className);
+  state.root.className = mergeClasses(dialogClassName, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);