add breadcrumb to semantic style hooks

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;
 

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",

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';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Breadcrumb/useSemanticBreadcrumbButtonStyles.styles.ts

@@ -0,0 +1,156 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { breadcrumbButtonClassNames, type BreadcrumbButtonState } from '@fluentui/react-breadcrumb';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+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';
+
+/**
+ * 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),
+    );
+  }
+
+  useSemanticButtonStyles(state);
+
+  return state;
+};

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;
+};

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;
+};

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;
+};

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,
 };

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';

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))";
 

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',

packages/semantic-tokens/src/index.ts

@@ -1826,6 +1826,9 @@ export {
   _ctrlBadgeStatusWarningTintStroke,
   _ctrlBadgeTextStyleSemiBoldWeight,
   _ctrlBadgeXLPadding,
+  _ctrlBreadcrumbSizeDefault,
+  _ctrlBreadcrumbSizeLgDefault,
+  _ctrlBreadcrumbSizeSmIcon,
   _ctrlButtonGapInsideDefault,
   _ctrlCheckboxBorderColorChecked,
   _ctrlCheckboxBorderColorCheckedHover,