Add optional props for custom divider rendering

common/changes/office-ui-fabric-react/master_2018-04-26-21-26.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add a option for custom dividerAs to get item information while rendering",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx

@@ -119,6 +119,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
           { index !== lastItemIndex && <Divider
             className={ css('ms-Breadcrumb-chevron', styles.chevron) }
             iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+            item={ item }
           /> }
         </li>
       ));
@@ -141,6 +142,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
           <Divider
             className={ css('ms-Breadcrumb-chevron', styles.chevron) }
             iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+            item={ renderedOverflowItems[renderedOverflowItems.length - 1] }
           />
         </li>
       ));

packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -30,7 +30,7 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
   /**
    * Render a custom divider in place of the default chevron '>'
    */
-  dividerAs?: IComponentAs<IIconProps>;
+  dividerAs?: IComponentAs<IDividerAsProps>;
 
   /**
    * The maximum number of breadcrumbs to display before coalescing.
@@ -91,3 +91,11 @@ export interface IBreadcrumbItem {
    */
   isCurrentItem?: boolean;
 }
+
+export interface IDividerAsProps extends IIconProps {
+  /**
+   * Optional breadcrumb item corresponds to left of the divider to be passed for custom rendering.
+   * For overflowed items, it will be last item in the list
+   */
+  item?: IBreadcrumbItem;
+}

packages/office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import {
-  Breadcrumb, IBreadcrumbItem
+  Breadcrumb, IBreadcrumbItem, IDividerAsProps
 } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
+import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 const exampleStyles: any = exampleStylesImport;
 
 export class BreadcrumbBasicExample extends React.Component<any, any> {
@@ -12,7 +13,6 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
   }
 
   public render(): JSX.Element {
-    const customDivider = () => <span>*</span>;
 
     return (
       <div>
@@ -39,7 +39,7 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
             { text: 'This is folder 4', 'key': 'f4', onClick: this._onBreadcrumbItemClicked },
             { text: 'This is folder 5', 'key': 'f5', onClick: this._onBreadcrumbItemClicked, isCurrentItem: true }
           ] }
-          dividerAs={ customDivider }
+          dividerAs={ this._getCustomDivider }
           ariaLabel={ 'Website breadcrumb' }
         />
 
@@ -76,4 +76,13 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
     console.log(`Breadcrumb item with key "${item.key}" has been clicked.`);
   }
 
+  private _getCustomDivider = (dividerProps: IDividerAsProps): JSX.Element => {
+    const tooltipText = dividerProps.item ? dividerProps.item.text : '';
+    return (
+      <TooltipHost content={ `Show ${tooltipText} contents` } id='myID' calloutProps={ { gapSpace: 0 } }>
+        <span style={ { cursor: 'pointer' } } >*</span>
+      </TooltipHost>
+    );
+  }
+
 }