diff --git a/docs/latest/assets/img/extensions-panel.gif b/docs/latest/assets/img/extensions-panel.gif
new file mode 100644
index 000000000..fd173bd70
Binary files /dev/null and b/docs/latest/assets/img/extensions-panel.gif differ
diff --git a/docs/latest/extensions/modules/panel.md b/docs/latest/extensions/modules/panel.md
index 77de01541..2b7ef7ac2 100644
--- a/docs/latest/extensions/modules/panel.md
+++ b/docs/latest/extensions/modules/panel.md
@@ -1,6 +1,19 @@
# Module: Panel
-...
+The panel module provides the ability to define `menuOptions` and `components`
+that can be used by the consuming application. `components` are React Components
+that can be displayed in the consuming application's "Panel" Component.
+
+
+
+
A panel extension example
+
+The `menuOptions`'s `target` key points to a registered `components`'s `id`. A
+`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
+optional provide it's own `context` value.
+
+The `getPanelModule` receives an object containing the `ExtensionManager`'s
+associated `ServicesManager` and `CommandsManager`.
```js
import MyComponent from './MyComponent.js';
@@ -10,15 +23,24 @@ export default {
/**
* @param {object} params
- * @param {object} params.servicesManager
+ * @param {ServicesManager} params.servicesManager
+ * @param {CommandsManager} params.commandsManager
*/
- getPanelModule({ servicesManager }) {
+ getPanelModule({ servicesManager, commandsManager }) {
return {
menuOptions: [
{
+ // A suggested icon
+ // Available icons determined by consuming app
icon: 'list',
+ // A suggested label
label: 'Magic',
+ // 'right' or 'left'
+ from: 'right',
+ // The target component to toggle open/close
target: 'target-component-id',
+ // Overrides `defaultContext`, if specified
+ context: ['ACTIVE_VIEWPORT:MAGIC'],
},
],
components: [
@@ -27,7 +49,7 @@ export default {
component: MyComponent,
},
],
- defaultContext: ['VIEWER'],
+ defaultContext: ['ROUTE:VIEWER'],
};
},
};