diff --git a/change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json b/change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json new file mode 100644 index 00000000000000..11b210dba2188d --- /dev/null +++ b/change/@fluentui-react-dialog-a27a006c-4b45-4030-8a49-2d8e6af3353c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Export dialog style constants", + "packageName": "@fluentui/react-dialog", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-drawer-90ba3f80-3485-42f6-94cd-6f7abcc77117.json b/change/@fluentui-react-drawer-90ba3f80-3485-42f6-94cd-6f7abcc77117.json new file mode 100644 index 00000000000000..e02e6e30c2fb90 --- /dev/null +++ b/change/@fluentui-react-drawer-90ba3f80-3485-42f6-94cd-6f7abcc77117.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Enable custom style hooks on OverlayDrawerSurface", + "packageName": "@fluentui/react-drawer", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-shared-contexts-01e5189d-a9e1-4498-96f1-da2ece9bf1a8.json b/change/@fluentui-react-shared-contexts-01e5189d-a9e1-4498-96f1-da2ece9bf1a8.json new file mode 100644 index 00000000000000..47491a89ed62ca --- /dev/null +++ b/change/@fluentui-react-shared-contexts-01e5189d-a9e1-4498-96f1-da2ece9bf1a8.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Add DrawerSurfaceStyle custom style hook", + "packageName": "@fluentui/react-shared-contexts", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json b/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json new file mode 100644 index 00000000000000..308dda6b633b41 --- /dev/null +++ b/change/@fluentui-react-tabs-65ced89f-3e02-4450-aa4a-729e5381851d.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Export tabReservedSpaceClassNames and useTabAnimatedIndicatorStyles_unstable for style overrides", + "packageName": "@fluentui/react-tabs", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json b/change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json new file mode 100644 index 00000000000000..97141582535c0a --- /dev/null +++ b/change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Export ToastContainer state and classNames nessecary for style overrides", + "packageName": "@fluentui/react-toast", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tree-d996b541-0709-4b79-a872-717af378c09c.json b/change/@fluentui-react-tree-d996b541-0709-4b79-a872-717af378c09c.json new file mode 100644 index 00000000000000..777058a3867dc7 --- /dev/null +++ b/change/@fluentui-react-tree-d996b541-0709-4b79-a872-717af378c09c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Export TreeItemCSSProperties for external usage", + "packageName": "@fluentui/react-tree", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-dialog/library/etc/react-dialog.api.md b/packages/react-components/react-dialog/library/etc/react-dialog.api.md index 5c2d1b1d12ea71..0e9c0514812d86 100644 --- a/packages/react-components/react-dialog/library/etc/react-dialog.api.md +++ b/packages/react-components/react-dialog/library/etc/react-dialog.api.md @@ -24,6 +24,15 @@ import { useModalAttributes } from '@fluentui/react-tabster'; // @public export const Dialog: React_2.FC; +// @public (undocumented) +export const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = "4px"; + +// @public (undocumented) +export const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = "@media screen and (max-width: 480px)"; + +// @public (undocumented) +export const DIALOG_MEDIA_QUERY_SHORT_SCREEN = "@media screen and (max-height: 359px)"; + // @public export const DialogActions: ForwardRefComponent; diff --git a/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActionsStyles.styles.ts b/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActionsStyles.styles.ts index 910e7c6213b8c1..3645dc474e998b 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActionsStyles.styles.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogActions/useDialogActionsStyles.styles.ts @@ -1,7 +1,7 @@ import { makeResetStyles, makeStyles, mergeClasses } 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'; +import { DIALOG_GAP, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants'; export const dialogActionsClassNames: SlotClassNames = { root: 'fui-DialogActions', @@ -17,7 +17,7 @@ const useResetStyles = makeResetStyles({ display: 'flex', gridRowStart: 3, gridRowEnd: 3, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { flexDirection: 'column', justifySelf: 'stretch', }, @@ -28,7 +28,7 @@ const useStyles = makeStyles({ justifySelf: 'end', gridColumnStart: 2, gridColumnEnd: 4, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { gridColumnStart: 1, gridRowStart: 4, gridRowEnd: 'auto', @@ -38,7 +38,7 @@ const useStyles = makeStyles({ justifySelf: 'start', gridColumnStart: 1, gridColumnEnd: 2, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { gridColumnEnd: 4, gridRowStart: 3, gridRowEnd: 'auto', diff --git a/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts b/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts index aadf72d0149311..6eb28b8a72df79 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogBody/useDialogBodyStyles.styles.ts @@ -1,7 +1,12 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; import type { DialogBodySlots, DialogBodyState } from './DialogBody.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_PADDING } from '../../contexts'; +import { + DIALOG_GAP, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, + SURFACE_PADDING, +} from '../../contexts'; export const dialogBodyClassNames: SlotClassNames = { root: 'fui-DialogBody', @@ -19,12 +24,12 @@ const useResetStyles = makeResetStyles({ gridTemplateRows: 'auto 1fr', gridTemplateColumns: '1fr 1fr auto', - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { maxWidth: '100vw', gridTemplateRows: 'auto 1fr auto', }, - [MEDIA_QUERY_SHORT_SCREEN]: { + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { maxHeight: 'unset', }, }); diff --git a/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContentStyles.styles.ts b/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContentStyles.styles.ts index 6a73be2fd51ae5..a25ece0b21bdfb 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContentStyles.styles.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogContent/useDialogContentStyles.styles.ts @@ -2,7 +2,7 @@ import { makeResetStyles, mergeClasses } from '@griffel/react'; import type { DialogContentSlots, DialogContentState } from './DialogContent.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens, typographyStyles } from '@fluentui/react-theme'; -import { MEDIA_QUERY_SHORT_SCREEN } from '../../contexts'; +import { DIALOG_MEDIA_QUERY_SHORT_SCREEN } from '../../contexts'; export const dialogContentClassNames: SlotClassNames = { root: 'fui-DialogContent', @@ -23,7 +23,7 @@ const useStyles = makeResetStyles({ gridColumnStart: 1, gridColumnEnd: 4, - [MEDIA_QUERY_SHORT_SCREEN]: { + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { overflowY: 'unset', }, }); diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts index 6a086337fce463..97c8bc9674f0a0 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts +++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurfaceStyles.styles.ts @@ -3,9 +3,9 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; import { tokens } from '@fluentui/react-theme'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { - FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - MEDIA_QUERY_BREAKPOINT_SELECTOR, - MEDIA_QUERY_SHORT_SCREEN, + DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING, } from '../../contexts'; @@ -43,18 +43,18 @@ const useRootBaseStyle = makeResetStyles({ // to ensure dialog will be properly styled when surfaceMotion is opted-out boxShadow: tokens.shadow64, - [MEDIA_QUERY_BREAKPOINT_SELECTOR]: { + [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: { maxWidth: '100vw', }, - [MEDIA_QUERY_SHORT_SCREEN]: { + [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: { overflowY: 'auto', // We need to offset the scrollbar by adding transparent borders otherwise // it conflicts with the border radius. - paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`, - borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`, + borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, }, }); diff --git a/packages/react-components/react-dialog/library/src/contexts/constants.ts b/packages/react-components/react-dialog/library/src/contexts/constants.ts index e6f3df95281a93..4e278cd08feca0 100644 --- a/packages/react-components/react-dialog/library/src/contexts/constants.ts +++ b/packages/react-components/react-dialog/library/src/contexts/constants.ts @@ -1,6 +1,6 @@ -export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)'; -export const MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)'; +export const DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)'; +export const DIALOG_MEDIA_QUERY_SHORT_SCREEN = '@media screen and (max-height: 359px)'; export const SURFACE_PADDING = '24px'; export const DIALOG_GAP = '8px'; export const SURFACE_BORDER_WIDTH = '1px'; -export const FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px'; +export const DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET = '4px'; diff --git a/packages/react-components/react-dialog/library/src/contexts/index.ts b/packages/react-components/react-dialog/library/src/contexts/index.ts index 5e1f5792aff907..4fe17b52c0c6d6 100644 --- a/packages/react-components/react-dialog/library/src/contexts/index.ts +++ b/packages/react-components/react-dialog/library/src/contexts/index.ts @@ -1,8 +1,8 @@ export { DIALOG_GAP, - FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, - MEDIA_QUERY_BREAKPOINT_SELECTOR, - MEDIA_QUERY_SHORT_SCREEN, + DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING, } from './constants'; diff --git a/packages/react-components/react-dialog/library/src/index.ts b/packages/react-components/react-dialog/library/src/index.ts index f04af3f3095ce4..b3f35c11aea049 100644 --- a/packages/react-components/react-dialog/library/src/index.ts +++ b/packages/react-components/react-dialog/library/src/index.ts @@ -83,3 +83,9 @@ export { } from './contexts/index'; export type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index'; + +export { + DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, + DIALOG_MEDIA_QUERY_SHORT_SCREEN, + DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, +} from './contexts/constants'; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx index 4a95f04c8c7cca..104cb617fafe97 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx @@ -8,6 +8,7 @@ import { import { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles'; import type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * @internal @@ -30,6 +31,7 @@ export const OverlayDrawerSurface: ForwardRefComponent; }; +// @public (undocumented) +export const tabReservedSpaceClassNames: { + content: string; +}; + // @public (undocumented) export type TabSlots = { root: Slot<'button'>; @@ -123,6 +128,9 @@ export type TabValue = unknown; // @public export const useTab_unstable: (props: TabProps, ref: React_2.Ref) => TabState; +// @public +export const useTabAnimatedIndicatorStyles_unstable: (state: TabState) => TabState; + // @public export const useTabButtonStyles_unstable: (state: TabState, slot: TabState["root"]) => TabState; diff --git a/packages/react-components/react-tabs/library/src/Tab.ts b/packages/react-components/react-tabs/library/src/Tab.ts index 44d09efe6def6a..214b683707b7a2 100644 --- a/packages/react-components/react-tabs/library/src/Tab.ts +++ b/packages/react-components/react-tabs/library/src/Tab.ts @@ -3,6 +3,7 @@ export { Tab, renderTab_unstable, tabClassNames, + tabReservedSpaceClassNames, useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, diff --git a/packages/react-components/react-tabs/library/src/components/Tab/index.ts b/packages/react-components/react-tabs/library/src/components/Tab/index.ts index fc2c0c149c7989..19ae875dd40d9d 100644 --- a/packages/react-components/react-tabs/library/src/components/Tab/index.ts +++ b/packages/react-components/react-tabs/library/src/components/Tab/index.ts @@ -4,6 +4,7 @@ export { renderTab_unstable } from './renderTab'; export { useTab_unstable } from './useTab'; export { tabClassNames, + tabReservedSpaceClassNames, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts index ca997d6f1ca27f..6fb313b8e4c706 100644 --- a/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts +++ b/packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts @@ -11,7 +11,7 @@ export const tabClassNames: SlotClassNames = { content: 'fui-Tab__content', }; -const reservedSpaceClassNames = { +export const tabReservedSpaceClassNames = { content: 'fui-Tab__content--reserved-space', }; @@ -755,7 +755,7 @@ export const useTabContentStyles_unstable = (state: TabState): TabState => { // This needs to be before state.content.className is updated if (state.contentReservedSpace) { state.contentReservedSpace.className = mergeClasses( - reservedSpaceClassNames.content, + tabReservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, diff --git a/packages/react-components/react-tabs/library/src/index.ts b/packages/react-components/react-tabs/library/src/index.ts index 9b8ec0b91189b3..abf470bf8dcc95 100644 --- a/packages/react-components/react-tabs/library/src/index.ts +++ b/packages/react-components/react-tabs/library/src/index.ts @@ -3,6 +3,8 @@ export { renderTab_unstable, Tab, tabClassNames, + tabReservedSpaceClassNames, + useTabAnimatedIndicatorStyles_unstable, useTabButtonStyles_unstable, useTabContentStyles_unstable, useTabIndicatorStyles_unstable, diff --git a/packages/react-components/react-toast/library/etc/react-toast.api.md b/packages/react-components/react-toast/library/etc/react-toast.api.md index 672cfa1e4347b1..e95036b15a656a 100644 --- a/packages/react-components/react-toast/library/etc/react-toast.api.md +++ b/packages/react-components/react-toast/library/etc/react-toast.api.md @@ -62,6 +62,21 @@ export type ToastBodyState = ComponentState & { // @public (undocumented) export const toastClassNames: SlotClassNames; +// @public (undocumented) +export const toastContainerClassNames: SlotClassNames; + +// @public +export type ToastContainerState = ComponentState & Pick & Pick & { + transitionTimeout: number; + timerTimeout: number; + running: boolean; + onTransitionEntering: () => void; + nodeRef: React_2.Ref; + onMotionFinish?: (event: null, data: { + direction: 'enter' | 'exit'; + }) => void; +}; + // @public export const Toaster: React_2.FC; diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts index eb6b0f46485b43..f05e84d8be0f2c 100644 --- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts +++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.types.ts @@ -42,7 +42,7 @@ export type ToastContainerState = ComponentState & */ onTransitionEntering: () => void; /** - * @deprecated + * @deprecated now merged with root ref */ nodeRef: React.Ref; diff --git a/packages/react-components/react-toast/library/src/index.ts b/packages/react-components/react-toast/library/src/index.ts index 7015d8e818dbb6..3e57242a6cefe6 100644 --- a/packages/react-components/react-toast/library/src/index.ts +++ b/packages/react-components/react-toast/library/src/index.ts @@ -40,3 +40,6 @@ export { toastFooterClassNames, } from './ToastFooter'; export type { ToastFooterProps, ToastFooterState, ToastFooterSlots } from './ToastFooter'; + +export { toastContainerClassNames } from './ToastContainer'; +export type { ToastContainerState } from './ToastContainer'; diff --git a/packages/react-components/react-tree/library/etc/react-tree.api.md b/packages/react-components/react-tree/library/etc/react-tree.api.md index 36af5ce6f7c66d..97567acb1f7ac6 100644 --- a/packages/react-components/react-tree/library/etc/react-tree.api.md +++ b/packages/react-components/react-tree/library/etc/react-tree.api.md @@ -190,6 +190,11 @@ export type TreeItemContextValue = { checked: TreeSelectionValue; }; +// @public (undocumented) +export type TreeItemCSSProperties = React_2.CSSProperties & { + [treeItemLevelToken]?: string | number; +}; + // @public export const TreeItemLayout: ForwardRefComponent; diff --git a/packages/react-components/react-tree/library/src/index.ts b/packages/react-components/react-tree/library/src/index.ts index eba48f9ef7c7bb..5bd2a9cc57d600 100644 --- a/packages/react-components/react-tree/library/src/index.ts +++ b/packages/react-components/react-tree/library/src/index.ts @@ -69,6 +69,7 @@ export type { TreeItemValue, TreeItemOpenChangeData, TreeItemOpenChangeEvent, + TreeItemCSSProperties, } from './TreeItem'; export { FlatTreeItem } from './FlatTreeItem';