chore(react-dialog): remove localShorthands in favor of griffel shorthands

change/@fluentui-react-dialog-edfb588b-4236-4b7d-bb43-cc2ce8233ed3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: remove localShorthands in favor of griffel shorthands",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "none"
+}

packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts

@@ -7,7 +7,6 @@ import {
   ACTIONS_START_GRID_AREA,
   MEDIA_QUERY_BREAKPOINT_SELECTOR,
 } from '../../contexts/constants';
-import * as localShorthands from '../../utils/localShorthands';
 
 export const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {
   root: 'fui-DialogActions',
@@ -26,11 +25,11 @@ const useStyles = makeStyles({
   },
   gridPositionEnd: {
     justifySelf: 'end',
-    ...localShorthands.gridArea(ACTIONS_END_GRID_AREA),
+    ...shorthands.gridArea(ACTIONS_END_GRID_AREA),
   },
   gridPositionStart: {
     justifySelf: 'start',
-    ...localShorthands.gridArea(ACTIONS_START_GRID_AREA),
+    ...shorthands.gridArea(ACTIONS_START_GRID_AREA),
   },
 });
 

packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts

@@ -1,8 +1,7 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DialogBodySlots, DialogBodyState } from './DialogBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { typographyStyles } from '@fluentui/react-theme';
-import * as localShorthands from '../../utils/localShorthands';
 import { BODY_GRID_AREA } from '../../contexts/constants';
 
 export const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {
@@ -19,7 +18,7 @@ const useStyles = makeStyles({
     overflowY: 'auto',
     minHeight: '32px',
     boxSizing: 'border-box',
-    ...localShorthands.gridArea(BODY_GRID_AREA),
+    ...shorthands.gridArea(BODY_GRID_AREA),
     ...typographyStyles.body1,
   },
 });

packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitleStyles.ts

@@ -3,7 +3,6 @@ import type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { typographyStyles } from '@fluentui/react-theme';
-import { gridArea } from '../../utils/localShorthands';
 import { CLOSE_BUTTON_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';
 
 export const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {
@@ -17,7 +16,7 @@ export const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {
 const useStyles = makeStyles({
   root: {
     ...typographyStyles.subtitle1,
-    ...gridArea(TITLE_GRID_AREA),
+    ...shorthands.gridArea(TITLE_GRID_AREA),
   },
   rootWithoutCloseButton: {
     // ...shorthands.padding(DIALOG_CONTENT_PADDING, DIALOG_CONTENT_PADDING, '8px', DIALOG_CONTENT_PADDING),
@@ -30,7 +29,7 @@ const useStyles = makeStyles({
     lineHeight: '0',
     cursor: 'pointer',
     alignSelf: 'start',
-    ...gridArea(CLOSE_BUTTON_GRID_AREA),
+    ...shorthands.gridArea(CLOSE_BUTTON_GRID_AREA),
   },
   closeButtonFocusIndicator: createFocusOutlineStyle(),
   // TODO: this should be extracted to another package

packages/react-components/react-dialog/src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './isEscapeKeyDown';
-export * from './localShorthands';
 export * from './useDisableBodyScroll';
 export * from './useFocusFirstElement';