Persona - onRenderCoin prop

packages/office-ui-fabric-react/src/components/Persona/Persona.tsx

@@ -57,7 +57,8 @@ export class Persona extends BaseComponent<IPersonaProps, {}> {
       imageShouldFadeIn,
       imageShouldStartVisible,
       showSecondaryText,
-      onPhotoLoadingStateChange
+      onPhotoLoadingStateChange,
+      onRenderCoin
      } = this.props;
 
     let personaCoinProps = {
@@ -72,7 +73,8 @@ export class Persona extends BaseComponent<IPersonaProps, {}> {
       imageShouldFadeIn,
       imageShouldStartVisible,
       size,
-      onPhotoLoadingStateChange
+      onPhotoLoadingStateChange,
+      onRenderCoin
     };
 
     let divProps = getNativeProps(this.props, divProperties);

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

@@ -30,6 +30,11 @@ export interface IPersonaProps extends React.HTMLAttributes<Persona> {
    */
   size?: PersonaSize;
 
+  /**
+   * Optional custom renderer for the coin
+   */
+  onRenderCoin?: IRenderFunction<IPersonaProps>;
+
   /**
    * If true, adds the css class 'is-fadeIn' to the image.
    */

packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx

@@ -76,6 +76,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
       initialsColor,
       primaryText,
       imageShouldFadeIn,
+      onRenderCoin = this._onRenderCoin,
       onRenderInitials = this._onRenderInitials,
       imageShouldStartVisible
      } = this.props;
@@ -114,17 +115,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
                 </div>
               )
             }
-            <Image
-              className={ css('ms-Persona-image', styles.image) }
-              imageFit={ ImageFit.cover }
-              src={ imageUrl }
-              width={ coinSize || SIZE_TO_PIXELS[size] }
-              height={ coinSize || SIZE_TO_PIXELS[size] }
-              alt={ imageAlt }
-              shouldFadeIn={ imageShouldFadeIn }
-              shouldStartVisible={ imageShouldStartVisible }
-              onLoadingStateChange={ this._onPhotoLoadingStateChange }
-            />
+            { onRenderCoin(this.props, this._onRenderCoin) }
             <PersonaPresence { ...this.props } />
           </div>
         ) :
@@ -143,6 +134,33 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
     );
   }
 
+  @autobind
+  private _onRenderCoin(props: IPersonaProps): JSX.Element | null {
+    let {
+      coinSize,
+      imageUrl,
+      imageAlt,
+      imageShouldFadeIn,
+      imageShouldStartVisible
+    } = this.props;
+
+    let size = this.props.size as PersonaSize;
+
+    return(
+      <Image
+        className={ css('ms-Persona-image', styles.image) }
+        imageFit={ ImageFit.cover }
+        src={ imageUrl }
+        width={ coinSize || SIZE_TO_PIXELS[size] }
+        height={ coinSize || SIZE_TO_PIXELS[size] }
+        alt={ imageAlt }
+        shouldFadeIn={ imageShouldFadeIn }
+        shouldStartVisible={ imageShouldStartVisible }
+        onLoadingStateChange={ this._onPhotoLoadingStateChange }
+      />
+    );
+  }
+
   @autobind
   private _onRenderInitials(props: IPersonaProps): JSX.Element {
     let {

packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx

@@ -9,13 +9,15 @@ import { PersonaInitialsExample } from './examples/Persona.Initials.Example';
 import { PersonaBasicExample } from './examples/Persona.Basic.Example';
 import { PersonaAlternateExample } from './examples/Persona.Alternate.Example';
 import { PersonaCustomRenderExample } from './examples/Persona.CustomRender.Example';
+import { PersonaCustomCoinRenderExample } from './examples/Persona.CustomCoinRender.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { PersonaStatus } from './Persona.checklist';
 
 const PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx') as string;
 const PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx') as string;
 const PersonaAlternateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx') as string;
 const PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx') as string;
+const PersonaCustomCoinRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx') as string;
 
 export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -37,6 +39,9 @@ export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title='Rendering custom persona text' code={ PersonaCustomRenderExampleCode }>
               <PersonaCustomRenderExample />
             </ExampleCard>
+            <ExampleCard title='Rendering custom coin' code={ PersonaCustomCoinRenderExampleCode }>
+              <PersonaCustomCoinRenderExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import {
+  IPersonaProps,
+  Persona,
+  PersonaSize,
+  PersonaPresence
+} from 'office-ui-fabric-react/lib/Persona';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TestImages } from '../../../common/TestImages';
+import './PersonaExample.scss';
+import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
+const exampleStyles: any = exampleStylesImport;
+
+const examplePersona = {
+  imageUrl: TestImages.personaMale,
+  imageInitials: 'TR',
+  primaryText: 'Ted Randall',
+  secondaryText: 'Project Manager',
+  optionalText: 'Available at 4:00pm'
+};
+
+export class PersonaCustomCoinRenderExample extends React.Component {
+
+  public render() {
+    return (
+      <div className='ms-PersonaExample'>
+        <div className={ exampleStyles.exampleLabel }>Custom functional element in place of persona coin's image</div>
+        <Persona
+          { ...examplePersona }
+          size={ PersonaSize.size72 }
+          presence={ PersonaPresence.online }
+          onRenderCoin={ this._onRenderCoin }
+          imageAlt={ 'Custom Coin Image' }
+          coinSize={ 72 }
+        />
+      </div>
+    );
+  }
+
+  @autobind
+  private _onRenderCoin(props: IPersonaProps): JSX.Element {
+    let {
+      coinSize,
+      imageUrl,
+      imageAlt,
+    } = props;
+
+    return (
+      <div className='custom-example-coin'>
+        <img src={ imageUrl } alt={ imageAlt } width={ coinSize } height={ coinSize } />
+      </div>
+    );
+  }
+}

packages/office-ui-fabric-react/src/components/Persona/examples/PersonaExample.scss

@@ -10,4 +10,7 @@
   .example-label {
     margin: 10px 0;
   }
+  .custom-example-coin img {
+	border-radius: 20px;
+  }
 }