Merge pull request #1045 from pnp/dev

Merge for 3.4.0 release

Author: estruyf

CHANGELOG.JSON

@@ -1,5 +1,39 @@
 {
   "versions": [
+    {
+      "version": "3.4.0",
+      "changes": {
+        "new": [
+          "`ModernTaxonomyPicker`: New control ModernTaxonomyPicker [#1014](https://github.com/pnp/sp-dev-fx-controls-react/pull/1014)"
+        ],
+        "enhancements": [
+          "Translations: Update translation keys [#994](https://github.com/pnp/sp-dev-fx-controls-react/pull/994)",
+          "`LocationPicker`: Update docs [#1009](https://github.com/pnp/sp-dev-fx-controls-react/pull/1009)",
+          "`FileTypeIcon`: Add support of 20px icons[#1013](https://github.com/pnp/sp-dev-fx-controls-react/issues/1013)",
+          "`Pagination`: Update import from lodash [#1021](https://github.com/pnp/sp-dev-fx-controls-react/pull/1021)"
+        ],
+        "fixes": [
+          "`ChartControl`: Charts not updating properly when properties are changed [#997](https://github.com/pnp/sp-dev-fx-controls-react/pull/997)",
+          "`TaxonomyPicker`: suggestions language is always English [#879](https://github.com/pnp/sp-dev-fx-controls-react/issues/879)",
+          "`TaxonomyPicker`: `errorMessage` label not being removed [#953](https://github.com/pnp/sp-dev-fx-controls-react/issues/953)",
+          "`FilePicker`: Sorting Not Working as Expected in Site Tab [#1011](https://github.com/pnp/sp-dev-fx-controls-react/issues/1011)",
+          "`FilePicker`: Site Tab - Lots of file types don't have appropriate icons [#1012](https://github.com/pnp/sp-dev-fx-controls-react/issues/1012)",
+          "`LocationPicker`: Correct documentation [#1019](https://github.com/pnp/sp-dev-fx-controls-react/pull/1019)",
+          "`FilePicker`: `fileNameWithoutExtension` not calculated right [#1022](https://github.com/pnp/sp-dev-fx-controls-react/issues/1022)",
+          "`FieldUserRenderer`: Add missing PnPJS imports [#1025](https://github.com/pnp/sp-dev-fx-controls-react/issues/1025)"
+        ]
+      },
+      "contributions": [
+        "[Dennis Kuhn](https://github.com/DennisKuhn)",
+        "[Gautam Sheth](https://github.com/gautamdsheth)",
+        "[Jean-Luc Richer](https://github.com/umaknow-jeanluc)",
+        "[hesperanca](https://github.com/hesperanca)",
+        "[Kiryl Shchasny](https://github.com/lirik30)",
+        "[Patrik Hellgren](https://github.com/patrikhellgren)",
+        "[Peter Paul Kirschner](https://github.com/petkir)",
+        "[Ravichandran Krishnasamy](https://github.com/ravichandran-blog)"
+      ]
+    },
     {
       "version": "3.3.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Releases
 
+## 3.4.0
+
+### New control(s)
+
+- `ModernTaxonomyPicker`: New control ModernTaxonomyPicker [#1014](https://github.com/pnp/sp-dev-fx-controls-react/pull/1014)
+
+### Enhancements
+
+- Translations: Update translation keys [#994](https://github.com/pnp/sp-dev-fx-controls-react/pull/994)
+- `LocationPicker`: Update docs [#1009](https://github.com/pnp/sp-dev-fx-controls-react/pull/1009)
+- `FileTypeIcon`: Add support of 20px icons[#1013](https://github.com/pnp/sp-dev-fx-controls-react/issues/1013)
+- `Pagination`: Update import from lodash [#1021](https://github.com/pnp/sp-dev-fx-controls-react/pull/1021)
+
+### Fixes
+
+- `ChartControl`: Charts not updating properly when properties are changed [#997](https://github.com/pnp/sp-dev-fx-controls-react/pull/997)
+- `TaxonomyPicker`: suggestions language is always English [#879](https://github.com/pnp/sp-dev-fx-controls-react/issues/879)
+- `TaxonomyPicker`: `errorMessage` label not being removed [#953](https://github.com/pnp/sp-dev-fx-controls-react/issues/953)
+- `FilePicker`: Sorting Not Working as Expected in Site Tab [#1011](https://github.com/pnp/sp-dev-fx-controls-react/issues/1011)
+- `FilePicker`: Site Tab - Lots of file types don't have appropriate icons [#1012](https://github.com/pnp/sp-dev-fx-controls-react/issues/1012)
+- `LocationPicker`: Correct documentation [#1019](https://github.com/pnp/sp-dev-fx-controls-react/pull/1019)
+- `FilePicker`: `fileNameWithoutExtension` not calculated right [#1022](https://github.com/pnp/sp-dev-fx-controls-react/issues/1022)
+- `FieldUserRenderer`: Add missing PnPJS imports [#1025](https://github.com/pnp/sp-dev-fx-controls-react/issues/1025)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Dennis Kuhn](https://github.com/DennisKuhn), [Gautam Sheth](https://github.com/gautamdsheth), [Jean-Luc Richer](https://github.com/umaknow-jeanluc), [hesperanca](https://github.com/hesperanca), [Kiryl Shchasny](https://github.com/lirik30), [Patrik Hellgren](https://github.com/patrikhellgren), [Peter Paul Kirschner](https://github.com/petkir), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog).
+
 ## 3.3.0
 
 ### New control(s)

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

@@ -1,5 +1,33 @@
 # Releases
 
+## 3.4.0
+
+### New control(s)
+
+- `ModernTaxonomyPicker`: New control ModernTaxonomyPicker [#1014](https://github.com/pnp/sp-dev-fx-controls-react/pull/1014)
+
+### Enhancements
+
+- Translations: Update translation keys [#994](https://github.com/pnp/sp-dev-fx-controls-react/pull/994)
+- `LocationPicker`: Update docs [#1009](https://github.com/pnp/sp-dev-fx-controls-react/pull/1009)
+- `FileTypeIcon`: Add support of 20px icons[#1013](https://github.com/pnp/sp-dev-fx-controls-react/issues/1013)
+- `Pagination`: Update import from lodash [#1021](https://github.com/pnp/sp-dev-fx-controls-react/pull/1021)
+
+### Fixes
+
+- `ChartControl`: Charts not updating properly when properties are changed [#997](https://github.com/pnp/sp-dev-fx-controls-react/pull/997)
+- `TaxonomyPicker`: suggestions language is always English [#879](https://github.com/pnp/sp-dev-fx-controls-react/issues/879)
+- `TaxonomyPicker`: `errorMessage` label not being removed [#953](https://github.com/pnp/sp-dev-fx-controls-react/issues/953)
+- `FilePicker`: Sorting Not Working as Expected in Site Tab [#1011](https://github.com/pnp/sp-dev-fx-controls-react/issues/1011)
+- `FilePicker`: Site Tab - Lots of file types don't have appropriate icons [#1012](https://github.com/pnp/sp-dev-fx-controls-react/issues/1012)
+- `LocationPicker`: Correct documentation [#1019](https://github.com/pnp/sp-dev-fx-controls-react/pull/1019)
+- `FilePicker`: `fileNameWithoutExtension` not calculated right [#1022](https://github.com/pnp/sp-dev-fx-controls-react/issues/1022)
+- `FieldUserRenderer`: Add missing PnPJS imports [#1025](https://github.com/pnp/sp-dev-fx-controls-react/issues/1025)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Dennis Kuhn](https://github.com/DennisKuhn), [Gautam Sheth](https://github.com/gautamdsheth), [Jean-Luc Richer](https://github.com/umaknow-jeanluc), [hesperanca](https://github.com/hesperanca), [Kiryl Shchasny](https://github.com/lirik30), [Patrik Hellgren](https://github.com/patrikhellgren), [Peter Paul Kirschner](https://github.com/petkir), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog).
+
 ## 3.3.0
 
 ### New control(s)

docs/documentation/docs/assets/modernTaxonomyPicker-empty.png

@@ -40,7 +40,7 @@ The FileTypeIcon component can be configured with the following properties:
 | ---- | ---- | ---- | ---- |
 | application | ApplicationType | no | Type of the application for which you want to show the icon. Use the **ApplicationType** enum to get the list of available applications. |
 | path | string | no | Path to the document. If this is provided, the control will use the file extension to display the corresponding icon. |
-| size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. Small (16px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
+| size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. small (16px), normal (20px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
 | type | IconType | yes | This property specifies is you want to use the icon font or image. Use the **IconType** enum to get the list of available icon types. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FileTypeIcon)

docs/documentation/docs/assets/modernTaxonomyPicker-input-autocomplete.png

@@ -0,0 +1,74 @@
+# Modern Taxonomy Picker
+
+This control allows you to select one or more Terms from a TermSet via its TermSet ID. You can also configure the control to select the child terms from a specific term in the TermSet by setting the anchorTermId. This is the modern version of the taxonomy picker that uses the REST API and makes use of some load on demand features which makes it well suited for large term sets.
+
+!!! note "Disclaimer" 
+    Since this control is meant to look as and work in the same way as the out-of-the-box control it lacks some of the features from the legacy ```TaxonomyPicker``` control. If you need some of those features please continue using the legacy version.
+
+**Empty term picker**
+
+![Empty term picker](../assets/modernTaxonomyPicker-empty.png)
+
+**Selecting terms**
+
+![Selecting terms](../assets/modernTaxonomyPicker-tree-selection.png)
+
+**Selected terms in picker** 
+
+![Selected terms in the input](../assets/modernTaxonomyPicker-selected-terms.png)
+
+**Term picker: Auto Complete**
+
+![Selected terms in the input](../assets/modernTaxonomyPicker-input-autocomplete.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 { ModernTaxonomyPicker } from "@pnp/spfx-controls-react/lib/ModernTaxonomyPicker";
+```
+
+- Use the `ModernTaxonomyPicker` control in your code as follows:
+
+```TypeScript
+<ModernTaxonomyPicker allowMultipleSelections={true}
+                termSetId="f233d4b7-68fb-41ef-8b58-2af0bafc0d38"
+                panelTitle="Select Term"
+                label="Taxonomy Picker"
+                context={this.props.context}
+                onChange={this.onTaxPickerChange} />
+```
+
+- With the `onChange` property you can capture the event of when the terms in the picker has changed:
+
+```typescript
+private onTaxPickerChange(terms : ITermInfo[]) {
+  console.log("Terms", terms);
+}
+```
+
+## Implementation
+
+The ModernTaxonomyPicker control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| panelTitle | string | yes | TermSet Picker Panel title. |
+| label | string | yes | Text displayed above the Taxonomy Picker. |
+| disabled | boolean | no | Specify if the control should be disabled. Default value is false. |
+| context | BaseComponentContext | yes | Context of the current web part or extension. |
+| initialValues | ITermInfo[] | no | Defines the terms selected by default. ITermInfo comes from PnP/PnPjs and can be imported with <br/>```import { ITermInfo } from '@pnp/sp/taxonomy';``` |
+| allowMultipleSelections | boolean | no | Defines if the user can select only one or multiple terms. Default value is false. |
+| termSetId | string | yes | The Id of the TermSet that you would like the Taxonomy Picker to select terms from. |
+| onChange | function | no |  Captures the event of when the terms in the picker has changed. |
+| anchorTermId | string | no | Set the id of a child term in the TermSet to be able to select terms from that level and below. |
+| placeHolder | string | no | Short text hint to display in picker. |
+| required | boolean | no | Specifies if to display an asterisk near the label. Default value is false. |
+| customPanelWidth | number | no | Custom panel width in pixels. |
+| termPickerProps | IModernTermPickerProps | no | Custom properties for the term picker (More info: [IBasePickerProps interface](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers#IBasePickerProps)).  |
+| themeVariant | IReadonlyTheme | no | The current loaded SharePoint theme/section background (More info: [Supporting section backgrounds](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds)). |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TaxonomyPicker)

docs/documentation/docs/assets/modernTaxonomyPicker-selected-terms.png

@@ -52,12 +52,14 @@ The `SitePicker` control can be configured with the following properties:
 | isDesc | boolean | no | Specifies if the list is sorted in descending order. Default: `false`. |
 | label | string | no | Label to use for the control. |
 | limitToCurrentSiteCollection | boolean | no | Specifies if the options should be limited by the current site collections. Taken into consideration if selectionMode is set to `web`. |
-| mode | `'site' \| 'web' \| 'hub'` | no | Defines what entities are available for selection: site collections, sites, hub sites. Default: `web`. |
+| mode | `'site' | 'web' | 'hub'` | no | Defines what entities are available for selection: site collections, sites, hub sites. Default: `web`. |
 | multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default: `true`. |
 | onChange | `(selectedSites: ISite[]) => void` | yes | Selection change handler. | 
-| orderBy | `'title' \| 'url'` | no | Specifices if the list is sorted by title or url. Default: `title`. |
+| orderBy | `'title' | 'url'` | no | Specifices if the list is sorted by title or url. Default: `title`. |
 | placeholder | string | no | Placeholder label to show in the dropdown. |
 | searchPlaceholder | string | no | Search input placeholder text. Displayed until search text is entered. |
+| trimDuplicates | boolean | no | Specifies if the duplicates should be trimmed. false by default. Applicable if mode is set to site or web. |
+| additionalQuery | string | no | If provided will be added to the search query as AND part. Applicable if mode is set to site or web. |
 
 Interface `ISite`