Updated show all users when groupName is empty, added mkdocs and commented console logs

Author: AsishP

docs/documentation/docs/assets/Peoplepicker-multiplechoices.png

@@ -0,0 +1,70 @@
+# People Picker
+
+This control renders a People picker field which can be used to select one or many users from a SharePoint group, or filter from all users in a SharePoint site. You could also set the control as mandatory and show a custom error message if field is empty.
+
+**Empty People Picker control with error message and tooltip**
+
+![People Picker](../assets/Peoplepicker-witherrorandtooltip.png)
+
+**Selecting People**
+
+![Selecting People](../assets/Peoplepicker-selectingchoices.png)
+
+**Selected people** 
+
+![Selected people](../assets/Peoplepicker-multiplechoices.png)
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker";
+```
+
+- Use the `PeoplePicker` control in your code as follows:
+
+```TypeScript
+<PeoplePicker
+    context={this.props.context}
+    titleText="People Picker"
+    personSelectionLimit={3}
+    groupName = {"Team Site Owners"} //leave this blank in case you want to filter from all users
+    showtooltip = {true}
+    isRequired = {true}
+    selectedItems = {this._getPeoplePickerItems}
+/>
+```
+
+- With the `selectedItems` property you can get the selected People in the Peoplepicker :
+
+```typescript
+private _getPeoplePickerItems(items: any[]) {
+    console.log('Items:', items);
+  }
+```
+
+## Implementation
+
+The People picker control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext | yes | Context of the current web part. |
+| groupName | string | yes | group from which users are fetched. Leave it blank if need to filter all users |
+| titleText | string | yes | Text to be displayed on the control |
+| personSelectionLimit | number | no | Defines the limit of people that can be selected in the control|
+| isRequired | boolean | no | Set if the control is required or not |
+| errorMessage | string | no | Specify the error message to display |
+| errorMessageclassName | string | no | applies custom styling to the error message section|
+| showtooltip | boolean | no | Defines if need a tooltip or not |
+| tooltip | string | no | Specify the tooltip message to display |
+| tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown |
+| selectedItems | function | no | get the selected users in the control|
+| peoplePickerWPclassName | string | no | applies custom styling to the people picker element|
+| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only|
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)

docs/documentation/docs/assets/Peoplepicker-selectingchoices.png

@@ -13,11 +13,7 @@ export interface IPeoplePickerProps {
   /**
    * Name of SharePoint Group
    */
-  groupName?: string;
-  /**
-   * image Initials
-   */
-  getAllUsers?: boolean;
+  groupName: string;
   /** 
    * Text of the Control 
   */

docs/documentation/docs/assets/Peoplepicker-witherrorandtooltip.png

@@ -29,7 +29,6 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
 
   public static defaultProps: IPeoplePickerProps = {
   context : null,
-  getAllUsers: true,
   titleText: "People Picker",
   personSelectionLimit: 1,
   showtooltip : false,
@@ -73,7 +72,6 @@ constructor(props: IPeoplePickerProps) {
   appInsights.track('ReactPeoplePicker', {
     groupName: !!props.groupName,
     name: !!props.groupName,
-    getAllUsers: !!props.getAllUsers,
     titleText: !!props.titleText
   });
 
@@ -90,13 +88,13 @@ constructor(props: IPeoplePickerProps) {
 
   private _thisLoadUsers() : void {
     var stringVal = "";
-    if(this.props.getAllUsers)
+    if(this.props.groupName != "")
     {
-      stringVal = "/_api/web/siteusers";
+      stringVal = `/_api/web/sitegroups/GetByName('${this.props.groupName}')/users`;
     }
-    else if(this.props.groupName != "")
+    else
     {
-      stringVal = `/_api/web/sitegroups/GetByName('${this.props.groupName}')/users`;
+      stringVal = "/_api/web/siteusers";
     }
 
     const restApi = `${this.props.context.pageContext.web.absoluteUrl}${stringVal}`;
@@ -251,8 +249,8 @@ public render(): React.ReactElement<IPeoplePickerProps> {
                           removeButtonAriaLabel={ 'Remove' }
                           inputProps={ {
                             'aria-label': 'People Picker',
-                            onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur on People Picker called'),
-                            onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus on People Picker called'),
+                            //onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur on People Picker called'),
+                            //onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus on People Picker called'),
                           } }
                           itemLimit={this.props.personSelectionLimit}
                           onChange = { this._onPersonItemsChange }

docs/documentation/docs/controls/PeoplePicker.md

@@ -284,7 +284,6 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           <PeoplePicker
           context={this.props.context}
           titleText="People Picker"
-          getAllUsers={false}
           personSelectionLimit={3}
           groupName = {"Team Site Owners"}
           showtooltip = {true}