From 156d3dd6aae02fec19824e77fbfc10388468bb9d Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Tue, 15 Jul 2025 14:50:13 -0400 Subject: [PATCH 1/2] add toolbar to semantic style hooks --- .../etc/semantic-style-hooks-preview.api.md | 23 ++++++++++ .../library/package.json | 1 + .../src/component-styles/Toolbar/index.ts | 6 +++ .../useSemanticToolbarButtonStyles.styles.ts | 40 ++++++++++++++++ .../useSemanticToolbarDividerStyles.styles.ts | 37 +++++++++++++++ .../useSemanticToolbarGroupStyles.styles.ts | 20 ++++++++ ...SemanticToolbarRadioButtonStyles.styles.ts | 45 ++++++++++++++++++ .../useSemanticToolbarStyles.styles.ts | 46 +++++++++++++++++++ ...emanticToolbarToggleButtonStyles.styles.ts | 45 ++++++++++++++++++ .../component-styles/semanticStyleHooks.ts | 15 ++++++ .../library/src/index.ts | 8 ++++ 11 files changed, 286 insertions(+) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 8c75ebe09c6fd..e94e18c92768b 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -59,6 +59,11 @@ import { TabState } from '@fluentui/react-tabs'; import { TextareaState } from '@fluentui/react-textarea'; import { TextState } from '@fluentui/react-text'; import { ToggleButtonState } from '@fluentui/react-button'; +import { ToolbarDividerState } from '@fluentui/react-toolbar'; +import { ToolbarGroupState } from '@fluentui/react-toolbar'; +import { ToolbarRadioButtonState } from '@fluentui/react-toolbar'; +import { ToolbarState } from '@fluentui/react-toolbar'; +import { ToolbarToggleButtonState } from '@fluentui/react-toolbar'; import { TreeItemLayoutState } from '@fluentui/react-tree'; import { TreeItemState } from '@fluentui/react-tree'; import { TreeState } from '@fluentui/react-tree'; @@ -240,6 +245,24 @@ export const useSemanticTextStyles: (_state: unknown) => TextState; // @public (undocumented) export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState; +// @public +export const useSemanticToolbarButtonStyles: (_state: unknown) => void; + +// @public +export const useSemanticToolbarDividerStyles: (_state: unknown) => ToolbarDividerState; + +// @public +export const useSemanticToolbarGroupStyles: (_state: unknown) => ToolbarGroupState; + +// @public +export const useSemanticToolbarRadioButtonStyles: (_state: unknown) => ToolbarRadioButtonState; + +// @public +export const useSemanticToolbarStyles: (_state: unknown) => ToolbarState; + +// @public +export const useSemanticToolbarToggleButtonStyles: (_state: unknown) => ToolbarToggleButtonState; + // @public export const useSemanticTreeItemLayoutStyles: (_state: unknown) => TreeItemLayoutState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index b91121b2d238e..cf9f329f97693 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -60,6 +60,7 @@ "@fluentui/react-text": "^9.4.36", "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", + "@fluentui/react-toolbar": "^9.4.5", "@fluentui/react-tree": "^9.10.9", "@fluentui/react-utilities": "^9.19.0", "@fluentui/semantic-tokens": "0.0.0-alpha.1", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts new file mode 100644 index 0000000000000..6f7612a72d73e --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/index.ts @@ -0,0 +1,6 @@ +export { useSemanticToolbarStyles } from './useSemanticToolbarStyles.styles'; +export { useSemanticToolbarButtonStyles } from './useSemanticToolbarButtonStyles.styles'; +export { useSemanticToolbarDividerStyles } from './useSemanticToolbarDividerStyles.styles'; +export { useSemanticToolbarGroupStyles } from './useSemanticToolbarGroupStyles.styles'; +export { useSemanticToolbarRadioButtonStyles } from './useSemanticToolbarRadioButtonStyles.styles'; +export { useSemanticToolbarToggleButtonStyles } from './useSemanticToolbarToggleButtonStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts new file mode 100644 index 0000000000000..64682ff7b4deb --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts @@ -0,0 +1,40 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useButtonStyles_unstable } from '@fluentui/react-button'; +import { type ToolbarButtonState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useBaseStyles = makeStyles({ + vertical: { + flexDirection: 'column', + }, + verticalIcon: { + fontSize: semanticTokens.sizeCtrlLgIcon, + margin: '0', + }, +}); + +/** + * Apply styling to the ToolbarButton slots based on the state + */ +export const useSemanticToolbarButtonStyles = (_state: unknown) => { + 'use no memo'; + + const state = _state as ToolbarButtonState; + + useButtonStyles_unstable(state); + const buttonStyles = useBaseStyles(); + + state.root.className = mergeClasses( + state.root.className, + state.vertical && buttonStyles.vertical, + getSlotClassNameProp_unstable(state.root), + ); + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + state.vertical && buttonStyles.verticalIcon, + getSlotClassNameProp_unstable(state.icon), + ); + } +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts new file mode 100644 index 0000000000000..035d2f7925715 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts @@ -0,0 +1,37 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useDividerStyles_unstable } from '@fluentui/react-divider'; +import { type ToolbarDividerState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useBaseStyles = makeStyles({ + // Base styles + root: { + display: 'inline-flex', + maxWidth: semanticTokens.strokeWidthDefault, + padding: `${semanticTokens.paddingContentNone} ${semanticTokens.paddingCtrlHorizontalDefault}`, + }, + vertical: { + maxWidth: 'initial', + }, +}); + +/** + * Apply styling to the ToolbarDivider slots based on the state + */ +export const useSemanticToolbarDividerStyles = (_state: unknown): ToolbarDividerState => { + 'use no memo'; + + const state = _state as ToolbarDividerState; + + useDividerStyles_unstable(state); + const { vertical } = state; + const toolbarDividerStyles = useBaseStyles(); + state.root.className = mergeClasses( + state.root.className, + toolbarDividerStyles.root, + !vertical && toolbarDividerStyles.vertical, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts new file mode 100644 index 0000000000000..ec50f3b0b5f6d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarGroupStyles.styles.ts @@ -0,0 +1,20 @@ +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { mergeClasses } from '@griffel/react'; +import { toolbarGroupClassNames, type ToolbarGroupState } from '@fluentui/react-toolbar'; + +/** + * Apply styling to the Toolbar slots based on the state + */ +export const useSemanticToolbarGroupStyles = (_state: unknown): ToolbarGroupState => { + 'use no memo'; + + const state = _state as ToolbarGroupState; + + state.root.className = mergeClasses( + state.root.className, + toolbarGroupClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts new file mode 100644 index 0000000000000..5a907b39abfab --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts @@ -0,0 +1,45 @@ +import { tokens } from '@fluentui/react-theme'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; +import { type ToolbarRadioButtonState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeStyles({ + /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ + selected: { + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + + iconSelected: { + color: tokens.colorNeutralForeground2BrandSelected, + }, +}); + +/** + * Apply styling to the ToolbarRadioButton slots based on the state + */ +export const useSemanticToolbarRadioButtonStyles = (_state: unknown): ToolbarRadioButtonState => { + 'use no memo'; + + const state = _state as ToolbarRadioButtonState; + + useToggleButtonStyles_unstable(state); + const toggleButtonStyles = useBaseStyles(); + + state.root.className = mergeClasses( + state.root.className, + state.checked && toggleButtonStyles.selected, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + state.checked && toggleButtonStyles.iconSelected, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts new file mode 100644 index 0000000000000..0b2000ec404ae --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarStyles.styles.ts @@ -0,0 +1,46 @@ +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { toolbarClassNames, type ToolbarState } from '@fluentui/react-toolbar'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}`, + }, + vertical: { + flexDirection: 'column', + width: 'fit-content', + }, + small: { padding: '0px 4px' }, + medium: { padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}` }, + large: { padding: '4px 20px' }, +}); + +/** + * Apply styling to the Toolbar slots based on the state + */ +export const useSemanticToolbarStyles = (_state: unknown): ToolbarState => { + 'use no memo'; + + const state = _state as ToolbarState; + + const styles = useStyles(); + const { vertical, size } = state; + state.root.className = mergeClasses( + state.root.className, + toolbarClassNames.root, + styles.root, + vertical && styles.vertical, + size === 'small' && !vertical && styles.small, + size === 'medium' && !vertical && styles.medium, + size === 'large' && !vertical && styles.large, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts new file mode 100644 index 0000000000000..4edc52b0dd1d0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts @@ -0,0 +1,45 @@ +import { tokens } from '@fluentui/react-theme'; +import { makeStyles, mergeClasses } from '@griffel/react'; +import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; +import { type ToolbarToggleButtonState } from '@fluentui/react-toolbar'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useBaseStyles = makeStyles({ + /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ + selected: { + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + + iconSelected: { + color: tokens.colorNeutralForeground2BrandSelected, + }, +}); + +/** + * Apply styling to the ToolbarToggleButton slots based on the state + */ +export const useSemanticToolbarToggleButtonStyles = (_state: unknown): ToolbarToggleButtonState => { + 'use no memo'; + + const state = _state as ToolbarToggleButtonState; + + useToggleButtonStyles_unstable(state); + const toggleButtonStyles = useBaseStyles(); + + state.root.className = mergeClasses( + state.root.className, + state.checked && toggleButtonStyles.selected, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + state.checked && toggleButtonStyles.iconSelected, + getSlotClassNameProp_unstable(state.icon), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 7c428d18229f8..9aead4e2d0f70 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -71,6 +71,14 @@ import { } from './Breadcrumb'; import { useSemanticSpinButtonStyles } from './SpinButton'; import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles'; +import { + useSemanticToolbarStyles, + useSemanticToolbarButtonStyles, + useSemanticToolbarDividerStyles, + useSemanticToolbarGroupStyles, + useSemanticToolbarRadioButtonStyles, + useSemanticToolbarToggleButtonStyles, +} from './Toolbar'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -161,4 +169,11 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useSpinButtonStyles_unstable: useSemanticSpinButtonStyles, // Input styles useInputStyles_unstable: useSemanticInputStyles, + // Toolbar styles + useToolbarStyles_unstable: useSemanticToolbarStyles, + useToolbarButtonStyles_unstable: useSemanticToolbarButtonStyles, + useToolbarDividerStyles_unstable: useSemanticToolbarDividerStyles, + useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles, + useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles, + useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index 6a4fdb6fef99c..4540ee2597359 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -75,3 +75,11 @@ export { } from './component-styles/Breadcrumb'; export { useSemanticSpinButtonStyles } from './component-styles/SpinButton'; export { useSemanticInputStyles } from './component-styles/Input'; +export { + useSemanticToolbarStyles, + useSemanticToolbarButtonStyles, + useSemanticToolbarDividerStyles, + useSemanticToolbarGroupStyles, + useSemanticToolbarRadioButtonStyles, + useSemanticToolbarToggleButtonStyles, +} from './component-styles/Toolbar'; From 32196946b3b703085a6013a601b1570323b0a92b Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Thu, 17 Jul 2025 14:15:49 -0400 Subject: [PATCH 2/2] update to use local semantic style hooks --- .../Toolbar/useSemanticToolbarButtonStyles.styles.ts | 4 ++-- .../Toolbar/useSemanticToolbarDividerStyles.styles.ts | 4 ++-- .../Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts | 4 ++-- .../Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts index 64682ff7b4deb..38ab095f03ec3 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarButtonStyles.styles.ts @@ -1,5 +1,5 @@ import { makeStyles, mergeClasses } from '@griffel/react'; -import { useButtonStyles_unstable } from '@fluentui/react-button'; +import { useSemanticButtonStyles } from '../Button/useSemanticButtonStyles.styles'; import { type ToolbarButtonState } from '@fluentui/react-toolbar'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; import * as semanticTokens from '@fluentui/semantic-tokens'; @@ -22,7 +22,7 @@ export const useSemanticToolbarButtonStyles = (_state: unknown) => { const state = _state as ToolbarButtonState; - useButtonStyles_unstable(state); + useSemanticButtonStyles(state); const buttonStyles = useBaseStyles(); state.root.className = mergeClasses( diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts index 035d2f7925715..0185006f8fdb6 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarDividerStyles.styles.ts @@ -1,5 +1,5 @@ import { makeStyles, mergeClasses } from '@griffel/react'; -import { useDividerStyles_unstable } from '@fluentui/react-divider'; +import { useSemanticDividerStyles } from '../Divider/useSemanticDividerStyles.styles'; import { type ToolbarDividerState } from '@fluentui/react-toolbar'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; import * as semanticTokens from '@fluentui/semantic-tokens'; @@ -24,7 +24,7 @@ export const useSemanticToolbarDividerStyles = (_state: unknown): ToolbarDivider const state = _state as ToolbarDividerState; - useDividerStyles_unstable(state); + useSemanticDividerStyles(state); const { vertical } = state; const toolbarDividerStyles = useBaseStyles(); state.root.className = mergeClasses( diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts index 5a907b39abfab..20969316ea9fb 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarRadioButtonStyles.styles.ts @@ -1,6 +1,6 @@ import { tokens } from '@fluentui/react-theme'; import { makeStyles, mergeClasses } from '@griffel/react'; -import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; +import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles'; import { type ToolbarRadioButtonState } from '@fluentui/react-toolbar'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -24,7 +24,7 @@ export const useSemanticToolbarRadioButtonStyles = (_state: unknown): ToolbarRad const state = _state as ToolbarRadioButtonState; - useToggleButtonStyles_unstable(state); + useSemanticToggleButtonStyles(state); const toggleButtonStyles = useBaseStyles(); state.root.className = mergeClasses( diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts index 4edc52b0dd1d0..ee4d2dc2e5117 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toolbar/useSemanticToolbarToggleButtonStyles.styles.ts @@ -1,6 +1,6 @@ import { tokens } from '@fluentui/react-theme'; import { makeStyles, mergeClasses } from '@griffel/react'; -import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; +import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles'; import { type ToolbarToggleButtonState } from '@fluentui/react-toolbar'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; @@ -24,7 +24,7 @@ export const useSemanticToolbarToggleButtonStyles = (_state: unknown): ToolbarTo const state = _state as ToolbarToggleButtonState; - useToggleButtonStyles_unstable(state); + useSemanticToggleButtonStyles(state); const toggleButtonStyles = useBaseStyles(); state.root.className = mergeClasses(