Persona: complete mergeStyles conversion and some small refactoring, add some styling functions.

apps/vr-tests/src/stories/PeoplePicker.stories.tsx

@@ -60,9 +60,9 @@ const suggestionProps = {
   suggestionsContainerAriaLabel: 'Suggested contacts'
 };
 
-let getTextFromItem = (persona: IPersonaProps): string => persona.primaryText as string;
+const getTextFromItem = (persona: IPersonaProps): string => persona.primaryText as string;
 
-let getPeople = () => people;
+const getPeople = () => people;
 
 // Pickers that are 'disabled' are added before the Screener decorator because css classes for suggestion items won't exist
 storiesOf('PeoplePicker', module)

common/changes/@uifabric/styling/mergeStyles-persona-part2_2018-04-04-20-44.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Add noWrap style set.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/mergeStyles-persona-part2_2018-04-04-20-44.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Convert Persona and PersonaCoin and PersonaPresence to  mergeStyles. Create IPersonaSharedProps for props that apply to Persona and PersonaCoin and PersonaPresence. Other refactors.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/merge-styles/src/IRawStyleBase.ts

@@ -293,6 +293,16 @@ export interface IRawStyleBase extends IRawFontStyle {
    */
   backgroundBlendMode?: ICSSRule | string;
 
+  /**
+   * The background-clip CSS property specifies if an element's
+   * background, whether a <color> or an <image>, extends
+   * underneath its border.
+   *
+   * The `text` value is experimental and should not be used
+   * in production code.
+   */
+  backgroundClip?: ICSSRule | 'border-box' | 'padding-box' | 'content-box' | 'text';
+
   /**
    * Sets the background color of an element.
    */

packages/office-ui-fabric-react/src/PersonaCoin.ts

@@ -1,3 +1 @@
-export * from './components/Persona/PersonaCoin';
-export * from './components/Persona/Persona.types';
-export * from './components/Persona/PersonaConsts';
+export * from './components/Persona/index';

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

@@ -6,7 +6,7 @@ import { BaseComponent } from '../../Utilities';
 import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types';
 import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames';
 import { getStyles } from './ActivityItem.styles';
-import { PersonaSize, PersonaCoin, IPersonaProps } from '../../Persona';
+import { PersonaSize, PersonaCoin, IPersonaSharedProps } from '../../Persona';
 
 export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   constructor(props: IActivityItemProps) {
@@ -90,7 +90,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
     const classNames = this._getClassNames(props);
 
     let personaElement: JSX.Element | null = null;
-    const activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
+    const activityPersonas = props.activityPersonas as Array<IPersonaSharedProps & { key?: string | number }>;
     if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
       const personaList: Array<JSX.Element> = [];
       const showSize16Personas = (activityPersonas.length > 1 || props.isCompact);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IStyle } from '../../Styling';
 import { IRenderFunction } from '../../Utilities';
-import { IPersonaProps } from '../../Persona';
+import { IPersonaSharedProps } from '../../Persona';
 
 // Please keep alphabetized
 export interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement> {
@@ -24,7 +24,7 @@ export interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement>
   /**
    * If activityIcon is not set, then the persona props in this array will be used as the icon for the this activity item.
    */
-  activityPersonas?: Array<IPersonaProps>;
+  activityPersonas?: Array<IPersonaSharedProps>;
 
   /**
    * An element containing the text of comments or @mention messages. If no comments, commentText, or onRenderComments are included, no comments are shown.