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

@@ -144,10 +144,14 @@ $ms-color-initials-darkRed:     #b91d47;
   border: 2px solid $ms-color-white;
 }
 
+.ms-Persona-detailsWithInnerControl,
 .ms-Persona-details {
   display: table-cell;
   padding: 0 12px;
   vertical-align: middle;
+}
+
+.ms-Persona-details {
   overflow: hidden;
 }
 
@@ -171,7 +175,8 @@ $ms-color-initials-darkRed:     #b91d47;
 
 .ms-Persona-secondaryText,
 .ms-Persona-tertiaryText,
-.ms-Persona-optionalText {
+.ms-Persona-optionalText,
+.ms-Persona-detailsWithInnerControl {
   color: $ms-color-neutralSecondary;
   font-family: $ms-font-family-regular;
   font-size: $ms-font-size-s;
@@ -183,6 +188,10 @@ $ms-color-initials-darkRed:     #b91d47;
   padding-top: 3px;
 }
 
+.ms-Persona-detailsWithInnerControl {
+  padding-top: 3px;
+}
+
 .ms-Persona-tertiaryText,
 .ms-Persona-optionalText {
   padding-top: 5px;
@@ -260,6 +269,10 @@ $ms-color-initials-darkRed:     #b91d47;
   .ms-Persona-secondaryText {
     display: none;
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -274,6 +287,10 @@ $ms-color-initials-darkRed:     #b91d47;
   .ms-Persona-primaryText:after {
     content: ';';
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -285,6 +302,10 @@ $ms-color-initials-darkRed:     #b91d47;
     width: 12px;
     top: 10px;
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -334,6 +355,9 @@ $ms-color-initials-darkRed:     #b91d47;
     width: 4px;
     left: 0;
   }
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -372,6 +396,10 @@ $ms-color-initials-darkRed:     #b91d47;
   .ms-Persona-secondaryText {
     padding-top: 1px;
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -383,6 +411,10 @@ $ms-color-initials-darkRed:     #b91d47;
     width: 4px;
     left: 0;
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -420,6 +452,10 @@ $ms-color-initials-darkRed:     #b91d47;
   .ms-Persona-tertiaryText {
     display: block; // Show tertiary text
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -431,6 +467,10 @@ $ms-color-initials-darkRed:     #b91d47;
     width: 7px;
     left: 0;
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -478,6 +518,10 @@ $ms-color-initials-darkRed:     #b91d47;
     padding-top: 5px;
     display: block; // Show tertiary and optional text
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 
@@ -489,6 +533,10 @@ $ms-color-initials-darkRed:     #b91d47;
     width: 9px;
     left: 0;
   }
+
+  .ms-Persona-detailsWithInnerControl {
+    display: none;
+  }
 }
 
 

src/components/Persona/Persona.tsx

@@ -23,7 +23,8 @@ 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, innerControl } = this.props;
+     let personaDetailsClass = innerControl ? 'ms-Persona-detailsWithInnerControl' : 'ms-Persona-details';
 
     return (
       <div { ... this.props as any } className={ css('ms-Persona', className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence]) }>
@@ -35,17 +36,19 @@ 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= { personaDetailsClass }>
             <div className='ms-Persona-primaryText'>{ primaryText }</div>
             { secondaryText ? (
               <div className='ms-Persona-secondaryText'>{ secondaryText }</div>
             ) : (null) }
             <div className='ms-Persona-tertiaryText'>{ tertiaryText }</div>
             <div className='ms-Persona-optionalText'>{ optionalText }</div>
-          </div>) }
-      </div>
+            { innerControl ? (
+              <div className='ms-Persona-detailsWithInnerControl'>{ innerControl }</div>
+            ) : (null) }
+            </div>) }
+          </div>
     );
   }
 }