Icon picker with localisation and documentation

docs/documentation/docs/controls/IconPicker.md

@@ -0,0 +1,48 @@
+# 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/index.md

@@ -40,6 +40,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)
 - [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/mkdocs.yml

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

src/IconPicker.ts

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

src/controls/iconPicker/IIconPickerProps.ts

@@ -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/controls/iconPicker/IIconPickerState.ts

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