diff --git a/common/changes/office-ui-fabric-react/unknownPersonaCoin_2018-05-08-13-17.json b/common/changes/office-ui-fabric-react/unknownPersonaCoin_2018-05-08-13-17.json new file mode 100644 index 00000000000000..3561fe5ee38761 --- /dev/null +++ b/common/changes/office-ui-fabric-react/unknownPersonaCoin_2018-05-08-13-17.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added support for special casing UnknownPersona coin", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "ivdijan@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx index 2f7b99c2ea72b5..9ca0e9d00ece3e 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx @@ -52,6 +52,7 @@ export class PersonaBase extends BaseComponent { allowPhoneInitials, className, coinProps, + showUnknownPersonaCoin, coinSize, getStyles, imageAlt, @@ -72,6 +73,7 @@ export class PersonaBase extends BaseComponent { const personaCoinProps: IPersonaSharedProps = { allowPhoneInitials, coinProps, + showUnknownPersonaCoin, coinSize, imageAlt, imageInitials, 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 b5183d0dece411..7381b24f81cb49 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 @@ -32,6 +32,12 @@ describe('Persona', () => { expect(tree).toMatchSnapshot(); }); + it('renders Persona correctly with UnknownPersona coin', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + describe('initials and colors', () => { it('calculates an expected initials in LTR if one was not specified', () => { let wrapper = mount(); 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 6d6de2f2bc90dd..1e552ce8fca2cc 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 @@ -108,6 +108,12 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { */ showSecondaryText?: boolean; + /** + * If true, show the special coin for unknown persona. + * It has '?' in place of initials, with static font and background colors + */ + showUnknownPersonaCoin?: boolean; + /** * Optional custom persona coin size in pixel. */ @@ -240,6 +246,11 @@ export interface IPersonaCoinStyleProps { * @defaultvalue PersonaSize.size48 */ size?: PersonaSize; + + /** + * Decides whether to display coin for unknown persona + */ + showUnknownPersonaCoin?: boolean; } export interface IPersonaCoinStyles { diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx index c411c653ec4735..624c85c745a0cd 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx @@ -80,6 +80,7 @@ export class PersonaCoinBase extends BaseComponent