diff --git a/common/changes/@uifabric/utilities/initials-for-phonenumbers_2018-03-27-14-10.json b/common/changes/@uifabric/utilities/initials-for-phonenumbers_2018-03-27-14-10.json
new file mode 100644
index 00000000000000..97edb5653eba14
--- /dev/null
+++ b/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"
+}
diff --git a/common/changes/office-ui-fabric-react/initials-for-phonenumbers_2018-03-27-14-10.json b/common/changes/office-ui-fabric-react/initials-for-phonenumbers_2018-03-27-14-10.json
new file mode 100644
index 00000000000000..912bbcd623b0e9
--- /dev/null
+++ b/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"
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
index 7a2631780b8da7..e4bf525b74408f 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
+++ b/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
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
index 4f08c7dae8db23..a39d134b7c1587 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
@@ -46,6 +46,7 @@ export class DocumentCardActivity extends BaseComponent
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
index 7ce346b1d1b27a..4552419f566528 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -116,6 +116,7 @@ export class Facepile extends BaseComponent {
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 {
imageInitials={ persona.imageInitials }
imageUrl={ persona.imageUrl }
initialsColor={ persona.initialsColor }
+ allowPhoneInitials={ persona.allowPhoneInitials }
primaryText={ persona.personaName }
size={ personaSize }
{ ...(getPersonaProps ? getPersonaProps(persona) : null) }
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts
index aa926f86c8e2e3..c78f5dcc3f819d 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts
@@ -81,6 +81,13 @@ export interface IFacepilePersona extends React.ButtonHTMLAttributes {
imageAlt,
imageInitials,
initialsColor,
+ allowPhoneInitials,
presence,
primaryText,
imageShouldFadeIn,
@@ -67,6 +68,7 @@ export class PersonaBase extends BaseComponent {
imageAlt,
imageInitials,
initialsColor,
+ allowPhoneInitials,
presence,
primaryText,
imageShouldFadeIn,
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
index cd67d25d91603b..90cf3890fd6b43 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
+++ b/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();
+ result = wrapper.find(STYLES.initials);
+ expect(result).toHaveLength(1);
+ expect(result.text()).toEqual('');
+ wrapper.unmount();
+
+ wrapper = mount();
+ result = wrapper.find(STYLES.initials);
+ expect(result).toHaveLength(1);
+ expect(result.text()).toEqual('16');
+ wrapper.unmount();
+
wrapper = mount();
result = wrapper.find(STYLES.initials);
expect(result).toHaveLength(1);
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
index 07c061f76b0818..5bab4a4d845037 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
@@ -65,6 +65,13 @@ export interface IPersonaProps extends React.HTMLAttributes {
*/
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
*/
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
index a2a4fc2d716bb6..62f2479832ac52 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
@@ -174,10 +174,11 @@ export class PersonaCoin extends React.Component {
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 !== '' ?
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx
index 549d016b6869b4..58f851002fd71e 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx
@@ -25,13 +25,30 @@ export class PersonaInitialsExample extends React.Component {
{ ...examplePersona }
primaryText='Kat Larrson'
/>
+
+
+
+
{
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('');
diff --git a/packages/utilities/src/initials.ts b/packages/utilities/src/initials.ts
index 387495adf44829..f1950c019d33c4 100644
--- a/packages/utilities/src/initials.ts
+++ b/packages/utilities/src/initials.ts
@@ -60,7 +60,11 @@ 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 '';
}
@@ -68,7 +72,10 @@ export function getInitials(displayName: string | undefined | null, isRtl: boole
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 '';
}