bugfix(react-dialog): removes unnecessary grid gaps

change/@fluentui-react-dialog-bbe00f26-9da5-425b-be2b-d6add0d2ff1f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: removes unnecessary grid gaps",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,12 +1,7 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import {
-  DIALOG_GAP,
-  ACTIONS_END_GRID_AREA,
-  ACTIONS_START_GRID_AREA,
-  MEDIA_QUERY_BREAKPOINT_SELECTOR,
-} from '../../contexts/constants';
+import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
 
 export const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {
   root: 'fui-DialogActions',
@@ -17,6 +12,8 @@ const useStyles = makeStyles({
     height: 'fit-content',
     boxSizing: 'border-box',
     display: 'flex',
+    gridRowStart: 3,
+    gridRowEnd: 3,
     ...shorthands.gap(DIALOG_GAP),
     [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
       flexDirection: 'column',
@@ -25,17 +22,19 @@ const useStyles = makeStyles({
   },
   gridPositionEnd: {
     justifySelf: 'end',
-    ...shorthands.gridArea(ACTIONS_END_GRID_AREA),
+    gridColumnStart: 2,
+    gridColumnEnd: 4,
   },
   gridPositionStart: {
     justifySelf: 'start',
-    ...shorthands.gridArea(ACTIONS_START_GRID_AREA),
+    gridColumnStart: 1,
+    gridColumnEnd: 2,
   },
   fluidStart: {
-    gridColumnEnd: ACTIONS_END_GRID_AREA,
+    gridColumnEnd: 4,
   },
   fluidEnd: {
-    gridColumnStart: ACTIONS_START_GRID_AREA,
+    gridColumnStart: 1,
   },
 });
 

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

@@ -1,16 +1,7 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DialogBodySlots, DialogBodyState } from './DialogBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import {
-  ACTIONS_END_GRID_AREA,
-  ACTIONS_START_GRID_AREA,
-  CONTENT_GRID_AREA,
-  DIALOG_GAP,
-  MEDIA_QUERY_BREAKPOINT_SELECTOR,
-  SURFACE_PADDING,
-  TITLE_ACTION_GRID_AREA,
-  TITLE_GRID_AREA,
-} from '../../contexts';
+import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts';
 
 export const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {
   root: 'fui-DialogBody',
@@ -27,24 +18,12 @@ const useStyles = makeStyles({
     },
     maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,
     boxSizing: 'border-box',
-    gridTemplateRows: 'auto 1fr auto',
-    gridTemplateColumns: '1fr 1fr auto',
-    gridTemplateAreas: `
-    "${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}"
-    "${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}"
-    "${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}"
-    `,
     ...shorthands.overflow('unset'),
     ...shorthands.gap(DIALOG_GAP),
+    gridTemplateRows: 'auto 1fr',
     [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {
       maxWidth: '100vw',
-      gridTemplateRows: 'auto 1fr auto auto',
-      gridTemplateAreas: `
-        "${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}"
-        "${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}"
-        "${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}"
-        "${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}"
-      `,
+      gridTemplateRows: 'auto 1fr auto',
     },
   },
 });

packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts

@@ -1,7 +1,6 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DialogContentSlots, DialogContentState } from './DialogContent.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { CONTENT_GRID_AREA } from '../../contexts/constants';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 
 export const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {
@@ -16,9 +15,12 @@ const useStyles = makeStyles({
     overflowY: 'auto',
     minHeight: '32px',
     boxSizing: 'border-box',
+    gridRowStart: 2,
+    gridRowEnd: 2,
+    gridColumnStart: 1,
+    gridColumnEnd: 4,
     ...shorthands.padding(tokens.strokeWidthThick),
     ...shorthands.margin(`calc(${tokens.strokeWidthThick} * -1)`),
-    ...shorthands.gridArea(CONTENT_GRID_AREA),
     ...typographyStyles.body1,
   },
 });

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

@@ -2,7 +2,6 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DialogTitleSlots, DialogTitleState } from './DialogTitle.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { typographyStyles } from '@fluentui/react-theme';
-import { TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts/constants';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 
 export const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {
@@ -15,15 +14,20 @@ export const dialogTitleClassNames: SlotClassNames<DialogTitleSlots> = {
  */
 const useStyles = makeStyles({
   root: {
+    gridRowStart: 1,
+    gridRowEnd: 1,
+    gridColumnStart: 1,
+    gridColumnEnd: 3,
     ...typographyStyles.subtitle1,
-    ...shorthands.gridArea(TITLE_GRID_AREA),
     ...shorthands.margin(0),
   },
-  rootWithoutCloseButton: {
-    ...shorthands.gridArea(TITLE_GRID_AREA, TITLE_GRID_AREA, TITLE_ACTION_GRID_AREA, TITLE_ACTION_GRID_AREA),
-  },
+  rootWithoutAction: {},
   action: {
-    ...shorthands.gridArea(TITLE_ACTION_GRID_AREA),
+    gridRowStart: 1,
+    gridRowEnd: 1,
+    gridColumnStart: 3,
+    justifySelf: 'end',
+    alignSelf: 'start',
   },
 });
 
@@ -58,7 +62,7 @@ export const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTi
   state.root.className = mergeClasses(
     dialogTitleClassNames.root,
     styles.root,
-    !state.action && styles.rootWithoutCloseButton,
+    !state.action && styles.rootWithoutAction,
     state.root.className,
   );
   if (state.action) {

packages/react-components/react-dialog/src/contexts/constants.ts

@@ -2,9 +2,3 @@ export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 48
 export const SURFACE_PADDING = '24px';
 export const DIALOG_GAP = '8px';
 export const SURFACE_BORDER_WIDTH = '1px';
-
-export const ACTIONS_START_GRID_AREA = 'actions-start';
-export const ACTIONS_END_GRID_AREA = 'actions-end';
-export const TITLE_GRID_AREA = 'title';
-export const TITLE_ACTION_GRID_AREA = 'close-button';
-export const CONTENT_GRID_AREA = 'body';