Merge branch 'Konradox-feature/icon-picker' into dev

Author: estruyf

docs/documentation/docs/assets/IconPickerOverview.png

@@ -23,19 +23,17 @@ import { FolderExplorer, IFolder } from "@pnp/spfx-controls-react/lib/FolderExpl
 - Use the `FolderExplorer` control in your code as follows:
 
 ```TypeScript
-<FolderExplorer
-              context={this.props.context}
-              rootFolder={{
-                Name: 'Documents',
-                ServerRelativeUrl: `/sites/TestSite/Shared Documents`
-              }}
-              defaultFolder={{
-                Name: 'Documents',
-                ServerRelativeUrl: `/sites/TestSite/Shared Documents`
-              }}
-              onSelect={this._onFolderSelect}
-              canCreateFolders={true}
-            />
+<FolderExplorer context={this.props.context}
+                rootFolder={{
+                  Name: 'Documents',
+                  ServerRelativeUrl: `/sites/TestSite/Shared Documents`
+                }}
+                defaultFolder={{
+                  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:
@@ -60,6 +58,4 @@ The `FolderExplorer` control can be configured with the following properties:
 | hiddenFilterBox | boolean | no | Hide the filter box |
 | onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |
 
-
-
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FolderExplorer)

docs/documentation/docs/assets/IconPickerPanel.gif

@@ -0,0 +1,46 @@
+# IconPicker control
+
+Control that allows to search and select an icon from office-ui-fabric-react icons.
+
+## Overview
+The control allows selecting an icon from the list of icons available in the office-ui-fabric-react library. Icon list is a static copy of available icons. Currently, only one icon selection is supported.
+![Icon Picker overview](../assets/IconPickerOverview.png)
+
+
+## Displayed in the panel
+Icon picker always opens a new panel where you can pick an icon. The panel displays all the icons and maintains readability. Picker does not displays selected icon outside the panel.
+![Icon Picker panel](../assets/IconPickerPanel.gif)
+
+
+## How to use this control
+
+- 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 module to your component:
+
+```TypeScript
+import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker';
+```
+
+- Use the `IconPicker` control in your code as follows:
+
+```TypeScript
+<IconPicker buttonLabel={'Icon'}
+            onChange={(iconName: string) => { this.setState({icon: iconName}); }}
+            onSave={(iconName: string) => { this.setState({icon: iconName}); }} />
+```
+
+## Implementation
+
+The IconPicker component can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| buttonLabel | string | no | Specifies the label of the icon picker button. |
+| onSave | (iconName: string) => void | yes | Handler when the icon has been selected and picker has been closed. |
+| onChange | (iconName: string) => void | no | Handler when the icon selection has been changed. |
+| disabled | boolean | no | Specifies if the picker button is disabled |
+| buttonClassName | boolean | no | If provided, additional class name will be added to the picker button |
+| panelClassName | boolean | no | If provided, additional class name will be added to the picker panel |
+| currentIcon | boolean | no | Specifies default selected icon |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/IconPicker)

docs/documentation/docs/controls/FolderExplorer.md

@@ -41,6 +41,7 @@ The following controls are currently available:
 - [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)
 - [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)
 - [ListItemPicker](./controls/ListItemPicker) (allows to select one or more items from a list)
 - [ListPicker](./controls/ListPicker) (allows to select one or multiple available lists/libraries of the current site)

docs/documentation/docs/controls/IconPicker.md

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

docs/documentation/docs/index.md

@@ -0,0 +1 @@
+export * from './controls/iconPicker/index';

docs/documentation/mkdocs.yml

@@ -0,0 +1,30 @@
+export interface IIconPickerProps {
+    /**
+     * call-back function when icon selection has been confirmed
+     */
+    onSave(iconName: string): void;
+    /**
+     * call-back function when icon has changed
+     */
+    onChange?(iconName: string): void;
+    /**
+     * Specifies the label of the icon picker button
+     */
+    buttonLabel?: string;
+    /**
+     * Specifies if the picker button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specifies a custom className for the picker button
+     */
+    buttonClassName?: string;
+    /**
+     * Specifies a custom className for the panel element
+     */
+    panelClassName?: string;
+    /**
+     * initially selected icon
+     */
+    currentIcon?: string;
+}

src/IconPicker.ts

@@ -0,0 +1,5 @@
+export interface IIconPickerState {
+    items: string[];
+    currentIcon?: string;
+    isPanelOpen: boolean;
+}