Addressing Issue #1145 - Breadcrumb: Customize icon used

common/changes/@uifabric/utilities/breadcrumb-divideras-1145_2018-04-02-22-19.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Added IComponentAs as a type for 'render as' props in components",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "v-brgarl@microsoft.com"
+}

common/changes/office-ui-fabric-react/breadcrumb-divideras-1145_2018-04-02-22-19.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added dividerAs prop to Breadcrumb component allowing the user to pass a custom icon to be used as the trail divider icon.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}

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

@@ -65,7 +65,13 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
   }
 
   private _onRenderBreadcrumb = (data: IBreadCrumbData) => {
-    const { className, ariaLabel, onRenderItem = this._onRenderItem, overflowAriaLabel } = data.props;
+    const {
+      className,
+      ariaLabel,
+      dividerAs: Divider = Icon,
+      onRenderItem = this._onRenderItem,
+      overflowAriaLabel
+    } = data.props;
     const { renderedOverflowItems, renderedItems } = data;
 
     const contextualItems = renderedOverflowItems.map(
@@ -77,6 +83,10 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
       })
     );
 
+    // Find index of last rendered item so the divider icon
+    // knows not to render on that item
+    const lastItemIndex = renderedItems.length - 1;
+
     return (
       <div
         className={ css('ms-Breadcrumb', className, styles.root) }
@@ -99,20 +109,20 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
                     directionalHint: DirectionalHint.bottomLeftEdge
                   } }
                 />
-                { <Icon
+                <Divider
                   className={ css('ms-Breadcrumb-chevron', styles.chevron) }
                   iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-                /> }
+                />
               </li>
             ) }
             { renderedItems.map(
               (item, index) => (
                 <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) }>
                   { onRenderItem(item, this._onRenderItem) }
-                  <Icon
+                  { index !== lastItemIndex && <Divider
                     className={ css('ms-Breadcrumb-chevron', styles.chevron) }
                     iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-                  />
+                  /> }
                 </li>
               )) }
           </ol>

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

@@ -16,6 +16,8 @@ describe('Breadcrumb', () => {
       { text: 'TestText4', key: 'TestKey4' }
     ];
 
+    const divider = () => <span>*</span>;
+
     let component = renderer.create(
       <Breadcrumb
         items={ items }
@@ -35,6 +37,17 @@ describe('Breadcrumb', () => {
 
     tree = component.toJSON();
     expect(tree).toMatchSnapshot();
+
+    // With custom divider
+    component = renderer.create(
+      <Breadcrumb
+        items={ items }
+        dividerAs={ divider }
+      />
+    );
+
+    tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
   });
 
   it('can call the callback when an item is clicked', () => {

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

@@ -2,7 +2,8 @@
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import { Breadcrumb, IBreadCrumbData } from './Breadcrumb.base';
-import { IRenderFunction } from '../../Utilities';
+import { IIconProps } from '../Icon';
+import { IRenderFunction, IComponentAs } from '../../Utilities';
 
 export interface IBreadcrumb {
 
@@ -25,6 +26,11 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
    */
   className?: string;
 
+  /**
+   * Render a custom divider in place of the default chevron '>'
+   */
+  dividerAs?: IComponentAs<IIconProps>;
+
   /**
    * The maximum number of breadcrumbs to display before coalescing.
    * If not specified, all breadcrumbs will be rendered.

packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap

@@ -136,16 +136,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
                 TestText4
               </div>
             </span>
-            <i
-              aria-hidden={true}
-              className=
-                  ms-Breadcrumb-chevron
-                  {
-                    display: inline-block;
-                  }
-              data-icon-name="ChevronRight"
-              role="presentation"
-            />
           </li>
         </ol>
       </div>
@@ -355,16 +345,129 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
                 TestText4
               </div>
             </span>
-            <i
-              aria-hidden={true}
-              className=
-                  ms-Breadcrumb-chevron
-                  {
-                    display: inline-block;
-                  }
-              data-icon-name="ChevronRight"
-              role="presentation"
-            />
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Breadcrumb renders breadcumb correctly 3`] = `
+<div
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
+>
+  <div
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
+  >
+    <div
+      aria-label={undefined}
+      className="ms-Breadcrumb"
+      role="navigation"
+    >
+      <div
+        aria-describedby={undefined}
+        aria-labelledby={undefined}
+        className="ms-FocusZone"
+        data-focuszone-id="FocusZone11"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="presentation"
+      >
+        <ol
+          className="ms-Breadcrumb-list"
+        >
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText1
+              </div>
+            </span>
+            <span>
+              *
+            </span>
+          </li>
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText2
+              </div>
+            </span>
+            <span>
+              *
+            </span>
+          </li>
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText3
+              </div>
+            </span>
+            <span>
+              *
+            </span>
+          </li>
+          <li
+            className="ms-Breadcrumb-listItem"
+          >
+            <span
+              className="ms-Breadcrumb-item"
+            >
+              <div
+                aria-describedby={undefined}
+                className="ms-TooltipHost"
+                onBlurCapture={[Function]}
+                onFocusCapture={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+              >
+                TestText4
+              </div>
+            </span>
           </li>
         </ol>
       </div>

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

@@ -14,6 +14,8 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
   }
 
   public render() {
+    const customDivider = () => <span>*</span>;
+
     return (
       <div>
         <Label className={ exampleStyles.exampleLabel }>With no maxDisplayedItems</Label>
@@ -29,6 +31,20 @@ export class BreadcrumbBasicExample extends React.Component<any, any> {
           ariaLabel={ 'Website breadcrumb' }
         />
 
+        <Label className={ exampleStyles.exampleLabel } style={ { marginTop: '24px' } }>With Custom Divider Icon</Label>
+        <Breadcrumb
+          items={ [
+            { text: 'Files', 'key': 'Files', onClick: this._onBreadcrumbItemClicked },
+            { text: 'This is folder 1', 'key': 'f1', onClick: this._onBreadcrumbItemClicked },
+            { text: 'This is folder 2', 'key': 'f2', onClick: this._onBreadcrumbItemClicked },
+            { text: 'This is folder 3', 'key': 'f3', onClick: this._onBreadcrumbItemClicked },
+            { text: 'This is folder 4', 'key': 'f4', onClick: this._onBreadcrumbItemClicked },
+            { text: 'This is folder 5', 'key': 'f5', onClick: this._onBreadcrumbItemClicked, isCurrentItem: true }
+          ] }
+          dividerAs={ customDivider }
+          ariaLabel={ 'Website breadcrumb' }
+        />
+
         <Label className={ exampleStyles.exampleLabel } style={ { marginTop: '24px' } }>With maxDisplayedItems set to three</Label>
         <Breadcrumb
           items={ [

packages/utilities/src/IComponentAs.ts

@@ -0,0 +1,7 @@
+/**
+ * Render function interface for providing overrideable render callbacks.
+ *
+ * @public
+ */
+// export type IComponentAs<P> = string | ((props?: P) => JSX.Element);
+export type IComponentAs<T> = React.StatelessComponent<T> | React.ComponentClass<T>;

packages/utilities/src/index.ts

@@ -9,6 +9,7 @@ export * from './EventGroup';
 export * from './FabricPerformance';
 export * from './GlobalSettings';
 export * from './IClassNames';
+export * from './IComponentAs';
 export * from './IDisposable';
 export * from './IPoint';
 export * from './IRectangle';