diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 88e721384038c1..b2deeb36d54273 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -17,6 +17,23 @@ "kind": "build", "isDefault": true } + }, + { + "label": "Typescript (vr-tests) watch", + "type": "process", + "command": "node", + "args": [ + "./scripts/node_modules/typescript/bin/tsc", + "-p", + "apps/vr-tests/tsconfig.json", + "-w", + "--noEmit" + ], + "problemMatcher": "$tsc", + "group": { + "kind": "build", + "isDefault": true + } } ] } \ No newline at end of file diff --git a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx index 8acb13aeae8b24..774872c014cbcb 100644 --- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx +++ b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx @@ -12,7 +12,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 1, imageUrl: TestImages.personaFemale, imageInitials: 'PV', - primaryText: 'Annie Lindqvist', + text: 'Annie Lindqvist', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -22,7 +22,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 2, imageUrl: TestImages.personaMale, imageInitials: 'AR', - primaryText: 'Aaron Reid', + text: 'Aaron Reid', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -32,7 +32,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 3, imageUrl: TestImages.personaMale, imageInitials: 'AL', - primaryText: 'Alex Lundberg', + text: 'Alex Lundberg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -42,7 +42,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 4, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Roko Kolar', + text: 'Roko Kolar', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -52,7 +52,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 5, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Alex Lundberg1', + text: 'Alex Lundberg1', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -62,7 +62,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 6, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Alex Lundberg2', + text: 'Alex Lundberg2', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -72,7 +72,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 7, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Alex Lundberg2', + text: 'Alex Lundberg2', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -82,7 +82,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 8, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Alex Lundberg3', + text: 'Alex Lundberg3', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -92,7 +92,7 @@ const people: (IPersonaProps & { key: string | number })[] = [ key: 9, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Alex Lundberg4', + text: 'Alex Lundberg4', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -110,7 +110,7 @@ const suggestionProps = { suggestionsContainerAriaLabel: 'Suggested contacts' }; -const getTextFromItem = (persona: IPersonaProps): string => persona.primaryText as string; +const getTextFromItem = (persona: IPersonaProps): string => persona.text as string; const getPeople = () => people; diff --git a/apps/vr-tests/src/stories/Persona.stories.tsx b/apps/vr-tests/src/stories/Persona.stories.tsx index 2ae265794024c4..4abc7366b3a63f 100644 --- a/apps/vr-tests/src/stories/Persona.stories.tsx +++ b/apps/vr-tests/src/stories/Persona.stories.tsx @@ -3,13 +3,13 @@ import * as React from 'react'; import Screener, { Steps } from 'screener-storybook/src/screener'; import { storiesOf } from '@storybook/react'; import { FabricDecorator } from '../utilities'; -import { Persona, PersonaPresence, PersonaSize } from 'office-ui-fabric-react'; +import { IPersonaProps, Persona, PersonaPresence, PersonaSize } from 'office-ui-fabric-react'; import { TestImages } from '../common/TestImages'; -const examplePersona = { +const examplePersona: IPersonaProps = { imageUrl: TestImages.personaFemale, imageInitials: 'AL', - primaryText: 'Annie Lindqvist', + text: 'Annie Lindqvist', secondaryText: 'Software Engineer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm' @@ -104,37 +104,37 @@ storiesOf('Persona', module)
diff --git a/common/changes/office-ui-fabric-react/jagore-deprecate-persona-primaryText_2018-05-08-17-37.json b/common/changes/office-ui-fabric-react/jagore-deprecate-persona-primaryText_2018-05-08-17-37.json new file mode 100644 index 00000000000000..1cce82534f6df1 --- /dev/null +++ b/common/changes/office-ui-fabric-react/jagore-deprecate-persona-primaryText_2018-05-08-17-37.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Deprecate Persona's primaryText prop and add replacement text prop.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jagore@microsoft.com" +} \ No newline at end of file diff --git a/ghdocs/BestPractices/Deprecation.md b/ghdocs/BestPractices/Deprecation.md new file mode 100644 index 00000000000000..873adaf3b59d39 --- /dev/null +++ b/ghdocs/BestPractices/Deprecation.md @@ -0,0 +1,60 @@ +# Deprecation Guidelines + +This guide outlines recommendations for deprecating API behavior, particularly related to component props. + +An example PR following these steps can be found here: +**https://github.com/OfficeDev/office-ui-fabric-react/pull/4811** + +## Deprecation Steps +1. Ensure snapshot tests exist covering existing props functionality as a reference check against deprecation changes. + - The props you're deprecating should have representation in the snapshot output. Sometimes this may require getting the component under test into a certain state. +1. Keep the tests using deprecated props named in a file with deprecated suffix, such as `Persona.test.tsx` -> `Persona.deprecated.test.tsx`. +1. Copy the test's snapshot output (or ensure it's the same if regenerated.) +1. Modify existing tests to use new prop. + - Snapshot output should be identical in most cases, particularly if props naming is the only thing changing. +1. Add new property to interface. +1. Optionally, temporarily comment out old prop to help find all uses throughout code base and change. Take care that as of writing some uses are not covered by TypeScript as part of build, such as some objects created in tests without type declaration and Screener tests in `apps/vr-tests`. + - If you use VS Code, there is a task available to help aid called `Typescript (vr-tests) watch` which you can run via `Tasks -> Run Task`. You may have to rebuild occasionally to get the types reflected across packages correctly. +1. Update components that consume property as needed to support both deprecated and new props. + - Be sure to consider other components that both use and extend the modified interface. If a component needed a change, there's a good chance it will also need to continue supporting the deprecated prop and should also have deprected tests. +1. Move deprecated prop to end of interface, update comments with deprecation description and add @deprecated. + + ```tsx + /** + * Primary text to display, usually the name of the person. + * @deprecated Use 'text' instead. + */ + primaryText?: string; + ``` + +1. Make sure old and new tests pass. +1. Add call to warnDeprecations in constructor, like: + + ```tsx + constructor(props: IPersonaCoinProps) { + super(props); + + // 'primaryText' is deprecated and 'text' should be used instead + this._warnDeprecations({ 'primaryText': 'text' }); + } + ``` +1. warnDeprecations will most likely cause deprecated tests to fail, requiring mocking of warnDeprecations. Please make note to clear mock at end of tests as shown below. + + ```tsx + import * as WarnUtil from '@uifabric/utilities/lib/warn'; + + describe('MyTests', () => { + beforeAll(() => { + // Prevent warn deprecations from failing test + jest.spyOn(WarnUtil, 'warnDeprecations').mockImplementation(() => { /** no impl **/ }); + }); + + afterAll(() => { + jest.restoreAllMocks(); + }); + + // tests ... + }); + ``` + + diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx index 56359571948d50..21d89ded125e07 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx @@ -4,6 +4,7 @@ import * as renderer from 'react-test-renderer'; import { ActivityItem } from './ActivityItem'; import { Icon } from '../../Icon'; import { TestImages } from '../../common/TestImages'; +import { IPersonaSharedProps } from '../Persona'; const defaultProps = { key: 1, @@ -12,17 +13,17 @@ const defaultProps = { timeStamp: 'timestamp text' }; -const defaultPersonaProps = [ +const defaultPersonaProps: IPersonaSharedProps[] = [ { imageInitials: 'TN', - primaryText: 'Test Name' + text: 'Test Name' }, { imageUrl: TestImages.personaFemale }, { imageInitials: 'AN', - primaryText: 'Another Name' + text: 'Another Name' }, { imageUrl: TestImages.personaMale diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx index f7aa6cf9eeb5df..252d0b494e5427 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx @@ -39,14 +39,14 @@ export class ActivityItemCompactExample extends React.Component; + return ; } } 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 9c97de8423c4c9..d13b50b5822078 100644 --- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx +++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx @@ -44,7 +44,7 @@ export class DocumentCardActivity extends BaseComponent { @@ -227,7 +227,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP private _onCopyItems(items: IExtendedPersonaProps[]): string { let copyText = ''; items.forEach((item: IExtendedPersonaProps, index: number) => { - copyText += item.primaryText; + copyText += item.text; if (index < items.length - 1) { copyText += ', '; @@ -255,11 +255,11 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP if (!personas || !personas.length || personas.length === 0) { return false; } - return personas.filter((item: IPersonaProps) => item.primaryText === persona.primaryText).length > 0; + return personas.filter((item: IPersonaProps) => item.text === persona.text).length > 0; } private _filterPersonasByText(filterText: string): IPersonaProps[] { - return this.state.peopleList.filter((item: IPersonaProps) => this._doesTextStartWith(item.primaryText as string, filterText)); + return this.state.peopleList.filter((item: IPersonaProps) => this._doesTextStartWith(item.text as string, filterText)); } private _doesTextStartWith(text: string, filterText: string): boolean { @@ -275,7 +275,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } private _getTextFromItem(persona: IPersonaProps): string { - return persona.primaryText as string; + return persona.text as string; } private _convertResultsToPromise(results: IPersonaProps[]): Promise { @@ -294,7 +294,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } private _getExpandedGroupItems(item: IExtendedPersonaProps): IExtendedPersonaProps[] { - switch (item.primaryText) { + switch (item.text) { case 'Group One': return groupOne; case 'Group Two': diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/examples/PeopleExampleData.ts b/packages/office-ui-fabric-react/src/components/ExtendedPicker/examples/PeopleExampleData.ts index 6053d0c96e49b6..c462f715f6dfc3 100644 --- a/packages/office-ui-fabric-react/src/components/ExtendedPicker/examples/PeopleExampleData.ts +++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/examples/PeopleExampleData.ts @@ -7,7 +7,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 1, imageUrl: TestImages.personaFemale, imageInitials: 'PV', - primaryText: 'Annie Lindqvist', + text: 'Annie Lindqvist', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -18,7 +18,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 2, imageUrl: TestImages.personaMale, imageInitials: 'AR', - primaryText: 'Aaron Reid', + text: 'Aaron Reid', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -29,7 +29,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 3, imageUrl: TestImages.personaMale, imageInitials: 'AL', - primaryText: 'Alex Lundberg', + text: 'Alex Lundberg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -40,7 +40,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 4, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Roko Kolar', + text: 'Roko Kolar', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -51,7 +51,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 5, imageUrl: TestImages.personaMale, imageInitials: 'CB', - primaryText: 'Christian Bergqvist', + text: 'Christian Bergqvist', secondaryText: 'Sr. Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -62,7 +62,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 6, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valentina Lovric', + text: 'Valentina Lovric', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -73,7 +73,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 7, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharett', + text: 'Maor Sharett', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -84,7 +84,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 8, imageUrl: TestImages.personaFemale, imageInitials: 'PV', - primaryText: 'Anny Lindqvist', + text: 'Anny Lindqvist', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -95,7 +95,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 9, imageUrl: TestImages.personaMale, imageInitials: 'AR', - primaryText: 'Aron Reid', + text: 'Aron Reid', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -106,7 +106,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 10, imageUrl: TestImages.personaMale, imageInitials: 'AL', - primaryText: 'Alix Lundberg', + text: 'Alix Lundberg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -117,7 +117,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 11, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Roko Kular', + text: 'Roko Kular', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -129,7 +129,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 12, imageUrl: TestImages.personaMale, imageInitials: 'CB', - primaryText: 'Christian Bergqvest', + text: 'Christian Bergqvest', secondaryText: 'Sr. Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -140,7 +140,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 13, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valintina Lovric', + text: 'Valintina Lovric', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -151,7 +151,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 14, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharet', + text: 'Maor Sharet', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -162,7 +162,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 15, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Anny Lindqvest', + text: 'Anny Lindqvest', secondaryText: 'SDE', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -173,7 +173,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 16, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Alix Lunberg', + text: 'Alix Lunberg', secondaryText: 'SE', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -184,7 +184,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 17, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Annie Lindqvest', + text: 'Annie Lindqvest', secondaryText: 'SDET', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -195,7 +195,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 18, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Alixander Lundberg', + text: 'Alixander Lundberg', secondaryText: 'Senior Manager of SDET', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -206,7 +206,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 19, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Anny Lundqvist', + text: 'Anny Lundqvist', secondaryText: 'Junior Manager of Software', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -217,7 +217,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 20, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Shorett', + text: 'Maor Shorett', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -228,7 +228,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 21, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valentina Lovrics', + text: 'Valentina Lovrics', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -239,7 +239,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 22, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharet', + text: 'Maor Sharet', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -250,7 +250,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 23, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valentina Lovrecs', + text: 'Valentina Lovrecs', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -261,7 +261,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 24, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharitt', + text: 'Maor Sharitt', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -272,7 +272,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 25, imageUrl: './images/persona-male.png', imageInitials: 'MS', - primaryText: 'Maor Shariett', + text: 'Maor Shariett', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 3:00pm', @@ -283,7 +283,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 26, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Alix Lundburg', + text: 'Alix Lundburg', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 3:00pm', @@ -294,7 +294,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 27, imageUrl: './images/persona-female.png', imageInitials: 'VL', - primaryText: 'Valantena Lovric', + text: 'Valantena Lovric', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -305,7 +305,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 28, imageUrl: './images/persona-female.png', imageInitials: 'VL', - primaryText: 'Velatine Lourvric', + text: 'Velatine Lourvric', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -316,7 +316,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 29, imageUrl: './images/persona-female.png', imageInitials: 'VL', - primaryText: 'Valentyna Lovrique', + text: 'Valentyna Lovrique', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -327,7 +327,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 30, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Annie Lindquest', + text: 'Annie Lindquest', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -338,7 +338,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 31, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Anne Lindquist', + text: 'Anne Lindquist', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -349,7 +349,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 32, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Ann Lindqiest', + text: 'Ann Lindqiest', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -360,7 +360,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 33, imageUrl: './images/persona-male.png', imageInitials: 'AR', - primaryText: 'Aron Reid', + text: 'Aron Reid', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -371,7 +371,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 34, imageUrl: './images/persona-male.png', imageInitials: 'AR', - primaryText: 'Aaron Reed', + text: 'Aaron Reed', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -382,7 +382,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 35, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Alix Lindberg', + text: 'Alix Lindberg', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -393,7 +393,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 36, imageUrl: './images/persona-male.png', imageInitials: 'AL', - primaryText: 'Alan Lindberg', + text: 'Alan Lindberg', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -404,7 +404,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 37, imageUrl: './images/persona-male.png', imageInitials: 'MS', - primaryText: 'Maor Sharit', + text: 'Maor Sharit', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -415,7 +415,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 38, imageUrl: './images/persona-male.png', imageInitials: 'MS', - primaryText: 'Maorr Sherit', + text: 'Maorr Sherit', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -426,7 +426,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 39, imageUrl: './images/persona-male.png', imageInitials: 'AL', - primaryText: 'Alex Lindbirg', + text: 'Alex Lindbirg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -437,7 +437,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ key: 40, imageUrl: './images/persona-male.png', imageInitials: 'AL', - primaryText: 'Alex Lindbarg', + text: 'Alex Lindbarg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -447,14 +447,14 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [ { key: 41, imageInitials: 'GO', - primaryText: 'Group One', + text: 'Group One', canExpand: true, isValid: true, }, { key: 42, imageInitials: 'GT', - primaryText: 'Group Two', + text: 'Group Two', canExpand: true, isValid: true, }, 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 7b06adfae94ae6..14ba98c050f604 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx @@ -117,7 +117,7 @@ export class Facepile extends BaseComponent { imageUrl={ persona.imageUrl } initialsColor={ persona.initialsColor } allowPhoneInitials={ persona.allowPhoneInitials } - primaryText={ persona.personaName } + text={ persona.personaName } size={ personaSize } { ...(getPersonaProps ? getPersonaProps(persona) : null) } /> @@ -132,7 +132,7 @@ export class Facepile extends BaseComponent { imageUrl={ persona.imageUrl } initialsColor={ persona.initialsColor } allowPhoneInitials={ persona.allowPhoneInitials } - primaryText={ persona.personaName } + text={ persona.personaName } size={ personaSize } { ...(getPersonaProps ? getPersonaProps(persona) : null) } /> diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx index bd9cfebbf80e1a..a2e1b017208945 100644 --- a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx @@ -110,7 +110,7 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } private _onPickerChange = (selectedSuggestion: IPersonaProps): void => { - this.setState({ searchValue: selectedSuggestion.primaryText ? selectedSuggestion.primaryText : '' }); + this.setState({ searchValue: selectedSuggestion.text ? selectedSuggestion.text : '' }); this._picker.hidePicker(); } @@ -144,18 +144,18 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } private _getTextFromItem(persona: IPersonaProps): string { - return persona.primaryText as string; + return persona.text as string; } private _listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]): boolean { if (!personas || !personas.length || personas.length === 0) { return false; } - return personas.filter((item: IPersonaProps) => item.primaryText === persona.primaryText).length > 0; + return personas.filter((item: IPersonaProps) => item.text === persona.text).length > 0; } private _filterPersonasByText(filterText: string): IPersonaProps[] { - return this.state.peopleList.filter((item: IPersonaProps) => this._doesTextStartWith(item.primaryText as string, filterText)); + return this.state.peopleList.filter((item: IPersonaProps) => this._doesTextStartWith(item.text as string, filterText)); } private _doesTextStartWith(text: string, filterText: string): boolean { 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 9ca0e9d00ece3e..479c1d6a2e9781 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 @@ -27,7 +27,6 @@ const getClassNames = classNamesFunction(); @customizable('Persona', ['theme']) export class PersonaBase extends BaseComponent { public static defaultProps: IPersonaProps = { - primaryText: '', size: PersonaSize.size48, presence: PersonaPresenceEnum.none, imageAlt: '' @@ -35,6 +34,8 @@ export class PersonaBase extends BaseComponent { constructor(props: IPersonaProps) { super(props); + + this._warnDeprecations({ 'primaryText': 'text' }); } public render(): JSX.Element { @@ -65,7 +66,6 @@ export class PersonaBase extends BaseComponent { onRenderCoin, onRenderInitials, presence, - primaryText, showSecondaryText, theme, } = this.props; @@ -85,8 +85,8 @@ export class PersonaBase extends BaseComponent { onRenderCoin, onRenderInitials, presence, - primaryText, size, + text: this._getText() }; const classNames = getClassNames(getStyles, { @@ -101,7 +101,7 @@ export class PersonaBase extends BaseComponent { const personaDetails = (
{ this._renderElement( - this.props.primaryText, + this._getText(), classNames.primaryText, onRenderPrimaryText) } { this._renderElement( @@ -132,6 +132,13 @@ export class PersonaBase extends BaseComponent { ); } + /** + * Deprecation helper for getting text. + */ + private _getText(): string { + return this.props.text || this.props.primaryText || ''; + } + private _renderElement = (text: string | undefined, className: string, render?: IRenderFunction): JSX.Element => { return (
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.deprecated.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.deprecated.test.tsx new file mode 100644 index 00000000000000..37e45fa590c0bd --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.deprecated.test.tsx @@ -0,0 +1,125 @@ +/* tslint:disable-next-line:no-unused-variable */ +import * as React from 'react'; +import * as renderer from 'react-test-renderer'; +import * as WarnUtil from '@uifabric/utilities/lib/warn'; +import { setRTL } from '../../Utilities'; +import { Persona } from './Persona'; +import { mount, ReactWrapper } from 'enzyme'; +import { getIcon } from '../../Styling'; + +const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII='; +const STYLES = { + green: '.ms-Persona-initials--green', + initials: '.ms-Persona-initials', + black: '.ms-Persona-initials--black', + red: '.ms-Persona-initials--red', + +}; + +describe('Persona', () => { + beforeEach(() => { + setRTL(false); + }); + + beforeAll(() => { + // Prevent warn deprecations from failing test + jest.spyOn(WarnUtil, 'warnDeprecations').mockImplementation(() => { /** no impl **/ }); + }); + + afterAll(() => { + jest.restoreAllMocks(); + }); + + it('renders Persona correctly with no props', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders Persona correctly with initials', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders Persona correctly with image', () => { + 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(); + let result = wrapper.find(STYLES.initials); + expect(result).toHaveLength(1); + expect(result.text()).toEqual('KL'); + wrapper.unmount(); + + wrapper = mount(); + result = wrapper.find(STYLES.initials); + expect(result).toHaveLength(1); + expect(result.text()).toEqual('DZ'); + wrapper.unmount(); + + wrapper = mount(); + result = wrapper.find(STYLES.initials); + expect(result).toHaveLength(1); + expect(result.text()).toEqual('45'); + wrapper.unmount(); + + wrapper = mount(); + result = wrapper.find(STYLES.initials); + expect(result).toHaveLength(1); + expect(result.text()).toEqual(getIcon('contact')!.code); + 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); + expect(result.text()).toEqual('DG'); + }); + + it('calculates an expected initials in RTL if one was not specified', () => { + setRTL(true); + const wrapper = mount(); + const result = wrapper.find(STYLES.initials); + expect(result).toHaveLength(1); + expect(result.text()).toEqual('LK'); + + setRTL(false); + }); + + it('uses provided initial', () => { + setRTL(true); + const wrapper = mount(); + const result = wrapper.find(STYLES.initials); + expect(result).toHaveLength(1); + expect(result.text()).toEqual('AT'); + + setRTL(false); + }); + }); + + describe('image', () => { + it('renders empty alt text by default', () => { + const wrapper = mount(); + const image: ReactWrapper, any> = wrapper.find('ImageBase'); + + expect(image.props().alt).toEqual(''); + }); + + it('renders its given alt text', () => { + const wrapper = mount(); + const image: ReactWrapper, any> = wrapper.find('ImageBase'); + + expect(image.props().alt).toEqual('ALT TEXT'); + }); + }); +}); 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 7381b24f81cb49..f23010921139d2 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 @@ -20,57 +20,63 @@ describe('Persona', () => { setRTL(false); }); + it('renders Persona correctly with no props', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + it('renders Persona correctly with initials', () => { - const component = renderer.create(); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders Persona correctly with image', () => { - const component = renderer.create(); + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders Persona correctly with UnknownPersona coin', () => { - const component = renderer.create(); + 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(); + let wrapper = mount(); let result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('KL'); wrapper.unmount(); - wrapper = mount(); + wrapper = mount(); result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('DZ'); wrapper.unmount(); - wrapper = mount(); + wrapper = mount(); result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('45'); wrapper.unmount(); - wrapper = mount(); + wrapper = mount(); result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual(getIcon('contact')!.code); wrapper.unmount(); - wrapper = mount(); + wrapper = mount(); result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('16'); wrapper.unmount(); - wrapper = mount(); + wrapper = mount(); result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('DG'); @@ -78,7 +84,7 @@ describe('Persona', () => { it('calculates an expected initials in RTL if one was not specified', () => { setRTL(true); - const wrapper = mount(); + const wrapper = mount(); const result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('LK'); @@ -88,7 +94,7 @@ describe('Persona', () => { it('uses provided initial', () => { setRTL(true); - const wrapper = mount(); + const wrapper = mount(); const result = wrapper.find(STYLES.initials); expect(result).toHaveLength(1); expect(result.text()).toEqual('AT'); @@ -99,14 +105,14 @@ describe('Persona', () => { describe('image', () => { it('renders empty alt text by default', () => { - const wrapper = mount(); + const wrapper = mount(); const image: ReactWrapper, any> = wrapper.find('ImageBase'); expect(image.props().alt).toEqual(''); }); it('renders its given alt text', () => { - const wrapper = mount(); + const wrapper = mount(); const image: ReactWrapper, any> = wrapper.find('ImageBase'); expect(image.props().alt).toEqual('ALT TEXT'); 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 1e552ce8fca2cc..473bca6d775faf 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 @@ -13,7 +13,7 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { /** * Primary text to display, usually the name of the person. */ - primaryText?: string; + text?: string; /** * Decides the size of the control. @@ -50,7 +50,7 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { /** * The user's initials to display in the image area when there is no image. - * @defaultvalue [Derived from primaryText] + * @defaultvalue [Derived from text] */ imageInitials?: string; @@ -73,7 +73,7 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { /** * The background color when the user's initials are displayed. - * @defaultvalue [Derived from primaryText] + * @defaultvalue [Derived from text] */ initialsColor?: PersonaInitialsColor | string; @@ -128,6 +128,12 @@ export interface IPersonaSharedProps extends React.HTMLAttributes { * Theme provided by High-Order Component. */ theme?: ITheme; + + /** + * Primary text to display, usually the name of the person. + * @deprecated Use 'text' instead. + */ + primaryText?: string; } export interface IPersonaProps extends IPersonaSharedProps { 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 624c85c745a0cd..6b967a68f4485c 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 @@ -61,7 +61,6 @@ export interface IPersonaState { @customizable('PersonaCoin', ['theme']) export class PersonaCoinBase extends BaseComponent { public static defaultProps: IPersonaCoinProps = { - primaryText: '', size: PersonaSize.size48, presence: PersonaPresenceEnum.none, imageAlt: '', @@ -70,6 +69,8 @@ export class PersonaCoinBase extends BaseComponent { let { imageInitials } = props; const { allowPhoneInitials, - primaryText, showUnknownPersonaCoin } = props; @@ -206,7 +213,7 @@ export class PersonaCoinBase extends BaseComponent { + beforeEach(() => { + setRTL(false); + }); + + beforeAll(() => { + // Prevent warn deprecations from failing test + jest.spyOn(WarnUtil, 'warnDeprecations').mockImplementation(() => { /** no impl **/ }); + }); + + afterAll(() => { + jest.restoreAllMocks(); + }); + + it('renders correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders correctly with text', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders correctly with provided initials', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders correctly with image', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx new file mode 100644 index 00000000000000..553d833bc67165 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx @@ -0,0 +1,37 @@ +/* tslint:disable-next-line:no-unused-variable */ +import * as React from 'react'; +import * as renderer from 'react-test-renderer'; +import { setRTL } from '../../../Utilities'; +import { PersonaCoin } from './PersonaCoin'; + +const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII='; + +describe('PersonaCoin', () => { + beforeEach(() => { + setRTL(false); + }); + + it('renders correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders correctly with text', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders correctly with provided initials', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders correctly with image', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.deprecated.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.deprecated.test.tsx.snap new file mode 100644 index 00000000000000..53ac4bb3ba8988 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.deprecated.test.tsx.snap @@ -0,0 +1,378 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PersonaCoin renders correctly 1`] = ` +
+
+ +
+ +
+
+
+`; + +exports[`PersonaCoin renders correctly with image 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`PersonaCoin renders correctly with provided initials 1`] = ` +
+
+ +
+ +
+
+
+`; + +exports[`PersonaCoin renders correctly with text 1`] = ` +
+
+ +
+ +
+
+
+`; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap new file mode 100644 index 00000000000000..53ac4bb3ba8988 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin/__snapshots__/PersonaCoin.test.tsx.snap @@ -0,0 +1,378 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PersonaCoin renders correctly 1`] = ` +
+
+ +
+ +
+
+
+`; + +exports[`PersonaCoin renders correctly with image 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`PersonaCoin renders correctly with provided initials 1`] = ` +
+
+ +
+ +
+
+
+`; + +exports[`PersonaCoin renders correctly with text 1`] = ` +
+
+ +
+ +
+
+
+`; diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.test.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.test.ts index e025e390afa4a8..e0e798a9922aaa 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.test.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.test.ts @@ -3,20 +3,20 @@ import { PersonaInitialsColor } from './Persona.types'; describe('PersonaInitialsColor tests', () => { it('renders gets the correct colors if none was provided', () => { - const colorCode = initialsColorPropToColorCode({ primaryText: 'Kat Larrson' }); + const colorCode = initialsColorPropToColorCode({ text: 'Kat Larrson' }); expect(colorCode).toEqual('#1D1D1D'); - const colorCode2 = initialsColorPropToColorCode({ primaryText: 'Annie Lindqvist' }); + const colorCode2 = initialsColorPropToColorCode({ text: 'Annie Lindqvist' }); expect(colorCode2).toEqual('#00A300'); }); it('uses provided enum initialsColor if one was specified', () => { - const colorCode = initialsColorPropToColorCode({ primaryText: 'Kat Larrson', initialsColor: PersonaInitialsColor.red }); + const colorCode = initialsColorPropToColorCode({ text: 'Kat Larrson', initialsColor: PersonaInitialsColor.red }); expect(colorCode).toEqual('#EE1111'); }); it('uses provided string initialsColor if one was specified', () => { - const colorCode = initialsColorPropToColorCode({ primaryText: 'Christian Gonzalez', initialsColor: 'blue' }); + const colorCode = initialsColorPropToColorCode({ text: 'Christian Gonzalez', initialsColor: 'blue' }); expect(colorCode).toEqual('blue'); }); }); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts index b934ecbd4b5da9..a861958cb78695 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts @@ -82,13 +82,13 @@ function personaInitialsColorToHexCode(personaInitialsColor: PersonaInitialsColo } export function initialsColorPropToColorCode(props: IPersonaProps): string { - const { primaryText } = props; + const { primaryText, text } = props; let { initialsColor } = props; let initialsColorCode: string; if (typeof initialsColor === 'string') { initialsColorCode = initialsColor; } else { - initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(primaryText); + initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(text || primaryText); initialsColorCode = personaInitialsColorToHexCode(initialsColor); } diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap new file mode 100644 index 00000000000000..17d2671996323a --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.deprecated.test.tsx.snap @@ -0,0 +1,608 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Persona renders Persona correctly with image 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+ Kat Larrson +
+
+
+
+
+
+
+`; + +exports[`Persona renders Persona correctly with initials 1`] = ` +
+
+
+ +
+ +
+
+
+
+
+
+ Kat Larrson +
+
+
+
+
+
+
+`; + +exports[`Persona renders Persona correctly with no props 1`] = ` +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+`; diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap index 6897808a0fd46b..4b25e6ace893ee 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap @@ -615,3 +615,218 @@ exports[`Persona renders Persona correctly with initials 1`] = `
`; + +exports[`Persona renders Persona correctly with no props 1`] = ` +
+
+
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+`; diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx index b2fe15f2fd5352..601ffa99d3363e 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + IPersonaSharedProps, Persona, PersonaSize, PersonaPresence @@ -7,10 +8,10 @@ import { import { TestImages } from '../../../common/TestImages'; import './PersonaExample.scss'; -const examplePersona = { +const examplePersona: IPersonaSharedProps = { imageUrl: TestImages.personaMale, imageInitials: 'AR', - primaryText: 'Annie Reid', + text: 'Annie Reid', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx index bec1d243e181b0..0290062f1bb5b4 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + IPersonaSharedProps, Persona, PersonaSize, PersonaPresence @@ -11,10 +12,10 @@ import { TestImages } from '../../../common/TestImages'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; -const examplePersona = { +const examplePersona: IPersonaSharedProps = { imageUrl: TestImages.personaFemale, imageInitials: 'AL', - primaryText: 'Annie Lindqvist', + text: 'Annie Lindqvist', secondaryText: 'Software Engineer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm' diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx index 16d2acf42edd98..7b726213877a16 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { IPersonaProps, + IPersonaSharedProps, Persona, PersonaSize, PersonaPresence @@ -10,10 +11,10 @@ import './PersonaExample.scss'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; -const examplePersona = { +const examplePersona: IPersonaSharedProps = { imageUrl: TestImages.personaMale, imageInitials: 'TR', - primaryText: 'Ted Randall', + text: 'Ted Randall', secondaryText: 'Project Manager', optionalText: 'Available at 4:00pm' }; diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx index 11651e807cfd61..d2a6ac917e5200 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { IPersonaProps, + IPersonaSharedProps, Persona, PersonaSize, PersonaPresence @@ -11,10 +12,10 @@ import './PersonaExample.scss'; import * as exampleStylesImport from '../../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; -const examplePersona = { +const examplePersona: IPersonaSharedProps = { imageUrl: TestImages.personaFemale, imageInitials: 'AL', - primaryText: 'Annie Lindqvist', + text: 'Annie Lindqvist', secondaryText: 'Software Engineer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm' 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 aaa122aec6398b..60d348ba8712b4 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 @@ -1,19 +1,20 @@ import * as React from 'react'; import { + IPersonaSharedProps, Persona, PersonaInitialsColor, } from 'office-ui-fabric-react/lib/Persona'; import './PersonaExample.scss'; -const examplePersona = { +const examplePersona: IPersonaSharedProps = { secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm' }; -const personaWithInitials = { +const personaWithInitials: IPersonaSharedProps = { ...examplePersona, - primaryText: 'Maor Sharett', + text: 'Maor Sharett', imageInitials: 'MS' }; @@ -22,52 +23,52 @@ export class PersonaInitialsExample extends React.Component { return (
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.UnknownPersona.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.UnknownPersona.Example.tsx index 2e58b619de6a13..7775acff261ceb 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.UnknownPersona.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.UnknownPersona.Example.tsx @@ -10,18 +10,18 @@ export class UnknownPersonaExample extends React.Component { return (
); diff --git a/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx index a774eb4e34325e..cae1fa51dc20b9 100644 --- a/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx @@ -94,7 +94,7 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> { private _onCopyItems(items: IExtendedPersonaProps[]): string { let copyText = ''; items.forEach((item: IExtendedPersonaProps, index: number) => { - copyText += item.primaryText; + copyText += item.text; if (index < items.length - 1) { copyText += ', '; @@ -105,7 +105,7 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> { } private _getExpandedGroupItems(item: IExtendedPersonaProps): IExtendedPersonaProps[] { - switch (item.primaryText) { + switch (item.text) { case 'Group One': return groupOne; case 'Group Two': diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx index 67b7a34a4754b4..6e32f10415812e 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx @@ -131,7 +131,7 @@ export class PeoplePickerTypesExample extends BaseComponent => { const processedItem = Object.assign({}, item); - processedItem.primaryText = `${item.primaryText} (selected)`; + processedItem.text = `${item.text} (selected)`; return new Promise((resolve, reject) => setTimeout(() => resolve(processedItem), 250)); } @@ -391,11 +391,11 @@ export class PeoplePickerTypesExample extends BaseComponent item.primaryText === persona.primaryText).length > 0; + return personas.filter(item => item.text === persona.text).length > 0; } private _filterPersonasByText(filterText: string): IPersonaProps[] { - return this.state.peopleList.filter(item => this._doesTextStartWith(item.primaryText as string, filterText)); + return this.state.peopleList.filter(item => this._doesTextStartWith(item.text as string, filterText)); } private _doesTextStartWith(text: string, filterText: string): boolean { diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts index 7c504b04049c01..967d53dd3a22d9 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePickerExampleData.ts @@ -6,7 +6,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 1, imageUrl: TestImages.personaFemale, imageInitials: 'PV', - primaryText: 'Annie Lindqvist', + text: 'Annie Lindqvist', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -16,7 +16,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 2, imageUrl: TestImages.personaMale, imageInitials: 'AR', - primaryText: 'Aaron Reid', + text: 'Aaron Reid', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -26,7 +26,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 3, imageUrl: TestImages.personaMale, imageInitials: 'AL', - primaryText: 'Alex Lundberg', + text: 'Alex Lundberg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -36,7 +36,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 4, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Roko Kolar', + text: 'Roko Kolar', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -46,7 +46,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 5, imageUrl: TestImages.personaMale, imageInitials: 'CB', - primaryText: 'Christian Bergqvist', + text: 'Christian Bergqvist', secondaryText: 'Sr. Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -56,7 +56,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 6, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valentina Lovric', + text: 'Valentina Lovric', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -66,7 +66,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 7, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharett', + text: 'Maor Sharett', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -76,7 +76,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 8, imageUrl: TestImages.personaFemale, imageInitials: 'PV', - primaryText: 'Anny Lindqvist', + text: 'Anny Lindqvist', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -86,7 +86,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 9, imageUrl: TestImages.personaMale, imageInitials: 'AR', - primaryText: 'Aron Reid', + text: 'Aron Reid', secondaryText: 'Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -96,7 +96,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 10, imageUrl: TestImages.personaMale, imageInitials: 'AL', - primaryText: 'Alix Lundberg', + text: 'Alix Lundberg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -106,7 +106,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 11, imageUrl: TestImages.personaMale, imageInitials: 'RK', - primaryText: 'Roko Kular', + text: 'Roko Kular', secondaryText: 'Financial Analyst', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -117,7 +117,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 12, imageUrl: TestImages.personaMale, imageInitials: 'CB', - primaryText: 'Christian Bergqvest', + text: 'Christian Bergqvest', secondaryText: 'Sr. Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -127,7 +127,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 13, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valintina Lovric', + text: 'Valintina Lovric', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -137,7 +137,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 14, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharet', + text: 'Maor Sharet', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -147,7 +147,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 15, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Anny Lindqvest', + text: 'Anny Lindqvest', secondaryText: 'SDE', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -157,7 +157,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 16, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Alix Lunberg', + text: 'Alix Lunberg', secondaryText: 'SE', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -167,7 +167,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 17, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Annie Lindqvest', + text: 'Annie Lindqvest', secondaryText: 'SDET', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -177,7 +177,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 18, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Alixander Lundberg', + text: 'Alixander Lundberg', secondaryText: 'Senior Manager of SDET', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -187,7 +187,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 19, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Anny Lundqvist', + text: 'Anny Lundqvist', secondaryText: 'Junior Manager of Software', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -197,7 +197,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 20, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Shorett', + text: 'Maor Shorett', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -207,7 +207,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 21, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valentina Lovrics', + text: 'Valentina Lovrics', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -217,7 +217,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 22, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharet', + text: 'Maor Sharet', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -227,7 +227,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 23, imageUrl: TestImages.personaFemale, imageInitials: 'VL', - primaryText: 'Valentina Lovrecs', + text: 'Valentina Lovrecs', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -237,7 +237,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 24, imageUrl: TestImages.personaMale, imageInitials: 'MS', - primaryText: 'Maor Sharitt', + text: 'Maor Sharitt', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -247,7 +247,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 25, imageUrl: './images/persona-male.png', imageInitials: 'MS', - primaryText: 'Maor Shariett', + text: 'Maor Shariett', secondaryText: 'Design Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 3:00pm', @@ -257,7 +257,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 26, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Alix Lundburg', + text: 'Alix Lundburg', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 3:00pm', @@ -267,7 +267,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 27, imageUrl: './images/persona-female.png', imageInitials: 'VL', - primaryText: 'Valantena Lovric', + text: 'Valantena Lovric', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -277,7 +277,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 28, imageUrl: './images/persona-female.png', imageInitials: 'VL', - primaryText: 'Velatine Lourvric', + text: 'Velatine Lourvric', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -287,7 +287,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 29, imageUrl: './images/persona-female.png', imageInitials: 'VL', - primaryText: 'Valentyna Lovrique', + text: 'Valentyna Lovrique', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -297,7 +297,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 30, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Annie Lindquest', + text: 'Annie Lindquest', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -307,7 +307,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 31, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Anne Lindquist', + text: 'Anne Lindquist', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -317,7 +317,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 32, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Ann Lindqiest', + text: 'Ann Lindqiest', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -327,7 +327,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 33, imageUrl: './images/persona-male.png', imageInitials: 'AR', - primaryText: 'Aron Reid', + text: 'Aron Reid', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -337,7 +337,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 34, imageUrl: './images/persona-male.png', imageInitials: 'AR', - primaryText: 'Aaron Reed', + text: 'Aaron Reed', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -347,7 +347,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 35, imageUrl: './images/persona-female.png', imageInitials: 'AL', - primaryText: 'Alix Lindberg', + text: 'Alix Lindberg', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -357,7 +357,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 36, imageUrl: './images/persona-male.png', imageInitials: 'AL', - primaryText: 'Alan Lindberg', + text: 'Alan Lindberg', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -367,7 +367,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 37, imageUrl: './images/persona-male.png', imageInitials: 'MS', - primaryText: 'Maor Sharit', + text: 'Maor Sharit', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -377,7 +377,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 38, imageUrl: './images/persona-male.png', imageInitials: 'MS', - primaryText: 'Maorr Sherit', + text: 'Maorr Sherit', secondaryText: 'UX Designer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -387,7 +387,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 39, imageUrl: './images/persona-male.png', imageInitials: 'AL', - primaryText: 'Alex Lindbirg', + text: 'Alex Lindbirg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', @@ -397,7 +397,7 @@ export const people: (IPersonaProps & { key: string | number })[] = [ key: 40, imageUrl: './images/persona-male.png', imageInitials: 'AL', - primaryText: 'Alex Lindbarg', + text: 'Alex Lindbarg', secondaryText: 'Software Developer', tertiaryText: 'In a meeting', optionalText: 'Available at 4:00pm', diff --git a/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx index 084f4b17201fd2..7f1ba5d43c3e14 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx @@ -289,7 +289,7 @@ export const SuggestedBigItem: (documentProps: IFullDocumentCardProps, itemProps return ( );