Add missing documentation for FolderPicker control

Author: joelfmrodrigues

docs/documentation/docs/assets/FolderPicker-no-selection.png

@@ -0,0 +1,68 @@
+# FolderPicker control
+
+This control allows you to explore and select a folder.
+It also allows the user to create a new folder at the current level being explored.
+
+Here is an example of the control:
+
+![FolderPicker](../assets/FolderPicker.png)
+
+`FolderPicker` no selection:
+
+![FolderPicker no selection](../assets/FolderPicker-no-selection.png)
+
+`FolderPicker` selection:
+
+![FolderPicker selection](../assets/FolderPicker-selection.png)
+
+`FolderPicker` selected:
+
+![FolderPicker selected](../assets/FolderPicker-selected.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 control into your component:
+
+```TypeScript
+import { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker";
+```
+
+- Use the `FolderPicker` control in your code as follows:
+
+```TypeScript
+<FolderPicker context={this.props.context}
+                label='Folder Picker'
+                required={true}
+                rootFolder={{
+                  Name: 'Documents',
+                  ServerRelativeUrl: `/sites/TestSite/Shared Documents`
+                }}                
+                onSelect={this._onFolderSelect}
+                canCreateFolders={true} />
+```
+
+- The `onSelect` change event returns the selected folder and can be implemented as follows:
+
+```TypeScript
+private _onFolderSelect = (folder: IFolder): void => {
+  console.log('selected folder', folder);
+}
+```
+
+## Implementation
+
+The `FolderPicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| label | string | yes | The label for the control. |
+| rootFolder | IFolder | yes | The lowest level folder that can be explored. This can be the root folder of a library. |
+| defaultFolder | IFolder | no | The default folder to be selected or explored. |
+| required | boolean | no | Is selection required. |
+| disabled | boolean | no | Is the control disabled. |
+| canCreateFolders | boolean | no | Allow current user to create folders on the target location. If enabled, you need to ensure that the user has the required permissions. |
+| onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FolderPicker)

docs/documentation/docs/assets/FolderPicker-selected.png

@@ -54,6 +54,7 @@ The following controls are currently available:
 - [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
 - [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application)
 - [FolderExplorer](./controls/FolderExplorer) (Control that allows to browse the folders and sub-folders from a root folder)
+- [FolderPicker](./controls/FolderPicker) (Control that allows to browse and select a folder)
 - [GridLayout](./controls/GridLayout) (control that renders a responsive grid layout for your web parts)
 - [IconPicker](./controls/IconPicker) (control that allows to search and select an icon from office-ui-fabric icons)
 - [IFrameDialog](./controls/IFrameDialog) (renders a Dialog with an iframe as a content)

docs/documentation/docs/assets/FolderPicker-selection.png

@@ -18,6 +18,7 @@ nav:
     - FilePicker: 'controls/FilePicker.md'
     - FileTypeIcon: 'controls/FileTypeIcon.md'
     - FolderExplorer: 'controls/FolderExplorer.md'
+    - FolderPicker: 'controls/FolderPicker.md'
     - GridLayout: 'controls/GridLayout.md'
     - IconPicker: 'controls/IconPicker.md'
     - IFrameDialog: 'controls/IFrameDialog.md'

docs/documentation/docs/assets/FolderPicker.png

@@ -9,7 +9,7 @@ export interface IFolderPickerProps {
   context: WebPartContext | ExtensionContext;
 
   /**
-   * The field label
+   * The label for the control
    */
   label: string;
 
@@ -24,12 +24,12 @@ export interface IFolderPickerProps {
   defaultFolder?: IFolder;
 
   /**
-   * Is the field required
+   * Is selection required
    */
   required?: boolean;
 
   /**
-   * Is the field disabled
+   * Is the control disabled
    */
   disabled?: boolean;