adding an optional control property to the Persona control

src/components/Persona/Persona.Props.ts

@@ -40,6 +40,11 @@ export interface IPersonaProps extends React.HTMLProps<Persona> {
    */
   secondaryText?: string;
 
+  /**
+   *  Optional control to display/update, usually the role of the user.
+   */
+  innerControl?: JSX.Element;
+
   /**
    * Tertiary text to display, usually the status of the user.
    */

src/components/Persona/Persona.scss

@@ -148,7 +148,6 @@ $ms-color-initials-darkRed:     #b91d47;
   display: table-cell;
   padding: 0 12px;
   vertical-align: middle;
-  overflow: hidden;
 }
 
 .ms-Persona-primaryText,

src/components/Persona/Persona.tsx

@@ -23,9 +23,9 @@ export class Persona extends React.Component<IPersonaProps, any> {
   };
 
   public render() {
-    let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props;
+      let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props;
 
-    return (
+      return (
       <div { ... this.props as any } className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }>
         { size !== PersonaSize.tiny && (
           <div className='ms-Persona-imageArea'>
@@ -35,7 +35,6 @@ export class Persona extends React.Component<IPersonaProps, any> {
         ) }
 
         { presence !== PersonaPresence.none && <div className='ms-Persona-presence'></div> }
-
         { !hidePersonaDetails && (
           <div className='ms-Persona-details'>
             <div className='ms-Persona-primaryText'>{ primaryText }</div>
@@ -44,8 +43,9 @@ export class Persona extends React.Component<IPersonaProps, any> {
             ) : (null) }
             <div className='ms-Persona-tertiaryText'>{ tertiaryText }</div>
             <div className='ms-Persona-optionalText'>{ optionalText }</div>
-          </div>) }
-      </div>
+            { this.props.children }
+            </div>) }
+          </div>
     );
   }
 }