chore: re-enable lint rule (#31459)

microsoft · May 27, 2024 · 3be2219 · 3be2219
1 parent 07a8045
commit 3be2219
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/apps/react-18-tests-v9/src/Overflow.cy.tsx b/apps/react-18-tests-v9/src/Overflow.cy.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   makeStyles,
-  shorthands,
   Button,
   Menu,
   MenuTrigger,
@@ -27,20 +26,20 @@ const useStyles = makeStyles({
     display: 'flex',
     flexWrap: 'nowrap',
     minWidth: 0,
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
   },
 
   resizableArea: {
     minWidth: '200px',
     maxWidth: '800px',
-    ...shorthands.border('2px', 'solid', tokens.colorBrandBackground),
-    ...shorthands.padding('20px', '10px', '10px', '10px'),
+    border: `2px solid ${tokens.colorBrandBackground}`,
+    padding: '20px 10px 10px 10px',
     position: 'relative',
     resize: 'horizontal',
     '::after': {
       content: `'Resizable Area'`,
       position: 'absolute',
-      ...shorthands.padding('1px', '4px', '1px'),
+      padding: '1px 4px 1px',
       top: '-2px',
       left: '-2px',
       fontFamily: 'monospace',

diff --git a/change/@fluentui-eslint-plugin-7c1dd810-32a7-4f87-9ef7-3d90d20d5931.json b/change/@fluentui-eslint-plugin-7c1dd810-32a7-4f87-9ef7-3d90d20d5931.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: re-enable deprecation/deprecation for files with styles",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/eslint-plugin/src/configs/core.js b/packages/eslint-plugin/src/configs/core.js
@@ -336,13 +336,6 @@ const getOverrides = () => [
       'import/no-webpack-loader-syntax': 'off', // this is ok in docs
     },
   },
-  {
-    // Temporary overrides till Griffel migration is finished
-    files: ['**/*.stories.tsx', '**/*.styles.ts', '**/*.cy.tsx', '**/*.mixins.ts'],
-    rules: {
-      'deprecation/deprecation': 'off',
-    },
-  },
   {
     files: [...configHelpers.configFiles],
     rules: {

diff --git a/packages/react-components/recipes/src/templates/Example.styles.ts b/packages/react-components/recipes/src/templates/Example.styles.ts
@@ -1,17 +1,17 @@
 import { tokens } from '@fluentui/react-theme';
-import { makeStyles, shorthands } from '@griffel/react';
+import { makeStyles } from '@griffel/react';
 
 export const useExampleStyles = makeStyles({
   root: {
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),
-    ...shorthands.borderRadius('16px'),
-    ...shorthands.padding('30px'),
-    ...shorthands.margin('6px'),
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: '16px',
+    padding: '30px',
+    margin: '6px',
   },
   innerContainer: {
     display: 'flex',
     backgroundColor: 'rgb(250, 250, 250)',
-    ...shorthands.padding('48px', '24px', '48px', '24px'),
+    padding: '48px 24px 48px 24px',
   },
   centered: {
     justifyContent: 'center',