From 195dce2704fdbd7c3bb93fc12d14f268b472db6f Mon Sep 17 00:00:00 2001
From: Mike Turck <michaelrturck@gmail.com>
Date: Thu, 17 Feb 2022 13:47:54 -0600
Subject: [PATCH] Add 'o' keyboard shortcut to toggle the outline addon. Add
 note about keyboard shortuct in the addon documentation.

---
 addons/outline/README.md               |  2 +-
 addons/outline/src/OutlineSelector.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/addons/outline/README.md b/addons/outline/README.md
index c94df715d43..bbec1211d84 100644
--- a/addons/outline/README.md
+++ b/addons/outline/README.md
@@ -20,4 +20,4 @@ module.exports = {
 };
 ```
 
-You can now click on the outline button in the toolbar to toggle the outlines.
+You can now click on the outline button or press the <kbd>o</kbd> key in the toolbar to toggle the outlines.
diff --git a/addons/outline/src/OutlineSelector.tsx b/addons/outline/src/OutlineSelector.tsx
index 9a91fba9cd6..b1e92ba02fd 100644
--- a/addons/outline/src/OutlineSelector.tsx
+++ b/addons/outline/src/OutlineSelector.tsx
@@ -1,10 +1,11 @@
-import React, { memo, useCallback } from 'react';
-import { useGlobals } from '@storybook/api';
+import React, { memo, useCallback, useEffect } from 'react';
+import { useGlobals, useStorybookApi } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';
-import { PARAM_KEY } from './constants';
+import { ADDON_ID, PARAM_KEY } from './constants';
 
 export const OutlineSelector = memo(() => {
   const [globals, updateGlobals] = useGlobals();
+  const api = useStorybookApi();
 
   const isActive = globals[PARAM_KEY] || false;
 
@@ -16,6 +17,16 @@ export const OutlineSelector = memo(() => {
     [isActive]
   );
 
+  useEffect(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: 'Toggle Measure [O]',
+      defaultShortcut: ['O'],
+      actionName: 'outline',
+      showInMenu: false,
+      action: toggleOutline,
+    });
+  }, [toggleOutline, api]);
+
   return (
     <IconButton
       key="outline"