fix: consolidate person view types (#2943)

removes the PersonViewType enum in favor of the ViewType enum BREAKING CHANGE: PersonViewType has been removed. 'avatar' is no longer a valid value for the 'view' attribute on the 'mgt-person' component
microsoftgraph · Jan 17, 2024 · 6d44a17 · 6d44a17
1 parent 267bc19
commit 6d44a17
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 46 deletions.
diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -15,7 +15,6 @@ import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';
 import { MgtFlyout, registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
-import { PersonViewType } from '../mgt-person/mgt-person-types';
 
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 
@@ -607,7 +606,7 @@ export class MgtLogin extends MgtTemplatedComponent {
                       <mgt-person
                         .personDetails=${details ? JSON.parse(details) : null}
                         .fallbackDetails=${{ displayName: account.name, mail: account.mail }}
-                        .view=${PersonViewType.twolines}
+                        .view=${ViewType.twolines}
                         class="account"
                       ></mgt-person>
                     </li>`;

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person-types.ts b/packages/mgt-components/src/components/mgt-person/mgt-person-types.ts
@@ -4,41 +4,6 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-
-/**
- * Enumeration to define what parts of the person component render
- *
- * @export
- * @enum {number}
- */
-
-export enum PersonViewType {
-  /**
-   * Render only the avatar
-   */
-  avatar = 2,
-
-  /**
-   * Render the avatar and one line of text
-   */
-  oneline = 3,
-
-  /**
-   * Render the avatar and two lines of text
-   */
-  twolines = 4,
-
-  /**
-   * Render the avatar and three lines of text
-   */
-  threelines = 5,
-
-  /**
-   * Render the avatar and four lines of text
-   */
-  fourlines = 6
-}
-
 export enum avatarType {
   /**
    * Renders avatar photo if available, falls back to initials

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -22,7 +22,7 @@ import '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtFlyout, registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
-import { MgtPersonConfig, PersonViewType, avatarType } from './mgt-person-types';
+import { MgtPersonConfig, avatarType } from './mgt-person-types';
 import { strings } from './strings';
 import { isUser, isContact } from '../../graph/entityType';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -505,7 +505,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    * Sets what data to be rendered (image only, oneLine, twoLines).
    * Default is 'image'.
    *
-   * @type {ViewType | PersonViewType}
+   * @type {ViewType}
    * @memberof MgtPerson
    */
   @property({
@@ -523,7 +523,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
     }
   })
-  public view: ViewType | PersonViewType;
+  public view: ViewType = ViewType.image;
 
   @state() private _fetchedImage: string;
   @state() private _fetchedPresence: Presence;
@@ -917,7 +917,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    * @returns
    */
   protected renderDetails(personProps: IDynamicPerson, presence?: Presence): TemplateResult {
-    if (!personProps || this.view === ViewType.image || this.view === PersonViewType.avatar) {
+    if (!personProps || this.view === ViewType.image) {
       return html``;
     }
 

diff --git a/packages/mgt-react/src/generated/person.ts b/packages/mgt-react/src/generated/person.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
-import { IDynamicPerson,AvatarSize,PersonCardInteraction,ViewType,PersonViewType } from '@microsoft/mgt-components';
+import { IDynamicPerson,AvatarSize,PersonCardInteraction,ViewType } from '@microsoft/mgt-components';
 import { registerMgtPersonComponent } from '@microsoft/mgt-components';
 import { TemplateContext,TemplateRenderedData } from '@microsoft/mgt-element';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -28,7 +28,7 @@ export type PersonProps = {
 	line2Property?: string;
 	line3Property?: string;
 	line4Property?: string;
-	view?: ViewType | PersonViewType;
+	view?: ViewType;
 	templateContext?: TemplateContext;
 	line1clicked?: (e: CustomEvent<IDynamicPerson>) => void;
 	line2clicked?: (e: CustomEvent<IDynamicPerson>) => void;

diff --git a/packages/providers/mgt-teamsfx-provider/README.md b/packages/providers/mgt-teamsfx-provider/README.md
@@ -57,7 +57,7 @@ To learn more about authentication providers, see [Providers](./providers.md).
         public render(): void {
             return (
                 <div>
-                    <Person personQuery="me" view={PersonViewType.threelines}></Person>
+                    <Person personQuery="me" view={ViewType.threelines}></Person>
                 </div>
             );
         }

diff --git a/samples/react-contoso/src/components/Messages.tsx b/samples/react-contoso/src/components/Messages.tsx
@@ -1,4 +1,4 @@
-import { MgtTemplateProps, Person, PersonCardInteraction, PersonViewType } from '@microsoft/mgt-react';
+import { MgtTemplateProps, Person, PersonCardInteraction, ViewType } from '@microsoft/mgt-react';
 import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -73,7 +73,7 @@ export function Messages(props: MgtTemplateProps) {
           <div>
             <Person
               personQuery={email.sender.emailAddress.address}
-              view={PersonViewType.oneline}
+              view={ViewType.oneline}
               personCardInteraction={PersonCardInteraction.hover}
             />
           </div>