Merge pull request #32 from SharePoint/dev

Merge 1.4.0 changes

Author: estruyf

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Releases
 
+## 1.4.0
+
+**New controls**
+
+- `PropertyFieldMultiSelect` got added
+- `PropertyFieldNumber` got added
+
+**Enhancements**
+
+- `PropertyFieldTermPicker` new introduced property to specify to show or hide the term store name: `hideTermStoreName`.
+- `PropertyFieldTermPicker` updated process when terms were unselected based on ID instead of path.
+
 ## 1.3.0
 
 **New controls**

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

@@ -1,5 +1,17 @@
 # Releases
 
+## 1.4.0
+
+**New controls**
+
+- `PropertyFieldMultiSelect` got added
+- `PropertyFieldNumber` got added
+
+**Enhancements**
+
+- `PropertyFieldTermPicker` new introduced property to specify to show or hide the term store name: `hideTermStoreName`.
+- `PropertyFieldTermPicker` updated process when terms were unselected based on ID instead of path.
+
 ## 1.3.0
 
 **New controls**

docs/documentation/docs/assets/FieldMultiSelect.gif

@@ -0,0 +1,17 @@
+# Testing out a beta release ![](https://img.shields.io/npm/v/@pnp/spfx-property-controls/next.svg)
+
+All you need to do for testing out a beta release of `@pnp/spfx-property-controls` is to install the dependency as follows:
+
+```
+npm install @pnp/spfx-property-controls@next --save
+```
+
+## Beta control documentation
+
+The control documentation is only live for public releases, not for beta versions. If you want to checkout the markdown files of all controls in the `dev` branch: [beta documentation](https://github.com/SharePoint/sp-dev-fx-property-controls/tree/dev/docs/documentation/docs/controls).
+
+## Next Steps
+
+Once you installed the beta version, you can start using the controls in your solution. Go to the homepage to get an overview of all the available controls and the steps to get started: [home](./).
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/beta)

docs/documentation/docs/assets/PropertyFieldNumber.gif

@@ -0,0 +1,61 @@
+# PropertyFieldMultiSelect control
+
+This control generates a dropdown with the possibility of selecting multiple values.
+
+**Multi-select field rendering**
+
+![Multi-select field](../assets/FieldMultiSelect.gif)
+
+## How to use this control in your solutions
+
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
+2. Import the following modules to your component:
+
+```TypeScript
+import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect';
+```
+
+3. Create a new property for your web part, for example:
+
+```TypeScript
+export interface IPropertyControlsTestWebPartProps {
+  multiSelect: string[];
+}
+```
+
+4. Add the custom property control to the `groupFields` of the web part property pane configuration:
+
+```TypeScript
+PropertyFieldMultiSelect('multiSelect', {
+  key: 'multiSelect',
+  label: "Multi select field",
+  options: [
+    {
+      key: "EN",
+      text: "EN"
+    },
+    {
+      key: "FR",
+      text: "FR"
+    },
+    {
+      key: "NL",
+      text: "NL"
+    }
+  ],
+  selectedKeys: this.properties.multiSelect
+})
+```
+
+## Implementation
+
+The `PropertyFieldMultiSelect` control uses the same implementation as the default `PropertyPaneDropdown` control and has the following additional properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| selectedKeys | string[] OR number[] | no | Specifies the selected keys. |
+
+> **Important**: Do not make use of the `selectedKey` property. This property is inherited from the `PropertyPaneDropdown` control.
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldMultiSelect)

docs/documentation/docs/beta.md

@@ -0,0 +1,58 @@
+# PropertyFieldNumber control
+
+This control generates an input field for numbers. Text is not allowed as this will result into an invalid input.
+
+**PropertyFieldNumber example usage**
+
+![PropertyFieldNumber example](../assets/PropertyFieldNumber.gif)
+
+## How to use this control in your solutions
+
+1. Check that you installed the `@pnp/spfx-property-controls` dependency. Check out The [getting started](../#getting-started) page for more information about installing the dependency.
+2. Import the following modules to your component:
+
+```TypeScript
+import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber';
+```
+
+3. Create a new property for your web part, for example:
+
+```TypeScript
+export interface IPropertyControlsTestWebPartProps {
+  numberValue: number;
+}
+```
+
+4. Add the custom property control to the `groupFields` of the web part property pane configuration:
+
+```TypeScript
+PropertyFieldNumber("numberValue", {
+  key: "numberValue",
+  label: "Number value only",
+  description: "Number field description",
+  value: this.properties.numberValue,
+  maxValue: 10,
+  minValue: 1,
+  disabled: false
+})
+```
+
+## Implementation
+
+The `PropertyFieldNumber` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| key | string | yes | An unique key that indicates the identity of this control. |
+| label | string | yes | Property field label displayed on top. |
+| description | string | no | The number field input description. |
+| placeholder | string | no | Placeholder text to be displayed in the number field. |
+| value | number | no | Value to be displayed in the number field. |
+| maxValue | number | no | Maximum number that can be inserted. |
+| minValue | number | no | Minimum number that can be inserted. |
+| disabled | boolean | no | Specify if the control needs to be disabled. |
+| errorMessage | string | no | If set, this will be displayed as an error message. |
+| deferredValidationTime | number | no | Number field will start to validate after users stop typing for `deferredValidationTime` milliseconds. |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-property-controls/wiki/PropertyFieldNumber)

docs/documentation/docs/controls/PropertyFieldMultiSelect.md

@@ -78,6 +78,7 @@ The `PropertyFieldTermPicker` control can be configured with the following prope
 | excludeSystemGroup | boolean | no | Indicator to define if the system Groups are exclude. Default is false. |
 | limitByGroupNameOrID | string | no | Limit the term sets that can be used by the group name or ID. |
 | limitByTermsetNameOrID | string | no | Limit the terms that can be picked by the Term Set name or ID. |
+| hideTermStoreName | boolean | no | Specifies if you want to show or hide the term store name from the panel. |
 | onPropertyChange | function | yes | Defines a onPropertyChange function to raise when the date gets changed. |
 | properties | any | yes | Parent web part properties, this object is use to update the property value.  |
 | key | string | yes | An unique key that indicates the identity of this control. |

docs/documentation/docs/controls/PropertyFieldNumber.md

@@ -1,4 +1,4 @@
-# Reusable property pane controls for the SharePoint Framework solutions
+# Reusable property pane controls for the SharePoint Framework solutions ![](https://img.shields.io/npm/v/@pnp/spfx-property-controls.svg)
 
 This repository provides developers with a set of reusable property pane controls that can be used in their SharePoint Framework (SPFx) solutions.
 
@@ -32,6 +32,7 @@ The following controls are currently available:
 - [PropertyFieldPeoplePicker](./controls/PropertyFieldPeoplePicker) (Property pane people / group selector)
 - [PropertyFieldSpinButton](./controls/PropertyFieldSpinButton) (Property pane spin button)
 - [PropertyFieldTermPicker](./controls/PropertyFieldTermPicker) (Property pane managed metadata term selector)
+- [PropertyFieldMultiSelect](./controls/PropertyFieldMultiSelect) (Property pane field which allows multi-value selection)
 
 The following controls are extended controls that show a callout next to the label
 

docs/documentation/docs/controls/PropertyFieldTermPicker.md

@@ -8,6 +8,7 @@ pages:
     - PropertyFieldPeoplePicker: 'controls/PropertyFieldPeoplePicker.md'
     - PropertyFieldSpinButton: 'controls/PropertyFieldSpinButton.md'
     - PropertyFieldTermPicker: 'controls/PropertyFieldTermPicker.md'
+    - PropertyFieldMultiSelect: 'controls/PropertyFieldMultiSelect.md'
   - 'Controls with callout':
     - PropertyFieldButtonWithCallout: 'controls/PropertyFieldButtonWithCallout.md'
     - PropertyFieldCheckboxWithCallout: 'controls/PropertyFieldCheckboxWithCallout.md'
@@ -18,6 +19,7 @@ pages:
     - PropertyFieldSliderWithCallout: 'controls/PropertyFieldSliderWithCallout.md'
     - PropertyFieldTextWithCallout: 'controls/PropertyFieldTextWithCallout.md'
     - PropertyFieldToggleWithCallout: 'controls/PropertyFieldToggleWithCallout.md'
+  - 'Beta testing': 'beta.md'
   - About:
     - 'Release notes': 'about/release-notes.md'
     - License: 'about/license.md'