Added truncation and tooltips to the Breadcrumb

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

@@ -151,6 +151,12 @@ export const renderBreadcrumbItem_unstable: (state: BreadcrumbItemState) => JSX.
 // @public
 export const renderBreadcrumbLink_unstable: (state: BreadcrumbLinkState) => JSX.Element;
 
+// @public (undocumented)
+export const truncateBreadcrumbLongName: (content: string, maxLength?: number | undefined) => string;
+
+// @public (undocumented)
+export const truncateBreadcrumLongTooltip: (content: string, maxLength?: number | undefined) => string;
+
 // @public
 export const useBreadcrumb_unstable: (props: BreadcrumbProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbState;
 

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

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

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

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

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

@@ -0,0 +1,44 @@
+import { truncateBreadcrumbLongName, truncateBreadcrumLongTooltip } from './truncateBreadcrumb';
+
+describe('truncate method', () => {
+  it('returns empty string when name is empty', () => {
+    expect(truncateBreadcrumbLongName('')).toEqual('');
+  });
+  it('returns the same string when name is less than 30 characters', () => {
+    expect(truncateBreadcrumbLongName('Regular name')).toEqual('Regular name');
+  });
+  it('truncates name correctly when length is longer than 30 characters', () => {
+    expect(truncateBreadcrumbLongName('Name which is longer than 30 characters')).toEqual(
+      'Name which is longer than 30 c...',
+    );
+  });
+  it('returns the same string when name is equal to 30 characters', () => {
+    expect(truncateBreadcrumbLongName('Name which equal 30 characters')).toEqual('Name which equal 30 characters');
+  });
+  it('truncates name correctly with custom length', () => {
+    expect(truncateBreadcrumbLongName('Name which is longer than 10 characters', 10)).toEqual('Name which...');
+  });
+  it('truncates RTL name correctly with custom length', () => {
+    expect(truncateBreadcrumbLongName('رحیمی خسرو رحیمی', 10)).toEqual('رحیمی خسرو...');
+  });
+  it('returns the same content for regular tooltips', () => {
+    expect(truncateBreadcrumLongTooltip('Just a tooltip')).toEqual('Just a tooltip');
+  });
+  it('truncates long tooltip correctly', () => {
+    const longTooltipContent =
+      "Super long tooltip which is longer than 80 characters. Don't think about what you want to be, but what you want to do.";
+    expect(truncateBreadcrumLongTooltip(longTooltipContent)).toEqual(
+      "Super long tooltip which is longer than 80 characters. Don't think about what yo...",
+    );
+    expect(truncateBreadcrumLongTooltip(longTooltipContent, 100)).toEqual(
+      "Super long tooltip which is longer than 80 characters. Don't think about what you want to be, but wh...",
+    );
+  });
+  it('truncates long tooltip correctly with custom length', () => {
+    const longTooltipContent =
+      "Super long tooltip which is longer than 80 characters. Don't think about what you want to be, but what you want to do.";
+    expect(truncateBreadcrumLongTooltip(longTooltipContent, 100)).toEqual(
+      "Super long tooltip which is longer than 80 characters. Don't think about what you want to be, but wh...",
+    );
+  });
+});

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

@@ -0,0 +1,16 @@
+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;
+};
+
+export const truncateBreadcrumbLongName = (content: string, maxLength?: number): string => {
+  const truncateLength = maxLength || MAX_NAME_LENGTH;
+  return truncateBreadcrumb(content, truncateLength);
+};
+
+export const truncateBreadcrumLongTooltip = (content: string, maxLength?: number): string => {
+  const truncateLength = maxLength || MAX_TOOLTIP_LENGTH;
+  return truncateBreadcrumb(content, truncateLength);
+};

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

@@ -1,15 +1,103 @@
 import * as React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-breadcrumb';
-import { ArrowRight16Filled } from '@fluentui/react-icons';
-
-export const Default = () => (
-  <Breadcrumb>
-    <BreadcrumbItem>Item with custom divider</BreadcrumbItem>
-    <BreadcrumbDivider>
-      <ArrowRight16Filled />
-    </BreadcrumbDivider>
-    <BreadcrumbItem>Item</BreadcrumbItem>
-    <BreadcrumbDivider />
-    <BreadcrumbItem current>Item</BreadcrumbItem>
-  </Breadcrumb>
-);
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbDivider,
+  BreadcrumbProps,
+  partitionBreadcrumbItems,
+  BreadcrumbButton,
+  truncateBreadcrumbLongName,
+  truncateBreadcrumLongTooltip,
+} from '@fluentui/react-breadcrumb';
+import type { PartitionBreadcrumbItems } from '@fluentui/react-breadcrumb';
+import { ArrowRight16Filled, MoreHorizontalRegular, MoreHorizontalFilled, bundleIcon } from '@fluentui/react-icons';
+import { Tooltip } from '@fluentui/react-components';
+
+const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
+
+type Item = {
+  key: number;
+  value: string;
+};
+const items: Item[] = [
+  {
+    key: 0,
+    value: 'Item 1',
+  },
+  {
+    key: 1,
+    value: 'Item 2',
+  },
+  {
+    key: 2,
+    value: 'Item 3',
+  },
+  {
+    key: 3,
+    value: 'Item 4',
+  },
+  {
+    key: 4,
+    value: 'Item 5 which is longer than 30 characters',
+  },
+  {
+    key: 5,
+    value: "Item 6 is long even for tooltip. Don't think about what you want to be, but what you want to do.",
+  },
+];
+
+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>
+      {!isLastItem && <BreadcrumbDivider />}
+    </React.Fragment>
+  );
+}
+
+export const Default = () => {
+  const { startDisplayedItems, overflowItems, endDisplayedItems }: PartitionBreadcrumbItems<Item> =
+    partitionBreadcrumbItems({
+      items,
+      maxDisplayedItems: 3,
+    });
+  return (
+    <>
+      <Breadcrumb aria-label="breadcrumb-with-overflow">
+        {startDisplayedItems.map(item => renderItem(item, 'medium'))}
+        {overflowItems && (
+          <BreadcrumbItem>
+            <Tooltip withArrow content={getTooltipContent(overflowItems)} relationship="label">
+              <BreadcrumbButton icon={<MoreHorizontal />} aria-label={`more items`} />
+            </Tooltip>
+          </BreadcrumbItem>
+        )}
+        {endDisplayedItems && endDisplayedItems.map(item => renderItem(item, 'medium'))}
+      </Breadcrumb>
+      <Breadcrumb>
+        <BreadcrumbItem>Item with custom divider</BreadcrumbItem>
+        <BreadcrumbDivider>
+          <ArrowRight16Filled />
+        </BreadcrumbDivider>
+        <BreadcrumbItem>Item</BreadcrumbItem>
+        <BreadcrumbDivider />
+        <BreadcrumbItem current>Item</BreadcrumbItem>
+      </Breadcrumb>
+    </>
+  );
+};
+
+const getTooltipContent = (breadcrumbItems: readonly Item[]) => {
+  return breadcrumbItems.reduce((acc, initialValue, idx, arr) => {
+    return (
+      <div style={{ display: 'flex' }}>
+        {acc}
+        {arr[0].value !== initialValue.value && <BreadcrumbDivider />}
+        {initialValue.value}
+      </div>
+    );
+  }, <div style={{ display: 'flex' }} />);
+};