Peoplepicker control v1.0 ready with validation and properties

Author: AsishP

src/controls/peoplepicker/IPeoplePicker.ts

@@ -50,6 +50,18 @@ export interface IPeoplePickerProps {
    * Directional Hint of tool tip
    */
   tooltipDirectional? : DirectionalHint;
+   /**
+   * Class Name for the whole People picker control
+   */
+  peoplePickerWPclassName?:string;
+  /**
+   * Class Name for the People picker control
+   */
+  peoplePickerCntrlclassName?: string;
+  /**
+   * Class Name for the Error Section
+   */
+  errorMessageclassName?: string;
 }
 
 export interface IPeoplePickerState {

src/controls/peoplepicker/PeoplePickerComponent.module.scss

@@ -1,100 +1,3 @@
-.placeholder {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-
-    .placeholderContainer {
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        -ms-grid-row-align: center;
-        align-items: center;
-        color: "[theme:neutralSecondary, default: #666666]";
-        background-color: "[theme:neutralLighter, default: #f4f4f4]";
-        width: 100%;
-        padding: 80px 0;
-
-        .placeholderHead {
-            color: "[theme:neutralPrimary, default: #333333]";
-
-            .placeholderHeadContainer {
-                height: 100%;
-                white-space: nowrap;
-                text-align: center;
-            }
-
-            .placeholderIcon {
-                display: inline-block;
-                vertical-align: middle;
-                white-space: normal;
-            }
-
-            .placeholderText {
-                display: inline-block;
-                vertical-align: middle;
-                white-space: normal
-            }
-        }
-
-        .placeholderDescription {
-            width: 65%;
-            vertical-align: middle;
-            margin: 0 auto;
-            text-align: center;
-
-            .placeholderDescriptionText {
-                color: "[theme:neutralSecondary, default: #666666]";
-                font-size: 17px;
-                display: inline-block;
-                margin: 24px 0;
-                font-weight: 100;
-            }
-
-            button {
-              font-size: 14px;
-              font-weight: 400;
-              box-sizing: border-box;
-              display: inline-block;
-              text-align: center;
-              cursor: pointer;
-              vertical-align: top;
-              min-width: 80px;
-              height: 32px;
-              background-color: "[theme:themePrimary, default: #0078d7]";
-              color: #fff;
-              user-select: none;
-              outline: transparent;
-              border-width: 1px;
-              border-style: solid;
-              border-color: transparent;
-              border-image: initial;
-              text-decoration: none;
-            }
-        }
-    }
-}
-
-[dir=ltr] .placeholder,
-[dir=rtl] .placeholder {
-
-    .placeholderContainer {
-
-        .placeholderHead {
-
-            .placeholderText {
-                padding-left: 20px;
-            }
-        }
-    }
-}
-
-.placeholderOverlay {
-    position: relative;
-    height: 100%;
-    z-index: 1;
-
-    .placeholderSpinnerContainer {
-        position: relative;
-        width: 100%;
-        margin: 164px 0
-    }
+.defaultClass {
+  color : black;    
 }

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -45,7 +45,6 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
 */
 constructor(props: IPeoplePickerProps) {
   super(props);
-  this.refs
   this.state = {
     selectedPersons: [],
     mostRecentlyUsedPersons: [],
@@ -240,13 +239,13 @@ private _convertResultsToPromise(results: IPersonaProps[]): Promise<IPersonaProp
  * Default React component render method
  */
 public render(): React.ReactElement<IPeoplePickerProps> {
-  const peoplepicker = <div id="people">{this.props.titleText}
+  const peoplepicker = <div id="people" className={`${styles.defaultClass} ${this.props.peoplePickerWPclassName ? this.props.peoplePickerWPclassName : ''}`}> {this.props.titleText}
                       <NormalPeoplePicker
                           pickerSuggestionsProps= {suggestionProps}
                           onResolveSuggestions={ this._onPersonFilterChanged }
                           onEmptyInputFocus={ this._returnMostRecentlyUsedPerson }
                           getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.primaryText} 
-                          className={ 'ms-PeoplePicker' }
+                          className={ `'ms-PeoplePicker' ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}` }
                           key={ 'normal' }
                           onValidateInput={ this._validateInputPeople }
                           removeButtonAriaLabel={ 'Remove' }
@@ -273,6 +272,7 @@ public render(): React.ReactElement<IPeoplePickerProps> {
     <MessageBar
     messageBarType={ MessageBarType.error }
     isMultiline={ false }
+    className = {`${this.props.errorMessageclassName ? this.props.errorMessageclassName : ''}`}
     >
     {this.props.errorMessage}
     </MessageBar> : null