UI adjustments for the Breadcrumb

packages/react-components/react-breadcrumb/etc/react-breadcrumb.api.md

@@ -23,7 +23,7 @@ export const Breadcrumb: ForwardRefComponent<BreadcrumbProps>;
 // @public
 export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
 
-// @public (undocumented)
+// @public
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
 
 // @public

packages/react-components/react-breadcrumb/src/components/Breadcrumb/useBreadcrumbStyles.ts

@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
 import type { BreadcrumbSlots, BreadcrumbState } from './Breadcrumb.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -7,26 +7,22 @@ export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots> = {
   list: 'fui-Breadcrumb__list',
 };
 
-/**
- * Styles for the root slot
- */
-const useStyles = makeStyles({
-  root: {},
-  list: {
-    listStyleType: 'none',
-    display: 'flex',
-    alignItems: 'center',
-  },
+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 useBreadcrumbStyles_unstable = (state: BreadcrumbState): BreadcrumbState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(breadcrumbClassNames.root, styles.root, state.root.className);
+  const listBaseClassName = useListClassName();
+  state.root.className = mergeClasses(breadcrumbClassNames.root, state.root.className);
   if (state.list) {
-    state.list.className = mergeClasses(breadcrumbClassNames.list, styles.list, state.list.className);
+    state.list.className = mergeClasses(listBaseClassName, breadcrumbClassNames.list, state.list.className);
   }
   return state;
 };

packages/react-components/react-breadcrumb/src/components/BreadcrumbButton/useBreadcrumbButtonStyles.ts

@@ -4,14 +4,22 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 import { useButtonStyles_unstable } from '@fluentui/react-button';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 
+/**
+ * Static CSS class names used internally for the component slots.
+ */
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots> = {
   root: 'fui-BreadcrumbButton',
   icon: 'fui-BreadcrumbButton__icon',
 };
 
 /**
- * Styles for the root slot
+ * CSS variable names used internally for styling in the Breadcrumb.
  */
+export const breadcrumbCSSVars = {
+  breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',
+  breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height',
+};
+
 const useStyles = makeStyles({
   root: {},
   small: {
@@ -40,11 +48,33 @@ const useStyles = makeStyles({
   },
 });
 
+const useIconStyles = makeStyles({
+  base: {
+    fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
+    height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
+    lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`,
+    width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
+  },
+  small: {
+    [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px',
+    [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase200,
+  },
+  medium: {
+    [breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px',
+    [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase400,
+  },
+  large: {
+    [breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px',
+    [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase600,
+  },
+});
 /**
  * Apply styling to the BreadcrumbButton slots based on the state
  */
 export const useBreadcrumbButtonStyles_unstable = (state: BreadcrumbButtonState): BreadcrumbButtonState => {
   const styles = useStyles();
+  const iconStyles = useIconStyles();
+
   const currentSizeMap = {
     small: styles.currentSmall,
     medium: styles.currentMedium,
@@ -58,6 +88,10 @@ export const useBreadcrumbButtonStyles_unstable = (state: BreadcrumbButtonState)
     state.root.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+  }
+
   useButtonStyles_unstable(state);
 
   return state;

packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/useBreadcrumbItemStyles.ts

@@ -14,6 +14,7 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     alignItems: 'center',
+    color: tokens.colorNeutralForeground2,
   },
   small: {
     height: '24px',

packages/react-components/react-breadcrumb/stories/BreadcrumbItem/BreadcrumbItemDefault.stories.tsx

@@ -10,6 +10,6 @@ export const Default = () => (
     </BreadcrumbDivider>
     <BreadcrumbItem>Item</BreadcrumbItem>
     <BreadcrumbDivider />
-    <BreadcrumbItem>Item</BreadcrumbItem>
+    <BreadcrumbItem current>Item</BreadcrumbItem>
   </Breadcrumb>
 );