feat: add optional person-card to people picker

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss

@@ -7,19 +7,22 @@
 
 @import '../../styles/shared-sass-variables';
 
-$input-background: padding-box
+$input-background:
+  padding-box
     linear-gradient(
       var(--people-picker-input-background, var(--neutral-fill-input-rest)),
       var(--people-picker-input-background, var(--neutral-fill-input-rest))
     ),
   border-box var(--people-picker-input-border-color, var(--neutral-stroke-input-rest));
-$input-hover-background: padding-box
+$input-hover-background:
+  padding-box
     linear-gradient(
       var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)),
       var(--people-picker-input-hover-background, var(--neutral-fill-input-hover))
     ),
   border-box var(--people-picker-input-hover-border-color, var(--neutral-stroke-input-hover));
-$input-focus-background: padding-box
+$input-focus-background:
+  padding-box
     linear-gradient(
       var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)),
       var(--people-picker-input-focus-background, var(--neutral-fill-input-focus))
@@ -33,17 +36,17 @@ $selected-option-bg: var(
   var(--person-background-color, var(--neutral-layer-3))
 );
 $selected-option-highlight-bg: var(--people-picker-selected-option-highlight-background-color, var(--accent-fill-rest));
-$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-layer-card-container));
+$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--fill-color));
 $dropdown-result-bg-color: var(
   --people-picker-dropdown-result-background-color,
   var(--person-background-color, transparent)
 );
 $dropdown-result-hover-bg-color: var(
   --people-picker-dropdown-result-hover-background-color,
-  var(--person-background-color, var(--neutral-fill-rest))
+  var(--person-background-color, var(--neutral-fill-input-hover))
 );
 $dropdown-result-focus-bg-color: var(
   --people-picker-dropdown-result-focus-background-color,
-  var(--person-background-color, var(--neutral-fill-rest))
+  var(--person-background-color, var(--neutral-fill-input-focus))
 );
 $no-results-color: var(--people-picker-no-results-text-color, var(--neutral-foreground-hint));

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -56,6 +56,7 @@ import { Person, User } from '@microsoft/microsoft-graph-types';
 import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtSpinnerComponent } from '../sub-components/mgt-spinner/mgt-spinner';
 import { isGraphError } from '../../graph/isGraphError';
+import { type PersonCardInteraction, personCardConverter } from './../PersonCardInteraction';
 
 export { GroupType } from '../../graph/graph.groups';
 export { PersonType, UserType } from '../../graph/graph.people';
@@ -273,6 +274,19 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   })
   public showPresence: boolean;
 
+  /**
+   * Sets how the person-card is invoked
+   * Set to PersonCardInteraction.none to not show the card
+   *
+   * @type {PersonCardInteraction}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'person-card',
+    converter: value => personCardConverter(value)
+  })
+  public personCardInteraction: PersonCardInteraction = 'none';
+
   /**
    * array of user picked people.
    *
@@ -423,7 +437,14 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
    */
   public static get requiredScopes(): string[] {
     return [
-      ...new Set(['user.read.all', 'people.read', 'group.read.all', 'user.readbasic.all', ...MgtPerson.requiredScopes])
+      ...new Set([
+        'user.read.all',
+        'people.read',
+        'group.read.all',
+        'user.readbasic.all',
+        'contacts.read',
+        ...MgtPerson.requiredScopes
+      ])
     ];
   }
 
@@ -825,20 +846,20 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
         aria-live="polite"
         title=${this.strings.suggestionsTitle}
       >
-         ${repeat(
-           filteredPeople,
-           person => person.id,
-           person => html`
-            <li
-              id="${person.id}"
-              class="searched-people-list-result"
-              role="option"
-              @click="${() => this.handleSuggestionClick(person)}">
-                ${this.renderPersonResult(person)}
-            </li>
-          `
-         )}
-       </ul>
+        ${repeat(
+          filteredPeople,
+          person => person.id,
+          person => html`
+          <li
+            id="${person.id}"
+            class="searched-people-list-result"
+            role="option"
+            @click="${() => this.handleSuggestionClick(person)}">
+              ${this.renderPersonResult(person)}
+          </li>
+        `
+        )}
+      </ul>
      `;
   }
 
@@ -877,12 +898,11 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
   protected renderSelectedPerson(person: IDynamicPerson): TemplateResult {
     return mgtHtml`
        <mgt-person
-         tabindex="-1"
          class="person-image-selected"
          .personDetails=${person}
          ?fetch-image=${!this.disableImages}
          view="oneline"
-         person-card="none"
+         person-card=${this.personCardInteraction}
         ></mgt-person>
      `;
   }
@@ -1389,7 +1409,7 @@ export class MgtPeoplePicker extends MgtTemplatedTaskComponent {
     const selectedList = this.renderRoot.querySelector('.selected-list');
     const isCmdOrCtrlKey = event.getModifierState('Control') || event.getModifierState('Meta');
     if (isCmdOrCtrlKey && selectedList) {
-      const selectedPeople = selectedList.querySelectorAll('mgt-person.selected-list-item-person');
+      const selectedPeople = selectedList.querySelectorAll('mgt-person.person-image-selected');
       this.hideFlyout();
       if (isCmdOrCtrlKey && keyName === 'ArrowLeft') {
         this._currentHighlightedUserPos =

packages/mgt-components/src/components/mgt-person/mgt-person.scss

@@ -227,6 +227,7 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      justify-content: center;
       min-width: var(--person-details-wrapper-width, 168px);
       margin-inline-start: $person-details-left-spacing;
       margin-block-end: $person-details-bottom-spacing;

packages/mgt-components/src/components/mgt-person/mgt-person.ts

@@ -211,7 +211,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
 
   /**
    * usage property allows you to specify where the component is being used to add
-   * customized personalization for it. Currently only supports "people" as used in
+   * customized personalization for it. Currently only supports "people" and "people-picker" as used in
    * the people component.
    *
    * @type {string}

packages/mgt-react/src/generated/people-picker.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
-import { PersonType,GroupType,UserType,IDynamicPerson } from '@microsoft/mgt-components';
+import { PersonType,GroupType,UserType,IDynamicPerson,PersonCardInteraction } from '@microsoft/mgt-components';
 import { registerMgtPeoplePickerComponent } from '@microsoft/mgt-components';
 import { TemplateContext,TemplateRenderedData } from '@microsoft/mgt-element';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -20,6 +20,7 @@ export type PeoplePickerProps = {
 	showMax?: number;
 	disableImages?: boolean;
 	showPresence?: boolean;
+	personCardInteraction?: PersonCardInteraction;
 	selectedPeople?: IDynamicPerson[];
 	defaultSelectedUserIds?: string[];
 	defaultSelectedGroupIds?: string[];

stories/components/peoplePicker/peoplePicker.properties.stories.js

@@ -22,6 +22,10 @@ export const showPresence = () => html`
 <mgt-people-picker show-presence></mgt-people-picker>
 `;
 
+export const personCard = () => html`
+  <mgt-people-picker person-card="hover"></mgt-people-picker>
+`;
+
 export const groupId = () => html`
 <mgt-people-picker group-id="02bd9fd6-8f93-4758-87c3-1fb73740a315"></mgt-people-picker>
 `;