diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON
index 14324271c..ac6a59992 100644
--- a/CHANGELOG.JSON
+++ b/CHANGELOG.JSON
@@ -1,5 +1,39 @@
{
"versions": [
+ {
+ "version": "2.6.0",
+ "changes": {
+ "new": [
+ "`AnimatedDialog`: new Animated Dialog control [#815](https://github.com/pnp/sp-dev-fx-controls-react/issues/815)",
+ "Jest unit tests [#834](https://github.com/pnp/sp-dev-fx-controls-react/pull/834)"
+ ],
+ "enhancements": [
+ "`IconPicker`: search icons using `contains` comparison.",
+ "`FilePicker`: default alphabet sorting [#824](https://github.com/pnp/sp-dev-fx-controls-react/pull/824)",
+ "`ListItemPicker`: ability to provide `orderBy` [#829](https://github.com/pnp/sp-dev-fx-controls-react/issues/829)",
+ "`Dashboard`: Dashboard widget wrapper for styling and error catching [#836](https://github.com/pnp/sp-dev-fx-controls-react/pull/836)",
+ "`FolderExplorer`: Update folder explorer documentation [#835](https://github.com/pnp/sp-dev-fx-controls-react/pull/835)"
+ ],
+ "fixes": [
+ "`IconPicker`: Fix case sensitive fluent icon search service [#814](https://github.com/pnp/sp-dev-fx-controls-react/pull/814)",
+ "`Carousel`: documentation fix - broken table style [#817](https://github.com/pnp/sp-dev-fx-controls-react/pull/817)",
+ "`AccessibleAccordion`: documentation link is broken [#818](https://github.com/pnp/sp-dev-fx-controls-react/issues/818)",
+ "Documentation: Controls link in the menu is broken [#821](https://github.com/pnp/sp-dev-fx-controls-react/pull/821)",
+ "`TreeView`: Fix two potential null reference issues [#832](https://github.com/pnp/sp-dev-fx-controls-react/pull/832)",
+ "`RichText`: Problem with bullets and number list [#795](https://github.com/pnp/sp-dev-fx-controls-react/issues/795)"
+ ]
+ },
+ "contributions": [
+ "[Anoop Tatti](https://github.com/anoopt)",
+ "[Ari Gunawan](https://github.com/AriGunawan)",
+ "[Gautam Sheth](https://github.com/gautamdsheth)",
+ "[Kunj Balkrishna Sangani](https://github.com/kunj-sangani)",
+ "[Marcin Wojciechowski](https://github.com/mgwojciech)",
+ "[Mark Bice](https://github.com/mbice)",
+ "[Nizar Grindi](https://github.com/NizarGrindi)",
+ "[Yannick Reekmans](https://github.com/YannickRe)"
+ ]
+ },
{
"version": "2.5.0",
"changes": {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index db13745c3..b23f2fb13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,33 @@
# Releases
+## 2.6.0
+
+### New control(s)
+
+- `AnimatedDialog`: new Animated Dialog control [#815](https://github.com/pnp/sp-dev-fx-controls-react/issues/815)
+- Jest unit tests [#834](https://github.com/pnp/sp-dev-fx-controls-react/pull/834)
+
+### Enhancements
+
+- `IconPicker`: search icons using `contains` comparison.
+- `FilePicker`: default alphabet sorting [#824](https://github.com/pnp/sp-dev-fx-controls-react/pull/824)
+- `ListItemPicker`: ability to provide `orderBy` [#829](https://github.com/pnp/sp-dev-fx-controls-react/issues/829)
+- `Dashboard`: Dashboard widget wrapper for styling and error catching [#836](https://github.com/pnp/sp-dev-fx-controls-react/pull/836)
+- `FolderExplorer`: Update folder explorer documentation [#835](https://github.com/pnp/sp-dev-fx-controls-react/pull/835)
+
+### Fixes
+
+- `IconPicker`: Fix case sensitive fluent icon search service [#814](https://github.com/pnp/sp-dev-fx-controls-react/pull/814)
+- `Carousel`: documentation fix - broken table style [#817](https://github.com/pnp/sp-dev-fx-controls-react/pull/817)
+- `AccessibleAccordion`: documentation link is broken [#818](https://github.com/pnp/sp-dev-fx-controls-react/issues/818)
+- Documentation: Controls link in the menu is broken [#821](https://github.com/pnp/sp-dev-fx-controls-react/pull/821)
+- `TreeView`: Fix two potential null reference issues [#832](https://github.com/pnp/sp-dev-fx-controls-react/pull/832)
+- `RichText`: Problem with bullets and number list [#795](https://github.com/pnp/sp-dev-fx-controls-react/issues/795)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Anoop Tatti](https://github.com/anoopt), [Ari Gunawan](https://github.com/AriGunawan), [Gautam Sheth](https://github.com/gautamdsheth), [Kunj Balkrishna Sangani](https://github.com/kunj-sangani), [Marcin Wojciechowski](https://github.com/mgwojciech), [Mark Bice](https://github.com/mbice), [Nizar Grindi](https://github.com/NizarGrindi), [Yannick Reekmans](https://github.com/YannickRe).
+
## 2.5.0
### Enhancements
diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
index db13745c3..b23f2fb13 100644
--- a/docs/documentation/docs/about/release-notes.md
+++ b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,33 @@
# Releases
+## 2.6.0
+
+### New control(s)
+
+- `AnimatedDialog`: new Animated Dialog control [#815](https://github.com/pnp/sp-dev-fx-controls-react/issues/815)
+- Jest unit tests [#834](https://github.com/pnp/sp-dev-fx-controls-react/pull/834)
+
+### Enhancements
+
+- `IconPicker`: search icons using `contains` comparison.
+- `FilePicker`: default alphabet sorting [#824](https://github.com/pnp/sp-dev-fx-controls-react/pull/824)
+- `ListItemPicker`: ability to provide `orderBy` [#829](https://github.com/pnp/sp-dev-fx-controls-react/issues/829)
+- `Dashboard`: Dashboard widget wrapper for styling and error catching [#836](https://github.com/pnp/sp-dev-fx-controls-react/pull/836)
+- `FolderExplorer`: Update folder explorer documentation [#835](https://github.com/pnp/sp-dev-fx-controls-react/pull/835)
+
+### Fixes
+
+- `IconPicker`: Fix case sensitive fluent icon search service [#814](https://github.com/pnp/sp-dev-fx-controls-react/pull/814)
+- `Carousel`: documentation fix - broken table style [#817](https://github.com/pnp/sp-dev-fx-controls-react/pull/817)
+- `AccessibleAccordion`: documentation link is broken [#818](https://github.com/pnp/sp-dev-fx-controls-react/issues/818)
+- Documentation: Controls link in the menu is broken [#821](https://github.com/pnp/sp-dev-fx-controls-react/pull/821)
+- `TreeView`: Fix two potential null reference issues [#832](https://github.com/pnp/sp-dev-fx-controls-react/pull/832)
+- `RichText`: Problem with bullets and number list [#795](https://github.com/pnp/sp-dev-fx-controls-react/issues/795)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Anoop Tatti](https://github.com/anoopt), [Ari Gunawan](https://github.com/AriGunawan), [Gautam Sheth](https://github.com/gautamdsheth), [Kunj Balkrishna Sangani](https://github.com/kunj-sangani), [Marcin Wojciechowski](https://github.com/mgwojciech), [Mark Bice](https://github.com/mbice), [Nizar Grindi](https://github.com/NizarGrindi), [Yannick Reekmans](https://github.com/YannickRe).
+
## 2.5.0
### Enhancements
diff --git a/docs/documentation/docs/assets/AnimatedDialog.gif b/docs/documentation/docs/assets/AnimatedDialog.gif
new file mode 100644
index 000000000..46138544a
Binary files /dev/null and b/docs/documentation/docs/assets/AnimatedDialog.gif differ
diff --git a/docs/documentation/docs/assets/AnimatedDialogCustomFooter.gif b/docs/documentation/docs/assets/AnimatedDialogCustomFooter.gif
new file mode 100644
index 000000000..e314f23fe
Binary files /dev/null and b/docs/documentation/docs/assets/AnimatedDialogCustomFooter.gif differ
diff --git a/docs/documentation/docs/assets/AnimatedDialogWithIcon.gif b/docs/documentation/docs/assets/AnimatedDialogWithIcon.gif
new file mode 100644
index 000000000..a45794818
Binary files /dev/null and b/docs/documentation/docs/assets/AnimatedDialogWithIcon.gif differ
diff --git a/docs/documentation/docs/assets/CustomisedAnimatedDialog.gif b/docs/documentation/docs/assets/CustomisedAnimatedDialog.gif
new file mode 100644
index 000000000..77b9e6ff5
Binary files /dev/null and b/docs/documentation/docs/assets/CustomisedAnimatedDialog.gif differ
diff --git a/docs/documentation/docs/assets/DefaultAnimatedDialog.gif b/docs/documentation/docs/assets/DefaultAnimatedDialog.gif
new file mode 100644
index 000000000..a06bf11ac
Binary files /dev/null and b/docs/documentation/docs/assets/DefaultAnimatedDialog.gif differ
diff --git a/docs/documentation/docs/controls/AnimatedDialog.md b/docs/documentation/docs/controls/AnimatedDialog.md
new file mode 100644
index 000000000..a0e189ee3
--- /dev/null
+++ b/docs/documentation/docs/controls/AnimatedDialog.md
@@ -0,0 +1,353 @@
+# Animated Dialog
+
+Animated Dialog control is an extended version of the [Office UI Fabric React Dialog](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog#IDialog). Animated Dialog control adds the following to the dialog
+ - Entrance and exit animations
+ - Animated icon above the title
+
+This control uses [Animate.css](https://animate.style/) to add the animations.
+
+Here is an example of the control in action:
+
+![Animated dialog control](../assets/AnimatedDialog.gif)
+
+## Animate.css and animation names
+
+[Animate.css](https://animate.style/) is a library that adds css animtions to controls. The website has all the names of the animations and any of them can be used in the `Animated Dialog` control. The default entrance animation name used in this control is `bounceIn` and the default exit animaton name is `zoomOut`.
+
+## 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.
+- In your component file, import the `AnimatedDialog` control as follows:
+
+```TypeScript
+import { AnimatedDialog } from "@pnp/spfx-controls-react/lib/AnimatedDialog";
+```
+
+## Different ways of using the control
+
+### 1. Simple way
+
+The code below adds a dialog with an entrance animation of `bounceIn` and exit animation of `zoomOut`. (These are the default animations)
+
+```TypeScript
+// Initial state
+this.state = {
+ showAnimatedDialog: false
+}
+...
+...
+// Properties of the dialog
+const animatedDialogContentProps: IDialogContentProps = {
+ type: DialogType.normal,
+ title: 'Animated Dialog',
+ subText: 'Do you like the animated dialog?',
+ };
+
+const animatedModalProps: IModalProps = {
+ isDarkOverlay: true
+};
+...
+...
+// Add a control (like a button) that changes the state showAnimatedDialog to true
+
+//Render the animated dialog
+ { this.setState({ showAnimatedDialog: false }); }}
+ dialogContentProps={animatedDialogContentProps}
+ modalProps={animatedModalProps}
+ >
+
+ { this.setState({ showAnimatedDialog: false }); }} text="Yes" />
+ { this.setState({ showAnimatedDialog: false }); }} text="No" />
+
+
+```
+#### Simple animated dialog
+
+![Simple animated dialog control](../assets/DefaultAnimatedDialog.gif)
+
+### 2. Adding custom animations
+
+The code below adds adds a dialog with an entrance animation of `fadeInDown` and exit animation of `fadeInDown`.
+
+```TypeScript
+// Initial state
+this.state = {
+ showAnimatedDialog: false
+}
+...
+...
+// Properties of the dialog
+const animatedDialogContentProps: IDialogContentProps = {
+ type: DialogType.normal,
+ title: 'Animated Dialog',
+ subText: 'Do you like the animated dialog?',
+ };
+
+const animatedModalProps: IModalProps = {
+ isDarkOverlay: true
+};
+...
+...
+// Add a control (like a button) that changes the state showAnimatedDialog to true
+
+//Render the animated dialog
+ { this.setState({ showAnimatedDialog: false }); }}
+ dialogContentProps={animatedDialogContentProps}
+ modalProps={animatedModalProps}
+ dialogAnimationInType='fadeInDown'
+ dialogAnimationOutType='fadeOutDown'
+ >
+
+ { this.setState({ showAnimatedDialog: false }); }} text="Yes" />
+ { this.setState({ showAnimatedDialog: false }); }} text="No" />
+
+
+```
+
+#### Animated dialog with custom animations
+
+![Animated dialog control with custom animations](../assets/CustomisedAnimatedDialog.gif)
+
+### 3. Adding icons and functions
+
+The code below does the following:
+- adds an icon (question mark) above the title
+- adds `Yes` and `No` buttons in the footer as `showAnimatedDialogFooter` is set to `true`.
+- passes 3 functions
+ - onOkClick : The function that gets executed when the `Ok/Yes` button is clicked.
+ - onSuccess : The function that gets executed on successful operation of the above function.
+ - onError: The function that gets executed when the `onOkClick` function fails.
+
+```TypeScript
+// Initial state
+this.state = {
+ showCustomisedAnimatedDialog: false,
+ showSuccessDialog: false,
+ showErrorDialog: false
+}
+...
+...
+const animatedDialogContentProps: IDialogContentProps = {
+ type: DialogType.normal,
+ title: 'Animated Dialog with icon'
+};
+
+const successDialogContentProps: IDialogContentProps = {
+ type: DialogType.normal,
+ title: 'Good answer!'
+};
+
+const animatedModalProps: IModalProps = {
+ isDarkOverlay: true,
+ containerClassName: `${styles.dialogContainer}`
+};
+
+// The operation that does something - e.g. update data
+const timeout = (ms: number): Promise => {
+ return new Promise((resolve, reject) => setTimeout(resolve, ms));
+};
+...
+...
+// Add a control (like a button) that changes the state showAnimatedDialog to true
+
+//Render the animated dialog
+ { this.setState({ showCustomisedAnimatedDialog: false }); }}
+ dialogContentProps={animatedDialogContentProps}
+ modalProps={animatedModalProps}
+ iconName='UnknownSolid'
+ showAnimatedDialogFooter={true}
+ okButtonText="Yes"
+ cancelButtonText="No"
+ onOkClick={() => timeout(1500)}
+ onSuccess={() => {
+ this.setState({ showCustomisedAnimatedDialog: false });
+ this.setState({ showSuccessDialog: true });
+ }}
+ onError={() => {
+ this.setState({ showCustomisedAnimatedDialog: false });
+ this.setState({ showErrorDialog: true });
+ }}>
+
+ Do you like the animated dialog?
+
+
+
+// Render success animated dialog which will appear after the execution
+// of onSuccess function in the above animated dialog
+
+ { this.setState({ showSuccessDialog: false }); }}
+ dialogContentProps={successDialogContentProps}
+ modalProps={animatedModalProps}
+ iconName='CompletedSolid'
+ >
+
+
+
+// Render success animated dialog which will appear after the execution
+// of the onClick function of the Button in the above animated dialog
+
+ { this.setState({ showSuccessDialog: false }); }}
+ dialogContentProps={successDialogContentProps}
+ modalProps={animatedModalProps}
+ iconName='CompletedSolid'>
+