Skip to content

Unknown persona coin #4809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mtennoe merged 13 commits into from
May 9, 2018
Merged

Unknown persona coin #4809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f62c765
Merge pull request #1 from OfficeDev/master
ivdijan Jan 31, 2018
75a123b
Merge pull request #2 from OfficeDev/master
ivdijan Apr 20, 2018
f8aed2a
Merge remote-tracking branch 'upstream/master'
ivdijan May 8, 2018
5d35e1c
Fixed typo
ivdijan May 8, 2018
8377233
Added support for UnknownPersona special case to Persona and PersonaCoin
ivdijan May 8, 2018
4846342
Added changefiles
ivdijan May 8, 2018
1a9b30c
Revert "Fixed typo"
ivdijan May 8, 2018
08d3fe4
Revert "Added changefiles"
ivdijan May 8, 2018
a570c6a
Added changefile
ivdijan May 8, 2018
c3b9a3e
Added examples and a const for '?'
ivdijan May 8, 2018
fb15796
Changed to using question mark icon
ivdijan May 9, 2018
c4f95da
Fixed consecutive blank lines
ivdijan May 9, 2018
fe8ca80
Added snapshot test for unknown persona coin
ivdijan May 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/unknownPersonaCoin_2018-05-08-13-17.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Added support for special casing UnknownPersona coin",
"type": "minor"
Copy link
Member

@mtennoe mtennoe May 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its backwards compatible, so can be a patch

Copy link
Contributor Author

@ivdijan ivdijan May 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But it has a (non-breaking) API change, which qualifies it as minor according to https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/Contributing/ChangeFiles.md

Any API change should qualify as at least as a minor change. When you add a new API in a backward compatible manner. i.e. Use of the new API is optional.

Copy link
Member

@mtennoe mtennoe May 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I stand corrected!

}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
2 changes: 2 additions & 0 deletions packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
allowPhoneInitials,
className,
coinProps,
showUnknownPersonaCoin,
coinSize,
getStyles,
imageAlt,
Expand All @@ -72,6 +73,7 @@ export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
const personaCoinProps: IPersonaSharedProps = {
allowPhoneInitials,
coinProps,
showUnknownPersonaCoin,
coinSize,
imageAlt,
imageInitials,
Expand Down
6 changes: 6 additions & 0 deletions packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ describe('Persona', () => {
expect(tree).toMatchSnapshot();
});

it('renders Persona correctly with UnknownPersona coin', () => {
const component = renderer.create(<Persona primaryText='Kat Larrson' showUnknownPersonaCoin={true} />);
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(<Persona primaryText='Kat Larrson' />);
Expand Down
11 changes: 11 additions & 0 deletions packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,12 @@ export interface IPersonaSharedProps extends React.HTMLAttributes<PersonaBase> {
*/
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.
*/
Expand Down Expand Up @@ -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 {
Expand Down
15 changes: 11 additions & 4 deletions packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
const {
className,
coinProps,
showUnknownPersonaCoin,
coinSize,
getStyles,
imageUrl,
Expand All @@ -105,6 +106,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
theme: theme!,
className: (coinProps && coinProps.className) ? coinProps.className : className,
size,
showUnknownPersonaCoin,
});

return (
Expand All @@ -128,9 +130,7 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
<div
className={ mergeStyles(
classNames.initials,
{
backgroundColor: initialsColorPropToColorCode(this.props)
}
!showUnknownPersonaCoin && { backgroundColor: initialsColorPropToColorCode(this.props) }
) }
style={ coinSizeStyle }
aria-hidden='true'
Expand Down Expand Up @@ -166,13 +166,15 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
imageShouldFadeIn,
imageShouldStartVisible,
theme,
showUnknownPersonaCoin,
} = this.props;

const size = this.props.size as PersonaSize;

const classNames = getClassNames(getStyles, {
theme: theme!,
size
size,
showUnknownPersonaCoin
});

return (
Expand All @@ -195,8 +197,13 @@ export class PersonaCoinBase extends BaseComponent<IPersonaCoinProps, IPersonaSt
const {
allowPhoneInitials,
primaryText,
showUnknownPersonaCoin
} = props;

if (showUnknownPersonaCoin) {
return <Icon iconName='Help' />;
}

const isRTL = getRTL();

imageInitials = imageInitials || getInitials(primaryText, isRTL, allowPhoneInitials);
Expand Down
10 changes: 9 additions & 1 deletion packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ export const getStyles = (

const classNames = getGlobalClassNames(GlobalClassNames, theme);

// Static colors used when displaying 'unknown persona' coin
const unknownPersonaBackgroundColor = palette.neutralLight;
const unknownPersonaFontColor = palette.redDark;

return ({
coin: [
classNames.coin,
Expand Down Expand Up @@ -181,7 +185,7 @@ export const getStyles = (
classNames.initials,
{
borderRadius: '50%',
color: palette.white,
color: props.showUnknownPersonaCoin ? unknownPersonaFontColor : palette.white,
fontSize: FontSizes.large,
fontWeight: FontWeights.regular,
lineHeight: '46px',
Expand All @@ -198,6 +202,10 @@ export const getStyles = (
}
},

props.showUnknownPersonaCoin && {
backgroundColor: unknownPersonaBackgroundColor
},

(size.isSize16 || size.isSize24 || size.isSize28) && {
fontSize: FontSizes.xSmall,
},
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { PersonaBasicExample } from './examples/Persona.Basic.Example';
import { PersonaAlternateExample } from './examples/Persona.Alternate.Example';
import { PersonaCustomRenderExample } from './examples/Persona.CustomRender.Example';
import { PersonaCustomCoinRenderExample } from './examples/Persona.CustomCoinRender.Example';
import { UnknownPersonaExample } from './examples/Persona.UnknownPersona.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { PersonaStatus } from './Persona.checklist';

Expand All @@ -19,6 +20,7 @@ const PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/
const PersonaAlternateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx') as string;
const PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx') as string;
const PersonaCustomCoinRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx') as string;
const UnknownPersonaExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.UnknownPersona.Example.tsx') as string;

export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
public render(): JSX.Element {
Expand All @@ -44,6 +46,9 @@ export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
<ExampleCard title='Rendering custom coin' code={ PersonaCustomCoinRenderExampleCode }>
<PersonaCustomCoinRenderExample />
</ExampleCard>
<ExampleCard title='Rendering unknown persona coin' code={ UnknownPersonaExampleCode }>
<UnknownPersonaExample />
</ExampleCard>
</div>
}
allowNativeProps={ true }
Expand Down
Loading