Initials for phone numbers

common/changes/@uifabric/utilities/initials-for-phonenumbers_2018-03-27-14-10.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "The initials logic used in calculating Persona initials now takes in a `allowPhoneInitials` param to allow for translating phone text to initials.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "khalle@microsoft.com"
+}

common/changes/office-ui-fabric-react/initials-for-phonenumbers_2018-03-27-14-10.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Persona: adding `allowPhoneInitials` prop to allow for calculating initials from phone numbers.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "khalle@microsoft.com"
+}

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

@@ -238,6 +238,13 @@ export interface IDocumentCardActivityPerson {
    */
   initials?: string;
 
+  /**
+   * Whether initials are calculated for phone numbers and number sequences.
+   * Example: Set property to true to get initials for project names consisting of numbers only.
+   * @defaultvalue false
+   */
+  allowPhoneInitials?: boolean;
+
   /**
    * The background color when the user's initials are displayed.
    * @defaultvalue PersonaInitialsColor.blue

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx

@@ -46,6 +46,7 @@ export class DocumentCardActivity extends BaseComponent<IDocumentCardActivityPro
           primaryText={ person.name }
           imageUrl={ person.profileImageSrc }
           initialsColor={ person.initialsColor }
+          allowPhoneInitials={ person.allowPhoneInitials }
           role='persentation'
           size={ PersonaSize.size32 }
         />

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

@@ -116,6 +116,7 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
         imageInitials={ persona.imageInitials }
         imageUrl={ persona.imageUrl }
         initialsColor={ persona.initialsColor }
+        allowPhoneInitials={ persona.allowPhoneInitials }
         primaryText={ persona.personaName }
         size={ personaSize }
         { ...(getPersonaProps ? getPersonaProps(persona) : null) }
@@ -130,6 +131,7 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
         imageInitials={ persona.imageInitials }
         imageUrl={ persona.imageUrl }
         initialsColor={ persona.initialsColor }
+        allowPhoneInitials={ persona.allowPhoneInitials }
         primaryText={ persona.personaName }
         size={ personaSize }
         { ...(getPersonaProps ? getPersonaProps(persona) : null) }

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

@@ -81,6 +81,13 @@ export interface IFacepilePersona extends React.ButtonHTMLAttributes<HTMLButtonE
    */
   imageInitials?: string;
 
+  /**
+   * Whether initials are calculated for phone numbers and number sequences.
+   * Example: Set property to true to get initials for project names consisting of numbers only.
+   * @defaultvalue false
+   */
+  allowPhoneInitials?: boolean;
+
   /**
    * The background color when the user's initials are displayed.
    * @defaultvalue [Derived from personaName]

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

@@ -51,6 +51,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
       imageAlt,
       imageInitials,
       initialsColor,
+      allowPhoneInitials,
       presence,
       primaryText,
       imageShouldFadeIn,
@@ -67,6 +68,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
       imageAlt,
       imageInitials,
       initialsColor,
+      allowPhoneInitials,
       presence,
       primaryText,
       imageShouldFadeIn,

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

@@ -51,6 +51,18 @@ describe('Persona', () => {
       expect(result.text()).toEqual('45');
       wrapper.unmount();
 
+      wrapper = mount(<Persona primaryText='+1 (555) 6789' />);
+      result = wrapper.find(STYLES.initials);
+      expect(result).toHaveLength(1);
+      expect(result.text()).toEqual('');
+      wrapper.unmount();
+
+      wrapper = mount(<Persona primaryText='+1 (555) 6789' allowPhoneInitials={true} />);
+      result = wrapper.find(STYLES.initials);
+      expect(result).toHaveLength(1);
+      expect(result.text()).toEqual('16');
+      wrapper.unmount();
+
       wrapper = mount(<Persona primaryText='David (The man) Goff' />);
       result = wrapper.find(STYLES.initials);
       expect(result).toHaveLength(1);

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

@@ -65,6 +65,13 @@ export interface IPersonaProps extends React.HTMLAttributes<PersonaBase> {
    */
   imageInitials?: string;
 
+  /**
+   * Whether initials are calculated for phone numbers and number sequences.
+   * Example: Set property to true to get initials for project names consisting of numbers only.
+   * @defaultvalue false
+   */
+  allowPhoneInitials?: boolean;
+
   /**
    * Optional custom renderer for the initials
    */

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

@@ -174,10 +174,11 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
   private _onRenderInitials = (props: IPersonaProps): JSX.Element => {
     let { imageInitials } = props;
     const { primaryText } = props;
+    const { allowPhoneInitials } = props;
 
     const isRTL = getRTL();
 
-    imageInitials = imageInitials || getInitials(primaryText, isRTL);
+    imageInitials = imageInitials || getInitials(primaryText, isRTL, allowPhoneInitials);
 
     return (
       imageInitials !== '' ?

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

@@ -25,13 +25,30 @@ export class PersonaInitialsExample extends React.Component<any, any> {
           { ...examplePersona  }
           primaryText='Kat Larrson'
         />
+        <Persona
+          { ...examplePersona  }
+          primaryText='Annie'
+        />
         <Persona
           { ...examplePersona  }
           primaryText='Annie Lindqvist'
         />
+        <Persona
+          { ...examplePersona  }
+          primaryText='Annie Boyl Lindqvist'
+        />
+        <Persona
+          { ...examplePersona  }
+          primaryText='Annie Boyl Carrie Lindqvist'
+        />
+        <Persona
+          { ...examplePersona  }
+          primaryText='+1 (555) 123-4567 X4567'
+        />
         <Persona
           { ...examplePersona  }
           primaryText='+1 (555) 123-4567 X4567'
+          allowPhoneInitials={true}
         />
         <Persona
           { ...examplePersona  }

packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.tsx

@@ -52,7 +52,7 @@ export class ListPeoplePicker extends MemberListPeoplePicker {
   };
 }
 
-export function createGenericItem(name: string, currentValidationState: ValidationState) {
+export function createGenericItem(name: string, currentValidationState: ValidationState, allowPhoneInitials: boolean) {
   const personaToConvert = {
     key: name,
     primaryText: name,
@@ -61,7 +61,7 @@ export function createGenericItem(name: string, currentValidationState: Validati
   };
 
   if (currentValidationState !== ValidationState.warning) {
-    personaToConvert.imageInitials = getInitials(name, getRTL());
+    personaToConvert.imageInitials = getInitials(name, getRTL(), allowPhoneInitials);
   }
 
   return personaToConvert;

packages/utilities/api/utilities.api.ts

@@ -131,7 +131,7 @@ export function getFirstFocusable(rootElement: HTMLElement,
 export function getId(prefix?: string): string;
 
 // @public
-export function getInitials(displayName: string | undefined | null, isRtl: boolean): string;
+export function getInitials(displayName: string | undefined | null, isRtl: boolean, allowPhoneInitials?: boolean): string;
 
 // @public
 export function getLanguage(): string | null;

packages/utilities/src/initials.test.ts

@@ -109,6 +109,15 @@ describe('getInitials', () => {
     result = getInitials('+47 12 34 56 78 (X 5678)', false);
     expect(result).toEqual('');
 
+    result = getInitials('+47 12 34 56 78 (X 5678)', false, true);
+    expect(result).toEqual('4');
+
+    result = getInitials('47 12 34', false, true);
+    expect(result).toEqual('43');
+
+    result = getInitials('47 12', false, true);
+    expect(result).toEqual('41');
+
     result = getInitials('1 Ext 2', false);
     expect(result).toEqual('');
 

packages/utilities/src/initials.ts

@@ -60,15 +60,22 @@ function cleanupDisplayName(displayName: string): string {
  *
  * @public
  */
-export function getInitials(displayName: string | undefined | null, isRtl: boolean): string {
+export function getInitials(
+  displayName: string | undefined | null,
+  isRtl: boolean,
+  allowPhoneInitials?: boolean,
+): string {
   if (!displayName) {
     return '';
   }
 
   displayName = cleanupDisplayName(displayName);
 
   // For names containing CJK characters, and phone numbers, we don't display initials
-  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || PHONENUMBER_REGEX.test(displayName)) {
+  if (
+    UNSUPPORTED_TEXT_REGEX.test(displayName) ||
+    (!allowPhoneInitials && PHONENUMBER_REGEX.test(displayName))
+  ) {
     return '';
   }