commit added Styles property to ListItemPicker and ComboBoxListItemPicker

Author: joaojmendes

src/controls/listItemPicker/ComboBoxListItemPicker.tsx

@@ -41,9 +41,9 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
         .then((value) => {
             this.setState({...this.state,
               safeListId: value });
-              this.loadOptions(this.props).then(() => { /* no-op; */}).catch(() => { /* no-op; */});          
+              this.loadOptions(this.props).then(() => { /* no-op; */}).catch(() => { /* no-op; */});
         })
-        .catch(() => { /* no-op; */ });    
+        .catch(() => { /* no-op; */ });
     } else {
       this.loadOptions(this.props).then(() => { /* no-op; */}).catch(() => { /* no-op; */});
     }
@@ -151,6 +151,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
     return (
       <div className={styles.comboBoxListItemPickerWrapper}>
         <ComboBox label={this.props.label}
+          styles={this.props.styles}
           options={this.state.availableOptions}
           autoComplete={this.props.autoComplete}
           comboBoxOptionStyles={this.props.comboBoxOptionStyles}

src/controls/listItemPicker/IComboBoxListItemPickerProps.ts

@@ -1,4 +1,5 @@
-import { IComboBoxOptionStyles } from "office-ui-fabric-react/lib/components/ComboBox";
+import { IComboBoxOptionStyles, IComboBoxStyles } from "office-ui-fabric-react/lib/components/ComboBox";
+
 import { IAutofillProps } from "office-ui-fabric-react/lib/components/Autofill";
 import { IKeytipProps } from "office-ui-fabric-react/lib/components/Keytip";
 import { SPHttpClient } from '@microsoft/sp-http';
@@ -30,4 +31,5 @@ export interface IComboBoxListItemPickerProps {
     onSelectedItem: (item: any) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
     label?: string;
     orderBy?:string;
+    styles?: IComboBoxStyles;
 }

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -1,3 +1,5 @@
+import { IBasePickerStyles } from 'office-ui-fabric-react';
+
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 export interface IListItemPickerProps {
@@ -32,5 +34,6 @@ export interface IListItemPickerProps {
     * Enable default suggestions. All options are displayed by default when clicking on the control
     */
    enableDefaultSuggestions?: boolean;
+   styles? : IBasePickerStyles;
 
 }

src/controls/listItemPicker/ListItemPicker.tsx

@@ -48,7 +48,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
               safeListId: value });
             this.ensureLoadField();
         })
-        .catch(() => { /* no-op; */ });    
+        .catch(() => { /* no-op; */ });
     } else {
       this.ensureLoadField();
     }
@@ -93,6 +93,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
         }
         <div id={this._tagPickerId}>
           <TagPicker onResolveSuggestions={this.onFilterChanged}
+          styles={this.props.styles}
             onEmptyResolveSuggestions={(selectLists) => {
               if (this.props.enableDefaultSuggestions) {
                 return this.onFilterChanged("", selectLists);