From bb81343843e0120c33266655d6caf0591336d5de Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Tue, 15 Jul 2025 12:17:24 -0400 Subject: [PATCH 1/2] add breadcrumb to semantic style hooks --- .../etc/semantic-style-hooks-preview.api.md | 16 ++ .../library/package.json | 1 + .../src/component-styles/Breadcrumb/index.ts | 4 + ...seSemanticBreadcrumbButtonStyles.styles.ts | 155 ++++++++++++++++++ ...eSemanticBreadcrumbDividerStyles.styles.ts | 46 ++++++ .../useSemanticBreadcrumbItemStyles.styles.ts | 32 ++++ .../useSemanticBreadcrumbStyles.styles.ts | 36 ++++ .../component-styles/semanticStyleHooks.ts | 11 ++ .../library/src/index.ts | 6 + .../etc/semantic-tokens.api.md | 9 + .../src/fluentLegacyVariants.ts | 12 ++ packages/semantic-tokens/src/index.ts | 3 + .../src/legacyVariant/tokens.ts | 25 ++- 13 files changed, 355 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.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 9b7fbd66d132d..93b1584b5f320 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 @@ -7,6 +7,10 @@ import { AccordionHeaderState } from '@fluentui/react-accordion'; import { AvatarState } from '@fluentui/react-avatar'; import { BadgeState } from '@fluentui/react-badge'; +import { BreadcrumbButtonState } from '@fluentui/react-breadcrumb'; +import { BreadcrumbDividerState } from '@fluentui/react-breadcrumb'; +import { BreadcrumbItemState } from '@fluentui/react-breadcrumb'; +import { BreadcrumbState } from '@fluentui/react-breadcrumb'; import { ButtonState } from '@fluentui/react-button'; import { CheckboxState } from '@fluentui/react-checkbox'; import { CompoundButtonState } from '@fluentui/react-button'; @@ -68,6 +72,18 @@ export const useSemanticAvatarStyles: (_state: unknown) => AvatarState; // @public export const useSemanticBadgeStyles: (_state: unknown) => BadgeState; +// @public +export const useSemanticBreadcrumbButtonStyles: (_state: unknown) => BreadcrumbButtonState; + +// @public +export const useSemanticBreadcrumbDividerStyles: (_state: unknown) => BreadcrumbDividerState; + +// @public +export const useSemanticBreadcrumbItemStyles: (_state: unknown) => BreadcrumbItemState; + +// @public +export const useSemanticBreadcrumbStyles: (_state: unknown) => BreadcrumbState; + // @public (undocumented) export const useSemanticButtonStyles: (_state: unknown) => ButtonState; 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 5ccec0400537a..5f7cd17b29ca7 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -27,6 +27,7 @@ "@fluentui/react-accordion": "^9.6.8", "@fluentui/react-avatar": "^9.7.6", "@fluentui/react-badge": "^9.2.54", + "@fluentui/react-breadcrumb": "^9.1.6", "@fluentui/react-button": "^9.4.6", "@fluentui/react-checkbox": "^9.3.6", "@fluentui/react-dialog": "^9.12.8", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts new file mode 100644 index 0000000000000..83d868c0f4a3d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/index.ts @@ -0,0 +1,4 @@ +export { useSemanticBreadcrumbStyles } from './useSemanticBreadcrumbStyles.styles'; +export { useSemanticBreadcrumbButtonStyles } from './useSemanticBreadcrumbButtonStyles.styles'; +export { useSemanticBreadcrumbDividerStyles } from './useSemanticBreadcrumbDividerStyles.styles'; +export { useSemanticBreadcrumbItemStyles } from './useSemanticBreadcrumbItemStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts new file mode 100644 index 0000000000000..a13d5c1e01679 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts @@ -0,0 +1,155 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbButtonClassNames, type BreadcrumbButtonState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button'; +import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * CSS variable names used internally for styling in the Breadcrumb. + */ +const breadcrumbCSSVars = { + breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size', + breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height', +}; + +const useIconStyles = makeStyles({ + base: { + fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`, + width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`, + marginRight: semanticTokens.gapInsideCtrlSmDefault, + }, + small: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px', + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: semanticTokens.textGlobalCaption1LineHeight, + }, + medium: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: semanticTokens._ctrlBreadcrumbSizeSmIcon, + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: semanticTokens.textGlobalBody2LineHeight, + }, + large: { + [breadcrumbCSSVars.breadcrumbIconSizeVar]: semanticTokens.sizeCtrlIcon, + [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: semanticTokens.textGlobalSubtitle2LineHeight, + }, +}); + +const defaultButtonStyles = { + backgroundColor: semanticTokens.nullColor, + color: semanticTokens.foregroundCtrlOnTransparentRest, + cursor: 'auto', +}; + +const currentIconStyles = { + ...defaultButtonStyles, + [`& .${buttonClassNames.icon}`]: { + color: 'unset', + }, + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, +}; + +const useStyles = makeStyles({ + root: { + minWidth: 'unset', + textWrap: 'nowrap', + }, + small: { + height: '24px', + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + padding: semanticTokens.gapInsideCtrlToLabel, + }, + medium: { + height: semanticTokens._ctrlBreadcrumbSizeDefault, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + padding: semanticTokens.gapInsideCtrlToLabel, + }, + large: { + height: semanticTokens._ctrlBreadcrumbSizeLgDefault, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalBody2FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalBody2LineHeight, + padding: semanticTokens.gapInsideCtrlLgToLabel, + }, + current: { + ':hover': { + ...currentIconStyles, + }, + ':hover:active': { + ...currentIconStyles, + }, + ':disabled': { + ...currentIconStyles, + }, + }, + currentSmall: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, + currentMedium: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textRampItemBodyLineHeight, + }, + currentLarge: { + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampLgItemBodyFontSize, + fontWeight: semanticTokens.textCtrlButtonWeightDefault, + lineHeight: semanticTokens.textRampLgItemBodyLineHeight, + }, +}); + +/** + * Apply styling to the BreadcrumbButton slots based on the state + */ +export const useSemanticBreadcrumbButtonStyles = (_state: unknown): BreadcrumbButtonState => { + 'use no memo'; + + const state = _state as BreadcrumbButtonState; + + const styles = useStyles(); + const iconStyles = useIconStyles(); + + const currentSizeMap = { + small: styles.currentSmall, + medium: styles.currentMedium, + large: styles.currentLarge, + }; + state.root.className = mergeClasses( + state.root.className, + breadcrumbButtonClassNames.root, + styles[state.size], + styles.root, + state.current && currentSizeMap[state.size], + state.current && styles.current, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.icon) { + state.icon.className = mergeClasses( + state.icon.className, + iconStyles.base, + iconStyles[state.size], + getSlotClassNameProp_unstable(state.icon), + ); + } + + useButtonStyles_unstable(state); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts new file mode 100644 index 0000000000000..5b1eadeb9204f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbDividerStyles.styles.ts @@ -0,0 +1,46 @@ +import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbDividerClassNames, type BreadcrumbDividerState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeResetStyles({ + display: 'flex', +}); + +const useIconStyles = makeStyles({ + small: { + fontSize: '12px', + }, + medium: { + fontSize: semanticTokens._ctrlBreadcrumbSizeSmIcon, + }, + large: { + fontSize: semanticTokens.sizeCtrlIcon, + }, +}); + +/** + * Apply styling to the BreadcrumbDivider slots based on the state + */ +export const useSemanticBreadcrumbDividerStyles = (_state: unknown): BreadcrumbDividerState => { + 'use no memo'; + + const state = _state as BreadcrumbDividerState; + + const styles = useStyles(); + const iconStyles = useIconStyles(); + const { size = 'medium' } = state; + + state.root.className = mergeClasses( + state.root.className, + breadcrumbDividerClassNames.root, + styles, + iconStyles[size], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts new file mode 100644 index 0000000000000..1972465bc8201 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbItemStyles.styles.ts @@ -0,0 +1,32 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbItemClassNames, type BreadcrumbItemState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useBreadcrumbItemResetStyles = makeResetStyles({ + display: 'flex', + alignItems: 'center', + color: semanticTokens.foregroundContentNeutralSecondary, + boxSizing: 'border-box', + textWrap: 'nowrap', +}); + +/** + * Apply styling to the BreadcrumbItem slots based on the state + */ +export const useSemanticBreadcrumbItemStyles = (_state: unknown): BreadcrumbItemState => { + 'use no memo'; + + const state = _state as BreadcrumbItemState; + + const resetStyles = useBreadcrumbItemResetStyles(); + + state.root.className = mergeClasses( + state.root.className, + breadcrumbItemClassNames.root, + resetStyles, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts new file mode 100644 index 0000000000000..729929dd619bf --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbStyles.styles.ts @@ -0,0 +1,36 @@ +import { makeResetStyles, mergeClasses } from '@griffel/react'; +import { breadcrumbClassNames, type BreadcrumbState } from '@fluentui/react-breadcrumb'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useListClassName = makeResetStyles({ + listStyleType: 'none', + display: 'flex', + alignItems: 'center', + margin: 0, + padding: 0, +}); + +/** + * Apply styling to the Breadcrumb slots based on the state + */ +export const useSemanticBreadcrumbStyles = (_state: unknown): BreadcrumbState => { + 'use no memo'; + + const state = _state as BreadcrumbState; + + const listBaseClassName = useListClassName(); + state.root.className = mergeClasses( + state.root.className, + breadcrumbClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + if (state.list) { + state.list.className = mergeClasses( + state.list.className, + listBaseClassName, + breadcrumbClassNames.list, + getSlotClassNameProp_unstable(state.list), + ); + } + 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 cd600070458dc..4b30db2d3703c 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 @@ -62,6 +62,12 @@ import { useSemanticMenuGroupHeaderStyles } from './Menu'; import { useSemanticRadioStyles } from './Radio'; import { useSemanticPersonaStyles } from './Persona'; import { useSemanticBadgeStyles, useSemanticPresenceBadgeStyles } from './Badge'; +import { + useSemanticBreadcrumbStyles, + useSemanticBreadcrumbButtonStyles, + useSemanticBreadcrumbDividerStyles, + useSemanticBreadcrumbItemStyles, +} from './Breadcrumb'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -141,4 +147,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { usePersonaStyles_unstable: useSemanticPersonaStyles, // Checkbox styles useCheckboxStyles_unstable: useSemanticCheckboxStyles, + // Breadcrumb styles + useBreadcrumbStyles_unstable: useSemanticBreadcrumbStyles, + useBreadcrumbButtonStyles_unstable: useSemanticBreadcrumbButtonStyles, + useBreadcrumbDividerStyles_unstable: useSemanticBreadcrumbDividerStyles, + useBreadcrumbItemStyles_unstable: useSemanticBreadcrumbItemStyles, }; 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 64350c99c8ac5..5ff086e7f30d1 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 @@ -66,3 +66,9 @@ export { export { useSemanticRadioStyles } from './component-styles/Radio'; export { useSemanticPersonaStyles } from './component-styles/Persona'; export { useSemanticCheckboxStyles } from './component-styles/Checkbox'; +export { + useSemanticBreadcrumbStyles, + useSemanticBreadcrumbButtonStyles, + useSemanticBreadcrumbDividerStyles, + useSemanticBreadcrumbItemStyles, +} from './component-styles/Breadcrumb'; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index 281c382e537a2..5dfa27c0a93fa 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -994,6 +994,15 @@ export const ctrlBooleanSelectionHint = "var(--smtc-ctrl-boolean-selection-hint) // @public (undocumented) export const ctrlBooleanSelectionHintRaw = "--smtc-ctrl-boolean-selection-hint"; +// @public +export const _ctrlBreadcrumbSizeDefault = "var(--smtc-size-ctrl-default, 32px)"; + +// @public +export const _ctrlBreadcrumbSizeLgDefault = "var(--smtc-size-ctrl-lg-default, 40px)"; + +// @public +export const _ctrlBreadcrumbSizeSmIcon = "var(--smtc-size-ctrl-sm-icon, 16px)"; + // @public export const _ctrlButtonGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, var(--spacingHorizontalSNudge))"; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 0424bef51c3e9..d2a42c777fe2b 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -191,6 +191,18 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'ctrlBadgeLgPadding', }, + _ctrlBreadcrumbSizeDefault: { + originalToken: 'sizeCtrlDefault', + rawValue: '32px', + }, + _ctrlBreadcrumbSizeLgDefault: { + originalToken: 'sizeCtrlLgDefault', + rawValue: '40px', + }, + _ctrlBreadcrumbSizeSmIcon: { + originalToken: 'sizeCtrlSmIcon', + rawValue: '16px', + }, _ctrlButtonGapInsideDefault: { f2Token: 'spacingHorizontalSNudge', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index cca8f009ea94d..f118e1534a81f 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1826,6 +1826,9 @@ export { _ctrlBadgeStatusWarningTintStroke, _ctrlBadgeTextStyleSemiBoldWeight, _ctrlBadgeXLPadding, + _ctrlBreadcrumbSizeDefault, + _ctrlBreadcrumbSizeLgDefault, + _ctrlBreadcrumbSizeSmIcon, _ctrlButtonGapInsideDefault, _ctrlCheckboxBorderColorChecked, _ctrlCheckboxBorderColorCheckedHover, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 7f839b1aebc55..5d3ca589d7b82 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -43,6 +43,9 @@ import { statusWarningTintForegroundRaw, statusWarningTintStrokeRaw, textStyleDefaultRegularWeightRaw, + sizeCtrlDefaultRaw, + sizeCtrlLgDefaultRaw, + sizeCtrlSmIconRaw, gapInsideCtrlDefaultRaw, backgroundCtrlBrandHoverRaw, backgroundCtrlBrandPressedRaw, @@ -51,7 +54,6 @@ import { foregroundCtrlNeutralSecondaryRestRaw, backgroundCtrlSubtleHoverRaw, backgroundCtrlSubtlePressedRaw, - sizeCtrlDefaultRaw, paddingCtrlHorizontalDefaultRaw, textGlobalBody3FontSizeRaw, cornerFlyoutRestRaw, @@ -497,6 +499,27 @@ export const _ctrlBadgeTextStyleSemiBoldWeight = `var(${textStyleDefaultRegularW * please use ctrlBadgeLgPadding instead. */ export const _ctrlBadgeXLPadding = `var(${ctrlBadgeLgPaddingRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for sizeCtrlDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlDefault instead. + */ +export const _ctrlBreadcrumbSizeDefault = `var(${sizeCtrlDefaultRaw}, 32px)`; +/** + * This is a legacy variant for sizeCtrlLgDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlLgDefault instead. + */ +export const _ctrlBreadcrumbSizeLgDefault = `var(${sizeCtrlLgDefaultRaw}, 40px)`; +/** + * This is a legacy variant for sizeCtrlSmIcon to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use sizeCtrlSmIcon instead. + */ +export const _ctrlBreadcrumbSizeSmIcon = `var(${sizeCtrlSmIconRaw}, 16px)`; /** * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only. From bb0b6eaf0ac59f91db3ddd6c0a2220cb1d96bfca Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Tue, 15 Jul 2025 16:47:15 -0400 Subject: [PATCH 2/2] use local semantic version of button styles hook --- .../Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts index a13d5c1e01679..3fa35c74804fb 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts @@ -1,7 +1,8 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { breadcrumbButtonClassNames, type BreadcrumbButtonState } from '@fluentui/react-breadcrumb'; import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; -import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button'; +import { buttonClassNames } from '@fluentui/react-button'; +import { useSemanticButtonStyles } from '../Button/useSemanticButtonStyles.styles'; import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons'; import * as semanticTokens from '@fluentui/semantic-tokens'; @@ -149,7 +150,7 @@ export const useSemanticBreadcrumbButtonStyles = (_state: unknown): BreadcrumbBu ); } - useButtonStyles_unstable(state); + useSemanticButtonStyles(state); return state; };