Merge pull request #1407 from joaojmendes/dev

Add Styles property to ListItemPicker and ComboBoxListItemPicker

Author: joelfmrodrigues

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Releases
 
+## 3.13.0
+
+### Enhancements
+
+- `ListItemPicker`: use list name as well as GUID to point to list [#1355](https://github.com/pnp/sp-dev-fx-controls-react/issues/1355)
+
+### Fixes
+
+- `DateTimePicker`: broken link for `getErrorMessage` property fixed [#1277](https://github.com/pnp/sp-dev-fx-controls-react/pull/1381)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Edin Kapic](https://github.com/ekapic), [Harminder Singh](https://github.com/HarminderSethi).
+
 ## 3.12.0
 
 ### Enhancements

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,19 @@
 # Releases
 
+## 3.13.0
+
+### Enhancements
+
+- `ListItemPicker`: use list name as well as GUID to point to list [#1355](https://github.com/pnp/sp-dev-fx-controls-react/issues/1355)
+
+### Fixes
+
+- `DateTimePicker`: broken link for `getErrorMessage` property fixed [#1277](https://github.com/pnp/sp-dev-fx-controls-react/pull/1381)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Edin Kapic](https://github.com/ekapic), [Harminder Singh](https://github.com/HarminderSethi).
+
 ## 3.12.0
 
 ### Enhancements

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);