Fixed bugs and added more stories to the Breadcrumb

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

@@ -120,6 +120,9 @@ export type BreadcrumbSlots = {
 // @public
 export type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'appearance' | 'iconPosition' | 'size' | 'dividerType'>>;
 
+// @public (undocumented)
+export const isTruncatableBreadcrumbContent: (content: string, maxLength: number) => boolean;
+
 // @public (undocumented)
 export type PartitionBreadcrumbItems<T> = {
     startDisplayedItems: readonly T[];

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

@@ -49,6 +49,9 @@ const useStyles = makeStyles({
     ':hover:active': {
       ...defaultButtonStyles,
     },
+    ':disabled': {
+      ...defaultButtonStyles,
+    },
   },
   currentSmall: {
     ...typographyStyles.caption1Strong,

packages/react-components/react-breadcrumb/src/components/BreadcrumbDivider/BreadcrumbDivider.tsx

@@ -6,7 +6,7 @@ import type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * BreadcrumbDivider component - TODO: add more docs
+ * A divider component which is used inside the Breadcrumb
  */
 export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = React.forwardRef((props, ref) => {
   const state = useBreadcrumbDivider_unstable(props, ref);

packages/react-components/react-breadcrumb/src/components/BreadcrumbItem/BreadcrumbItem.tsx

@@ -6,7 +6,8 @@ import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * BreadcrumbItem component - TODO: add more docs
+ * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.
+ * It can be used as a non-interactive item.
  */
 export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.forwardRef((props, ref) => {
   const state = useBreadcrumbItem_unstable(props, ref);

packages/react-components/react-breadcrumb/src/components/BreadcrumbLink/BreadcrumbLink.tsx

@@ -6,7 +6,7 @@ import type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * BreadcrumbLink component - TODO: add more docs
+ * A link component which is used inside the Breadcrumb.
  */
 export const BreadcrumbLink: ForwardRefComponent<BreadcrumbLinkProps> = React.forwardRef((props, ref) => {
   const state = useBreadcrumbLink_unstable(props, ref);

packages/react-components/react-breadcrumb/src/index.ts

@@ -22,7 +22,12 @@ export {
   useBreadcrumbItem_unstable,
 } from './BreadcrumbItem';
 export type { BreadcrumbItemProps, BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem';
-export { partitionBreadcrumbItems, truncateBreadcrumbLongName, truncateBreadcrumLongTooltip } from './utils/index';
+export {
+  partitionBreadcrumbItems,
+  truncateBreadcrumbLongName,
+  truncateBreadcrumLongTooltip,
+  isTruncatableBreadcrumbContent,
+} from './utils/index';
 export type { PartitionBreadcrumbItemsOptions, PartitionBreadcrumbItems } from './utils/index';
 export {
   BreadcrumbButton,

packages/react-components/react-breadcrumb/src/utils/index.ts

@@ -1,3 +1,7 @@
 export { partitionBreadcrumbItems } from './partitionBreadcrumbItems';
 export type { PartitionBreadcrumbItems, PartitionBreadcrumbItemsOptions } from './partitionBreadcrumbItems';
-export { truncateBreadcrumbLongName, truncateBreadcrumLongTooltip } from './truncateBreadcrumb';
+export {
+  truncateBreadcrumbLongName,
+  truncateBreadcrumLongTooltip,
+  isTruncatableBreadcrumbContent,
+} from './truncateBreadcrumb';

packages/react-components/react-breadcrumb/src/utils/truncateBreadcrumb.ts

@@ -2,7 +2,13 @@ const MAX_NAME_LENGTH = 30;
 const MAX_TOOLTIP_LENGTH = 80;
 
 const truncateBreadcrumb = (content: string, maxLength: number): string => {
-  return content.length > maxLength ? content.trim().slice(0, maxLength).concat('...') : content;
+  return isTruncatableBreadcrumbContent(content, maxLength)
+    ? content.trim().slice(0, maxLength).concat('...')
+    : content;
+};
+
+export const isTruncatableBreadcrumbContent = (content: string, maxLength: number) => {
+  return content.length > maxLength;
 };
 
 export const truncateBreadcrumbLongName = (content: string, maxLength?: number): string => {

packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbBestPractices.md

@@ -14,5 +14,6 @@
 
 - Don't use Breadcrumbs as a primary way to navigate an app or site.
 - Avoid using custom dividers.
+- Do not wrap breadcrumb items.
 
 </details>

packages/react-components/react-breadcrumb/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx

@@ -277,3 +277,15 @@ export const BreadcrumbWithOverflow = () => {
     </div>
   );
 };
+
+BreadcrumbWithOverflow.parameters = {
+  docs: {
+    description: {
+      story: [
+        'The maximum number of items in a breadcrumb can be customized. We recommend a maximum of 6 items or fewer.',
+        'When the maximum number is exceeded, items in the middle auto-collapse into an overflow menu.',
+        '\nThe first and last items should always appear  in the breadcrumb. Breadcrumbs should never wrap.',
+      ].join('\n'),
+    },
+  },
+};

packages/react-components/react-breadcrumb/stories/BreadcrumbDivider/BreadcrumbDividerBestPractices.md

@@ -5,7 +5,7 @@
 
 ### Do
 
-- Use `slash` dividers only for small and non-interactive breadcrums.
+- Use `slash` dividers only for small and non-interactive breadcrums. Use it to describe file paths.
 
 ### Don't
 

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

@@ -8,6 +8,7 @@ import {
   BreadcrumbButton,
   truncateBreadcrumbLongName,
   truncateBreadcrumLongTooltip,
+  isTruncatableBreadcrumbContent,
 } from '@fluentui/react-breadcrumb';
 import type { PartitionBreadcrumbItems } from '@fluentui/react-breadcrumb';
 import { ArrowRight16Filled, MoreHorizontalRegular, MoreHorizontalFilled, bundleIcon } from '@fluentui/react-icons';
@@ -50,9 +51,14 @@ function renderItem(item: Item, size: BreadcrumbProps['size']) {
   const isLastItem = items.length - 1 === item.key;
   return (
     <React.Fragment key={`${size}-item-${item.key}`}>
-      <Tooltip withArrow content={truncateBreadcrumLongTooltip(item.value)} relationship="label">
-        <BreadcrumbItem current={isLastItem}>{truncateBreadcrumbLongName(item.value)}</BreadcrumbItem>
-      </Tooltip>
+      {isTruncatableBreadcrumbContent(item.value, 30) ? (
+        <Tooltip withArrow content={truncateBreadcrumLongTooltip(item.value)} relationship="label">
+          <BreadcrumbItem current={isLastItem}>{truncateBreadcrumbLongName(item.value)}</BreadcrumbItem>
+        </Tooltip>
+      ) : (
+        <BreadcrumbItem current={isLastItem}>{item.value}</BreadcrumbItem>
+      )}
+
       {!isLastItem && <BreadcrumbDivider />}
     </React.Fragment>
   );