Breadcrumb design team fixes (#28883)

* Breadcrumb fixes after design review

* Disabled link

* generated api

* changed files

Author: ValentinaKozlova

change/@fluentui-react-breadcrumb-preview-562a5dd1-ef15-4eec-9351-0a1ce84c026d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: breadcrumb spacing",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -75,7 +75,9 @@ export type BreadcrumbItemSlots = {
 };
 
 // @public
-export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size' | 'current'>>;
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size' | 'current'>> & {
+    isInteractive?: boolean;
+};
 
 // @public
 export const BreadcrumbLink: ForwardRefComponent<BreadcrumbLinkProps>;

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

@@ -27,21 +27,23 @@ const defaultButtonStyles = {
 };
 const useStyles = makeStyles({
   root: {
-    ...shorthands.padding(tokens.spacingHorizontalNone),
     minWidth: 'unset',
     textWrap: 'nowrap',
   },
   small: {
     height: '24px',
     ...typographyStyles.caption1,
+    ...shorthands.padding(tokens.spacingHorizontalSNudge),
   },
   medium: {
     height: '32px',
     ...typographyStyles.body1,
+    ...shorthands.padding(tokens.spacingHorizontalSNudge),
   },
   large: {
     height: '40px',
     ...typographyStyles.body2,
+    ...shorthands.padding(tokens.spacingHorizontalS),
   },
   current: {
     ':hover': {

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts

@@ -27,4 +27,7 @@ export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> &
  * State used in rendering BreadcrumbItem
  */
 export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> &
-  Required<Pick<BreadcrumbItemProps, 'size' | 'current'>>;
+  Required<Pick<BreadcrumbItemProps, 'size' | 'current'>> & {
+    // TODO add description
+    isInteractive?: boolean;
+  };

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts

@@ -19,6 +19,8 @@ export const useBreadcrumbItem_unstable = (
   const { size } = useBreadcrumbContext_unstable();
   const { current = false, icon } = props;
 
+  const isInteractive = typeof props.children === 'object';
+
   const iconSlot = slot.optional(icon, { elementType: 'span' });
   return {
     components: { root: 'li', icon: 'span' },
@@ -32,5 +34,6 @@ export const useBreadcrumbItem_unstable = (
     size,
     current,
     icon: iconSlot,
+    isInteractive,
   };
 };

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

@@ -47,6 +47,9 @@ const useStyles = makeStyles({
   currentLarge: {
     ...typographyStyles.subtitle2,
   },
+  noSpacing: {
+    ...shorthands.padding(0),
+  },
 });
 
 const useIconStyles = makeStyles({
@@ -82,11 +85,15 @@ export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): Br
     medium: styles.currentMedium,
     large: styles.currentLarge,
   };
+  const noSpacingStyle =
+    state.isInteractive || (!state.isInteractive && state.size === 'small') ? styles.noSpacing : '';
+
   state.root.className = mergeClasses(
     breadcrumbItemClassNames.root,
     styles.root,
     styles[size],
     state.current && currentSizeMap[size],
+    noSpacingStyle,
     state.root.className,
   );
 

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbLink/useBreadcrumbLinkStyles.styles.ts

@@ -32,14 +32,17 @@ const useStyles = makeStyles({
   small: {
     height: '24px',
     ...typographyStyles.caption1,
+    ...shorthands.padding(tokens.spacingHorizontalSNudge),
   },
   medium: {
     height: '32px',
     ...typographyStyles.body1,
+    ...shorthands.padding(tokens.spacingHorizontalSNudge),
   },
   large: {
     height: '40px',
     ...typographyStyles.body2,
+    ...shorthands.padding(tokens.spacingHorizontalS),
   },
   overflow: {
     ...shorthands.padding(tokens.spacingHorizontalSNudge),

packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx

@@ -5,7 +5,6 @@ import {
   BreadcrumbDivider,
   BreadcrumbProps,
   BreadcrumbButton,
-  BreadcrumbLink,
 } from '@fluentui/react-breadcrumb-preview';
 import { RadioGroup, Radio, Label } from '@fluentui/react-components';
 type Item = {
@@ -53,18 +52,6 @@ function renderButton(item: Item) {
   );
 }
 
-function renderLink(item: Item) {
-  const isLastItem = items.length - 1 === item.key;
-  return (
-    <React.Fragment key={`item-${item.key}`}>
-      <BreadcrumbItem current={isLastItem}>
-        <BreadcrumbLink>{item.value}</BreadcrumbLink>
-      </BreadcrumbItem>
-      {!isLastItem && <BreadcrumbDivider />}
-    </React.Fragment>
-  );
-}
-
 export const Default = () => {
   const [size, setSize] = React.useState('medium' as BreadcrumbProps['size']);
   const [breadcrumbType, setBreadcrumbType] = React.useState('item');
@@ -91,16 +78,14 @@ export const Default = () => {
             value={breadcrumbType}
             onChange={(_, data) => setBreadcrumbType(data.value)}
           >
-            <Radio value="item" label="Item" />
+            <Radio value="item" label="Non-interactive item" />
             <Radio value="button" label="Button" />
-            <Radio value="link" label="Link" />
           </RadioGroup>
         </div>
       </div>
       <Breadcrumb aria-label="Small Breadcrumb" size={size}>
         {breadcrumbType === 'item' && items.map(item => renderItem(item))}
         {breadcrumbType === 'button' && items.map(item => renderButton(item))}
-        {breadcrumbType === 'link' && items.map(item => renderLink(item))}
       </Breadcrumb>
     </>
   );

packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx

@@ -5,7 +5,6 @@ import {
   BreadcrumbDivider,
   BreadcrumbProps,
   BreadcrumbButton,
-  BreadcrumbLink,
 } from '@fluentui/react-breadcrumb-preview';
 import { RadioGroup, Radio, Label } from '@fluentui/react-components';
 
@@ -54,24 +53,12 @@ function renderButton(item: Item) {
   );
 }
 
-function renderLink(item: Item) {
-  const isLastItem = items.length - 1 === item.key;
-  return (
-    <React.Fragment key={`link-item-${item.key}`}>
-      <BreadcrumbItem current={isLastItem}>
-        <BreadcrumbLink>{item.value}</BreadcrumbLink>
-      </BreadcrumbItem>
-      {!isLastItem && <BreadcrumbDivider />}
-    </React.Fragment>
-  );
-}
-
 export const BreadcrumbSize = () => {
   const [dividerType, setDividerType] = React.useState('chevron' as BreadcrumbProps['dividerType']);
   return (
     <>
       Only small breadcrumbs can have `slash` divider.
-      <h2>Small</h2>
+      <h3>Small</h3>
       <Label>Divider type</Label>
       <RadioGroup
         aria-labelledby="radio-group-divider"
@@ -81,33 +68,22 @@ export const BreadcrumbSize = () => {
         <Radio value="slash" label="Slash" />
         <Radio value="chevron" label="Chevron" />
       </RadioGroup>
+      <h4>Non-interactive item</h4>
       <Breadcrumb aria-label="Small breadcrumb example with slashes" size="small" dividerType={dividerType}>
         {items.map(item => renderItem(item, 'small'))}
       </Breadcrumb>
+      <h4>Breadcrumb with buttons</h4>
       <Breadcrumb aria-label="Small breadcrumb example with buttons" size="small">
         {items.map(item => renderButton(item))}
       </Breadcrumb>
-      <Breadcrumb aria-label="Small breadcrumb example with links" size="small">
-        {items.map(item => renderLink(item))}
-      </Breadcrumb>
-      <h2>Medium</h2>
-      <Breadcrumb aria-label="Default breadcrumb">{items.map(item => renderItem(item, 'medium'))}</Breadcrumb>
+      <h3>Medium</h3>
       <Breadcrumb aria-label="Medium breadcrumb example with buttons" size="medium">
         {items.map(item => renderButton(item))}
       </Breadcrumb>
-      <Breadcrumb aria-label="Medium breadcrumb example with links" size="medium">
-        {items.map(item => renderLink(item))}
-      </Breadcrumb>
-      <h2>Large</h2>
-      <Breadcrumb aria-label="Large breadcrumb" size="large">
-        {items.map(item => renderItem(item, 'large'))}
-      </Breadcrumb>
+      <h3>Large</h3>
       <Breadcrumb aria-label="Large breadcrumb example with buttons" size="large">
         {items.map(item => renderButton(item))}
       </Breadcrumb>
-      <Breadcrumb aria-label="Large breadcrumb example with links" size="large">
-        {items.map(item => renderLink(item))}
-      </Breadcrumb>
     </>
   );
 };

packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx

@@ -6,7 +6,6 @@ import bestPracticesMd from './BreadcrumbBestPractices.md';
 export { Default } from './BreadcrumbDefault.stories';
 export { BreadcrumbSize } from './BreadcrumbSize.stories';
 export { BreadcrumbWithOverflow } from './BreadcrumbWithOverflow.stories';
-export { BreadcrumbLinkWithOverflow } from './BreadcrumbLinkWithOverflow.stories';
 export { BreadcrumbItemWithOverflow } from './BreadcrumbItemWithOverflow.stories';
 export { BreadcrumbFocusMode } from './BreadcrumbFocusMode.stories';