From f8e519fe0bfc6e90c46c3dbe957e9578521c05ca Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 25 Sep 2023 17:51:38 +0300 Subject: [PATCH] fix(react-dialog): use makeResetStyles for base dialog components styles --- ...-236fd9b3-5e8c-4368-b43b-7e2aca221162.json | 7 ++ .../useDialogActionsStyles.styles.ts | 33 +++--- .../DialogBody/useDialogBodyStyles.styles.ts | 38 +++---- .../useDialogContentStyles.styles.ts | 28 +++-- .../useDialogSurfaceStyles.styles.ts | 104 ++++++++++-------- .../components/DialogTitle/useDialogTitle.tsx | 2 +- .../useDialogTitleStyles.styles.ts | 78 +++++++------ 7 files changed, 162 insertions(+), 128 deletions(-) create mode 100644 change/@fluentui-react-dialog-236fd9b3-5e8c-4368-b43b-7e2aca221162.json diff --git a/change/@fluentui-react-dialog-236fd9b3-5e8c-4368-b43b-7e2aca221162.json b/change/@fluentui-react-dialog-236fd9b3-5e8c-4368-b43b-7e2aca221162.json new file mode 100644 index 00000000000000..51c1775fce2648 --- /dev/null +++ b/change/@fluentui-react-dialog-236fd9b3-5e8c-4368-b43b-7e2aca221162.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: use makeResetStyles for base dialog components styles", + "packageName": "@fluentui/react-dialog", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts index 57b3fff4671910..d8b84089f6795f 100644 --- a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { DialogActionsSlots, DialogActionsState } from './DialogActions.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants'; @@ -7,19 +7,23 @@ export const dialogActionsClassNames: SlotClassNames = { root: 'fui-DialogActions', }; -const useStyles = makeStyles({ - root: { - height: 'fit-content', - boxSizing: 'border-box', - display: 'flex', - gridRowStart: 3, - gridRowEnd: 3, - ...shorthands.gap(DIALOG_GAP), - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { - flexDirection: 'column', - justifySelf: 'stretch', - }, +/** + * Styles for the root slot + */ +const useResetStyles = makeResetStyles({ + ...shorthands.gap(DIALOG_GAP), + height: 'fit-content', + boxSizing: 'border-box', + display: 'flex', + gridRowStart: 3, + gridRowEnd: 3, + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + flexDirection: 'column', + justifySelf: 'stretch', }, +}); + +const useStyles = makeStyles({ gridPositionEnd: { justifySelf: 'end', gridColumnStart: 2, @@ -52,10 +56,11 @@ const useStyles = makeStyles({ * Apply styling to the DialogActions slots based on the state */ export const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => { + const resetStyles = useResetStyles(); const styles = useStyles(); state.root.className = mergeClasses( dialogActionsClassNames.root, - styles.root, + resetStyles, state.position === 'start' && styles.gridPositionStart, state.position === 'end' && styles.gridPositionEnd, state.fluid && state.position === 'start' && styles.fluidStart, diff --git a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts index 0d9bbc9a3c82c6..31a3547d072b5a 100644 --- a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts @@ -1,7 +1,8 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; import type { DialogBodySlots, DialogBodyState } from './DialogBody.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING } from '../../contexts'; +import { backdropStyles } from '../DialogSurface/useDialogSurfaceStyles.styles'; export const dialogBodyClassNames: SlotClassNames = { root: 'fui-DialogBody', @@ -10,22 +11,20 @@ export const dialogBodyClassNames: SlotClassNames = { /** * Styles for the root slot */ -const useStyles = makeStyles({ - root: { - display: 'grid', - '&::backdrop': { - backgroundColor: 'rgba(0, 0, 0, 0.4)', - }, - maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`, - boxSizing: 'border-box', - ...shorthands.overflow('unset'), - ...shorthands.gap(DIALOG_GAP), - gridTemplateRows: 'auto 1fr', - gridTemplateColumns: '1fr 1fr auto', - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { - maxWidth: '100vw', - gridTemplateRows: 'auto 1fr auto', - }, +const useResetStyles = makeResetStyles({ + ...shorthands.overflow('unset'), + ...shorthands.gap(DIALOG_GAP), + display: 'grid', + maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`, + boxSizing: 'border-box', + gridTemplateRows: 'auto 1fr', + gridTemplateColumns: '1fr 1fr auto', + + '&::backdrop': backdropStyles, + + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + maxWidth: '100vw', + gridTemplateRows: 'auto 1fr auto', }, }); @@ -33,8 +32,9 @@ const useStyles = makeStyles({ * Apply styling to the DialogBody slots based on the state */ export const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => { - const styles = useStyles(); - state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className); + const resetStyles = useResetStyles(); + + state.root.className = mergeClasses(dialogBodyClassNames.root, resetStyles, state.root.className); return state; }; diff --git a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts index eefc4d5ba0552b..472f598be1ec65 100644 --- a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, mergeClasses, shorthands } from '@griffel/react'; import type { DialogContentSlots, DialogContentState } from './DialogContent.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens, typographyStyles } from '@fluentui/react-theme'; @@ -10,19 +10,17 @@ export const dialogContentClassNames: SlotClassNames = { /** * Styles for the root slot */ -const useStyles = makeStyles({ - root: { - 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)`), - ...typographyStyles.body1, - }, +const useStyles = makeResetStyles({ + ...shorthands.padding(tokens.strokeWidthThick), + ...shorthands.margin(`calc(${tokens.strokeWidthThick} * -1)`), + ...typographyStyles.body1, + overflowY: 'auto', + minHeight: '32px', + boxSizing: 'border-box', + gridRowStart: 2, + gridRowEnd: 2, + gridColumnStart: 1, + gridColumnEnd: 4, }); /** @@ -30,6 +28,6 @@ const useStyles = makeStyles({ */ export const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => { const styles = useStyles(); - state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className); + state.root.className = mergeClasses(dialogContentClassNames.root, styles, state.root.className); return state; }; diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts index 3ae582ff31e78d..699e7badbedc4a 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; @@ -15,75 +15,91 @@ export const dialogSurfaceClassNames: SlotClassNames = { backdrop: 'fui-DialogSurface__backdrop', }; +/** + * Generic reusable backdrop styles + */ +export const backdropStyles: GriffelStyle = { + backgroundColor: 'rgba(0, 0, 0, 0.4)', +}; + +const nestedDialogBackdropStyles: GriffelStyle = { + backgroundColor: 'transparent', +}; + /** * Styles for the root slot */ -const useStyles = makeStyles({ - focusOutline: createFocusOutlineStyle(), - root: { - contain: 'content', - display: 'block', - userSelect: 'unset', - visibility: 'unset', - ...shorthands.inset(0), - ...shorthands.padding(0), - ...shorthands.padding(SURFACE_PADDING), - ...shorthands.margin('auto'), - ...shorthands.borderStyle('none'), - ...shorthands.overflow('unset'), - '&::backdrop': { - backgroundColor: 'rgba(0, 0, 0, 0.4)', - }, - position: 'fixed', - height: 'fit-content', - maxWidth: '600px', - maxHeight: '100vh', - boxSizing: 'border-box', - boxShadow: tokens.shadow64, - backgroundColor: tokens.colorNeutralBackground1, - color: tokens.colorNeutralForeground1, - ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke), - ...shorthands.borderRadius(tokens.borderRadiusXLarge), - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { - maxWidth: '100vw', - }, - }, - backdrop: { - position: 'fixed', - backgroundColor: 'rgba(0, 0, 0, 0.4)', - ...shorthands.inset('0px'), - }, - nestedDialogBackdrop: { - backgroundColor: 'transparent', +const useRootResetStyles = makeResetStyles({ + ...createFocusOutlineStyle(), + ...shorthands.inset(0), + ...shorthands.padding(0), + ...shorthands.padding(SURFACE_PADDING), + ...shorthands.margin('auto'), + ...shorthands.borderStyle('none'), + ...shorthands.overflow('unset'), + ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke), + ...shorthands.borderRadius(tokens.borderRadiusXLarge), + + contain: 'content', + display: 'block', + userSelect: 'unset', + visibility: 'unset', + position: 'fixed', + height: 'fit-content', + maxWidth: '600px', + maxHeight: '100vh', + boxSizing: 'border-box', + boxShadow: tokens.shadow64, + backgroundColor: tokens.colorNeutralBackground1, + color: tokens.colorNeutralForeground1, + + '&::backdrop': backdropStyles, + + [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + maxWidth: '100vw', }, +}); + +const useStyles = makeStyles({ + nestedDialogBackdrop: nestedDialogBackdropStyles, nestedNativeDialogBackdrop: { - '&::backdrop': { - backgroundColor: 'transparent', - }, + '&::backdrop': nestedDialogBackdropStyles, }, }); +/** + * Styles for the backdrop slot + */ +const useBackdropResetStyles = makeResetStyles({ + ...shorthands.inset('0px'), + ...backdropStyles, + position: 'fixed', +}); + /** * Apply styling to the DialogSurface slots based on the state */ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => { + const surfaceResetStyles = useRootResetStyles(); const styles = useStyles(); + const backdropResetStyles = useBackdropResetStyles(); const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog); state.root.className = mergeClasses( dialogSurfaceClassNames.root, - styles.root, - styles.focusOutline, + surfaceResetStyles, isNestedDialog && styles.nestedNativeDialogBackdrop, state.root.className, ); + if (state.backdrop) { state.backdrop.className = mergeClasses( dialogSurfaceClassNames.backdrop, - styles.backdrop, + backdropResetStyles, isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className, ); } + return state; }; diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx index 00142a713a75f9..1556733a2c6f38 100644 --- a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx +++ b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx @@ -40,7 +40,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<