chore: migrate react-dialog to use Griffel (#21434)

microsoft · Jan 26, 2022 · 096e9ba · 096e9ba
1 parent d525c8b
commit 096e9ba
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 9 deletions.
diff --git a/packages/react-dialog/.babelrc.json b/packages/react-dialog/.babelrc.json
@@ -1,3 +1,4 @@
 {
-  "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"]
+  "presets": ["@griffel"],
+  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
 }
diff --git a/packages/react-dialog/jest.config.js b/packages/react-dialog/jest.config.js
@@ -17,5 +17,5 @@ module.exports = {
   },
   coverageDirectory: './coverage',
   setupFilesAfterEnv: ['./config/tests.js'],
-  snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
+  snapshotSerializers: ['@griffel/jest-serializer'],
 };
diff --git a/packages/react-dialog/package.json b/packages/react-dialog/package.json
@@ -26,11 +26,9 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-beta.4",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.0",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -44,7 +42,7 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-beta.4",
+    "@griffel/react": "1.0.0",
     "@fluentui/react-utilities": "9.0.0-beta.4",
     "tslib": "^2.1.0"
   },

diff --git a/packages/react-dialog/src/common/isConformant.ts b/packages/react-dialog/src/common/isConformant.ts
@@ -1,14 +1,14 @@
 import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
 import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
+import griffelTests from '@fluentui/react-conformance-griffel';
 
 export function isConformant<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
     asPropHandlesRef: true,
     componentPath: module!.parent!.filename.replace('.test', ''),
-    extraTests: makeStylesTests as TestObject<TProps>,
+    extraTests: griffelTests as TestObject<TProps>,
   };
 
   baseIsConformant(defaultOptions, testInfo);

diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogState } from './Dialog.types';
 
 export const dialogClassName = 'fui-Dialog';