Placeholder for ListItemPicker, ListPicker, and PeoplePicker, depreca…

…tion of placeHolder for ListPicker

docs/documentation/docs/controls/ListItemPicker.md

@@ -60,5 +60,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | noResultsFoundText | string | no | The text that should appear when no results are returned. |
 | disabled | boolean | no | Specifies if the control is disabled or not. |
 | filter | string | no | condition to filter list Item, same as $filter ODATA parameter|
+| placeholder | string | no | Short text hint to display in empty picker |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

docs/documentation/docs/controls/ListPicker.md

@@ -59,6 +59,7 @@ The `ListPicker` control can be configured with the following properties:
 | selectedList | string OR string[] | no | Keys of the selected item(s). If you provide this, you must maintain selection state by observing onSelectionChanged events and passing a new value in when changed. |
 | multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default to `false`. |
 | label | string | no | Label to use for the control. |
+| placeHolder | string | no | Placeholder label to show in the dropdown. **Deprecated. Use `placeholder` instead.** |
 | placeholder | string | no | Placeholder label to show in the dropdown. |
 | onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. |
 

docs/documentation/docs/controls/PeoplePicker.md

@@ -75,6 +75,7 @@ The People picker control can be configured with the following properties:
 | ensureUser | boolean | no | When ensure user property is true, it will return the local user ID on the current site when doing a tenant wide search. | false |
 | suggestionsLimit | number | no | Maximum number of suggestions to show in the full suggestion list. | 5 |
 | resolveDelay | number | no | Add delay to resolve and search users | 200 |
+| placeholder | string | no | Short text hint to display in empty picker |
 
 Enum `PrincipalType`
 

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -14,6 +14,10 @@ export interface IListItemPickerProps {
   disabled?: boolean;
   suggestionsHeaderText?:string;
   noResultsFoundText?:string;
+  /**
+   * Placeholder to be displayed in an empty term picker
+   */
+  placeholder?: string;
 
   onSelectedItem: (item:any) => void;
 }

src/controls/listItemPicker/ListItemPicker.tsx

@@ -41,7 +41,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
    * Render the field
    */
   public render(): React.ReactElement<IListItemPickerProps> {
-    const { className, disabled, itemLimit } = this.props;
+    const { className, disabled, itemLimit, placeholder } = this.props;
 
     return (
       <div>
@@ -56,7 +56,10 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
                    onChange={this.onItemChanged}
                    className={className}
                    itemLimit={itemLimit}
-                   disabled={disabled} />
+                   disabled={disabled}
+                   inputProps={{
+                    placeholder: placeholder
+                  }} />
 
         <Label style={{color:'#FF0000'}}> {this.state.errorMessage} </Label>
       </div>

src/controls/listPicker/IListPicker.ts

@@ -49,6 +49,10 @@ export interface IListPickerProps {
   * Input placeholder text. Displayed until option is selected.
   */
   placeHolder?: string;
+  /**
+  * Input placeholder text. Displayed until option is selected.
+  */
+ placeholder?: string;
   /**
   * Callback issues when the selected option changes
   */

src/controls/listPicker/ListPicker.tsx

@@ -144,14 +144,14 @@ export class ListPicker extends React.Component<IListPickerProps, IListPickerSta
   */
   public render(): JSX.Element {
     const { loading, options, selectedList } = this.state;
-    const { className, disabled, multiSelect, label, placeHolder } = this.props;
+    const { className, disabled, multiSelect, label, placeHolder, placeholder } = this.props;
 
     const dropdownOptions: IDropdownProps = {
       className: className,
       options: options,
       disabled: ( loading || disabled ),
       label: label,
-      placeHolder: placeHolder,
+      placeHolder: placeholder || placeHolder,
       onChanged: this.onChanged
     };
 

src/controls/peoplepicker/IPeoplePicker.ts

@@ -94,6 +94,10 @@ export interface IPeoplePickerProps {
    * When ensure user property is true, it will return the local user ID on the current site when doing a tenant wide search
    */
   ensureUser?: boolean;
+  /**
+   * Placeholder to be displayed in an empty term picker
+   */
+  placeholder?: string;
 }
 
 export interface IPeoplePickerState {

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -55,9 +55,9 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    */
   public componentWillUpdate(nextProps: IPeoplePickerProps, nextState: IPeoplePickerState): void {
     if (!isEqual(this.props.defaultSelectedUsers, nextProps.defaultSelectedUsers) ||
-        this.props.groupName !== nextProps.groupName ||
-        this.props.webAbsoluteUrl !== nextProps.webAbsoluteUrl ||
-        this.peopleSearchService.getSumOfPrincipalTypes(this.props.principalTypes) !== this.peopleSearchService.getSumOfPrincipalTypes(nextProps.principalTypes)) {
+      this.props.groupName !== nextProps.groupName ||
+      this.props.webAbsoluteUrl !== nextProps.webAbsoluteUrl ||
+      this.peopleSearchService.getSumOfPrincipalTypes(this.props.principalTypes) !== this.peopleSearchService.getSumOfPrincipalTypes(nextProps.principalTypes)) {
       this.getInitialPersons(nextProps);
     }
   }
@@ -101,7 +101,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   /**
    * A search field change occured
    */
-  private onSearchFieldChanged = async (searchText: string, currentSelected: IPersonaProps[]): Promise<IPersonaProps[]> =>  {
+  private onSearchFieldChanged = async (searchText: string, currentSelected: IPersonaProps[]): Promise<IPersonaProps[]> => {
     if (searchText.length > 2) {
       const results = await this.peopleSearchService.searchPeople(searchText, this.suggestionsLimit, this.props.principalTypes, this.props.webAbsoluteUrl, this.groupId, this.props.ensureUser);
       // Remove duplicates
@@ -176,64 +176,89 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
    * Default React component render method
    */
   public render(): React.ReactElement<IPeoplePickerProps> {
+
+    const {
+      peoplePickerCntrlclassName,
+      peoplePickerWPclassName,
+      isRequired,
+      titleText,
+      suggestionsLimit,
+      placeholder,
+      personSelectionLimit,
+      disabled,
+      showtooltip,
+      tooltipMessage,
+      tooltipDirectional,
+      errorMessageClassName,
+      errorMessage
+    } = this.props;
+
+    const {
+      selectedPersons,
+      resolveDelay,
+      errorMessage: stateErrorMessage,
+      showRequiredError
+    } = this.state;
+
     const suggestionProps: IBasePickerSuggestionsProps = {
       suggestionsHeaderText: strings.peoplePickerSuggestionsHeaderText,
       noResultsFoundText: strings.genericNoResultsFoundText,
       loadingText: strings.peoplePickerLoadingText,
-      resultsMaximumNumber: this.props.suggestionsLimit ? this.props.suggestionsLimit : 5,
+      resultsMaximumNumber: suggestionsLimit ? suggestionsLimit : 5,
       searchingText: strings.PeoplePickerSearchText
     };
 
 
     const peoplepicker = (
-      <div id="people" className={`${styles.defaultClass} ${this.props.peoplePickerWPclassName ? this.props.peoplePickerWPclassName : ''}`}>
-        {this.props.titleText && <Label required={this.props.isRequired}>{this.props.titleText}</Label>}
+      <div id="people" className={`${styles.defaultClass} ${peoplePickerWPclassName ? peoplePickerWPclassName : ''}`}>
+        {titleText && <Label required={isRequired}>{titleText}</Label>}
 
         <NormalPeoplePicker pickerSuggestionsProps={suggestionProps}
-                            onResolveSuggestions={this.onSearchFieldChanged}
-                            onEmptyInputFocus={this.returnMostRecentlyUsedPerson}
-                            getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
-                            className={`ms-PeoplePicker ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}`}
-                            key={'normal'}
-                            removeButtonAriaLabel={'Remove'}
-                            inputProps={{
-                              'aria-label': 'People Picker'
-                            }}
-                            selectedItems={this.state.selectedPersons}
-                            itemLimit={this.props.personSelectionLimit || 1}
-                            disabled={this.props.disabled || !!this.state.errorMessage}
-                            onChange={this.onChange}
-                            resolveDelay={this.state.resolveDelay} />
+          onResolveSuggestions={this.onSearchFieldChanged}
+          onEmptyInputFocus={this.returnMostRecentlyUsedPerson}
+          getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
+          className={`ms-PeoplePicker ${peoplePickerCntrlclassName ? peoplePickerCntrlclassName : ''}`}
+          key={'normal'}
+          removeButtonAriaLabel={'Remove'}
+          inputProps={{
+            'aria-label': 'People Picker',
+            placeholder: placeholder
+          }}
+          selectedItems={selectedPersons}
+          itemLimit={personSelectionLimit || 1}
+          disabled={disabled || !!stateErrorMessage}
+          onChange={this.onChange}
+          resolveDelay={resolveDelay} />
       </div>
     );
 
     return (
       <div>
         {
-          this.props.showtooltip ? (
-            <TooltipHost content={this.props.tooltipMessage || strings.peoplePickerComponentTooltipMessage}
-                         id='pntp'
-                         calloutProps={{ gapSpace: 0 }}
-                         directionalHint={this.props.tooltipDirectional || DirectionalHint.leftTopEdge}>
+          showtooltip ? (
+            <TooltipHost content={tooltipMessage || strings.peoplePickerComponentTooltipMessage}
+              id='pntp'
+              calloutProps={{ gapSpace: 0 }}
+              directionalHint={tooltipDirectional || DirectionalHint.leftTopEdge}>
               {peoplepicker}
             </TooltipHost>
           ) : (
-            <div>
-              {peoplepicker}
-            </div>
-          )
+              <div>
+                {peoplepicker}
+              </div>
+            )
         }
 
         {
-          ((this.props.isRequired && this.state.showRequiredError) || (this.state.errorMessage)) && (
-            <p className={`ms-TextField-errorMessage ${styles.errorMessage} ${this.props.errorMessageClassName ? this.props.errorMessageClassName : ''}`}>
+          ((isRequired && showRequiredError) || (stateErrorMessage)) && (
+            <p className={`ms-TextField-errorMessage ${styles.errorMessage} ${errorMessageClassName ? errorMessageClassName : ''}`}>
               <Icon iconName='Error' className={styles.errorIcon} />
               {
-                this.state.errorMessage && <span data-automation-id="error-message">{this.state.errorMessage}</span>
+                stateErrorMessage && <span data-automation-id="error-message">{stateErrorMessage}</span>
               }
 
               {
-                (this.props.isRequired && this.state.showRequiredError) && <span data-automation-id="error-message">{this.props.errorMessage ? this.props.errorMessage : strings.peoplePickerComponentErrorMessage}</span>
+                (isRequired && showRequiredError) && <span data-automation-id="error-message">{errorMessage ? errorMessage : strings.peoplePickerComponentErrorMessage}</span>
               }
             </p>
           )

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -516,7 +516,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           showHiddenInUI={false}
           principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
           suggestionsLimit={2}
-          resolveDelay={200} />
+          resolveDelay={200}
+          placeholder={'Select a SharePoint principal (User or Group)'} />
 
         <PeoplePicker context={this.props.context}
           titleText="People Picker (local scoped)"
@@ -684,7 +685,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               <div className="ms-font-m">List picker tester:
                 <ListPicker context={this.props.context}
                   label="Select your list(s)"
-                  placeHolder="Select your list(s)"
+                  placeholder="Select your list(s)"
                   baseTemplate={100}
                   includeHidden={false}
                   multiSelect={true}
@@ -700,6 +701,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   filter={"Title eq 'SPFx'"}
                   itemLimit={5}
                   context={this.props.context}
+                  placeholder={'Select list items'}
                   onSelectedItem={this.listItemPickerDataSelected} />
 
               </div>