merged 858

Author: nmetulev

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

@@ -260,6 +260,18 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   })
   public placeholder: string;
 
+  /**
+   * Determines whether component should be disabled or not
+   *
+   * @type {boolean}
+   * @memberof MgtPeoplePicker
+   */
+  @property({
+    attribute: 'disabled',
+    type: Boolean
+  })
+  public disabled: boolean;
+
   /**
    * Determines whether component allows multiple or single selection of people
    *
@@ -295,7 +307,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   // List of people requested if group property is provided
   private _groupPeople: IDynamicPerson[];
   private _debouncedSearch: { (): void; (): void };
-
   private defaultSelectedUsers: IDynamicPerson[];
 
   @internalProperty() private _isFocused = false;
@@ -310,6 +321,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.userInput = '';
     this.showMax = 6;
     this.selectedPeople = [];
+    this.disabled = false;
   }
 
   /**
@@ -434,6 +446,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           @keyup="${this.onUserKeyUp}"
           @blur=${this.lostFocus}
           @click=${this.handleFlyout}
+          ?disabled=${this.disabled}
         />
       </div>
     `;

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

@@ -54,6 +54,7 @@ export type PeoplePickerProps = {
 	selectionMode?: string;
 	showMax?: number;
 	selectedPeople?: IDynamicPerson[];
+	disabled?: boolean;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
 	selectionChanged?: (e: Event) => void;

stories/components/peoplePicker.stories.js

@@ -138,6 +138,12 @@ export const pickerOverflowGradient = () => html`
   </style>
 `;
 
+export const pickerDisabled = () => html`
+  <mgt-people-picker
+    default-selected-user-ids="e3d0513b-449e-4198-ba6f-bd97ae7cae85, 40079818-3808-4585-903b-02605f061225" disabled>
+  </mgt-people-picker>
+`;
+
 export const pickerDefaultSelectedUserIds = () => html`
   <mgt-people-picker
     default-selected-user-ids="e3d0513b-449e-4198-ba6f-bd97ae7cae85, 40079818-3808-4585-903b-02605f061225">