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 ''; }