diff --git a/apps/react-18-tests-v9/src/Overflow.cy.tsx b/apps/react-18-tests-v9/src/Overflow.cy.tsx index a345e48191b55..99695266cfa06 100644 --- 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 new file mode 100644 index 0000000000000..05509197d74fd --- /dev/null +++ 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 index 5d54ca597a01e..72bbfac84c078 100644 --- 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 index 5b7098670b093..e69e1218e2914 100644 --- 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',