diff --git a/change/@fluentui-react-dialog-67e3508e-a0a1-4259-9b49-c3a878d19d58.json b/change/@fluentui-react-dialog-67e3508e-a0a1-4259-9b49-c3a878d19d58.json new file mode 100644 index 0000000000000..e5fbe10c3b084 --- /dev/null +++ b/change/@fluentui-react-dialog-67e3508e-a0a1-4259-9b49-c3a878d19d58.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "bugfix: removes context hooks invocations from styles hook", + "packageName": "@fluentui/react-dialog", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-dialog/etc/react-dialog.api.md b/packages/react-components/react-dialog/etc/react-dialog.api.md index c12aa430a27f7..88819674ebe45 100644 --- a/packages/react-components/react-dialog/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/etc/react-dialog.api.md @@ -161,7 +161,7 @@ export type DialogSurfaceSlots = { }; // @public -export type DialogSurfaceState = ComponentState & Pick; +export type DialogSurfaceState = ComponentState & Partial> & Pick; // @public export const DialogTitle: ForwardRefComponent; 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 31a3547d072b5..857e402c3421f 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 @@ -2,7 +2,6 @@ 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', @@ -20,8 +19,6 @@ const useResetStyles = makeResetStyles({ gridTemplateRows: 'auto 1fr', gridTemplateColumns: '1fr 1fr auto', - '&::backdrop': backdropStyles, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { maxWidth: '100vw', gridTemplateRows: 'auto 1fr auto', diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts index 81026a777eeb2..2ae1eb10c1409 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts @@ -1,6 +1,6 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import type { PortalProps } from '@fluentui/react-portal'; -import { DialogSurfaceContextValue } from '../../contexts'; +import { DialogContextValue, DialogSurfaceContextValue } from '../../contexts'; export type DialogSurfaceSlots = { /** @@ -31,4 +31,7 @@ export type DialogSurfaceContextValues = { /** * State used in rendering DialogSurface */ -export type DialogSurfaceState = ComponentState & Pick; +export type DialogSurfaceState = ComponentState & + // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally. + Partial> & + Pick; diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts index 15c134f07b0c2..38e002ed99d03 100644 --- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts +++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts @@ -24,6 +24,7 @@ export const useDialogSurface_unstable = ( ref: React.Ref, ): DialogSurfaceState => { const modalType = useDialogContext_unstable(ctx => ctx.modalType); + const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog); const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes); const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef); const open = useDialogContext_unstable(ctx => ctx.open); @@ -71,6 +72,7 @@ export const useDialogSurface_unstable = ( return { components: { backdrop: 'div', root: 'div' }, backdrop, + isNestedDialog, mountNode: props.mountNode, root: slot.always( getIntrinsicElementProps('div', { 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 699e7badbedc4..7fa3fa225927c 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,13 +1,8 @@ -import { GriffelStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { 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'; -import { - MEDIA_QUERY_BREAKPOINT_SELECTOR, - SURFACE_BORDER_WIDTH, - SURFACE_PADDING, - useDialogContext_unstable, -} from '../../contexts'; +import { MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts'; import type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types'; export const dialogSurfaceClassNames: SlotClassNames = { @@ -15,17 +10,6 @@ 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 */ @@ -53,17 +37,14 @@ const useRootResetStyles = makeResetStyles({ backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground1, - '&::backdrop': backdropStyles, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { maxWidth: '100vw', }, }); -const useStyles = makeStyles({ - nestedDialogBackdrop: nestedDialogBackdropStyles, - nestedNativeDialogBackdrop: { - '&::backdrop': nestedDialogBackdropStyles, +const useBackdropStyles = makeStyles({ + nestedDialogBackdrop: { + backgroundColor: 'transparent', }, }); @@ -72,7 +53,7 @@ const useStyles = makeStyles({ */ const useBackdropResetStyles = makeResetStyles({ ...shorthands.inset('0px'), - ...backdropStyles, + backgroundColor: 'rgba(0, 0, 0, 0.4)', position: 'fixed', }); @@ -81,22 +62,16 @@ const useBackdropResetStyles = makeResetStyles({ */ export const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => { const surfaceResetStyles = useRootResetStyles(); - const styles = useStyles(); + const styles = useBackdropStyles(); const backdropResetStyles = useBackdropResetStyles(); - const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog); - state.root.className = mergeClasses( - dialogSurfaceClassNames.root, - surfaceResetStyles, - isNestedDialog && styles.nestedNativeDialogBackdrop, - state.root.className, - ); + state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className); if (state.backdrop) { state.backdrop.className = mergeClasses( dialogSurfaceClassNames.backdrop, backdropResetStyles, - isNestedDialog && styles.nestedDialogBackdrop, + state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className, ); }