GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add 'o' keyboard shortcut to toggle the outline addon. Add note about keyboard shortuct in the addon documentation.

Browse Source
This commit is contained in:
Mike Turck 2022-02-17 13:47:54 -06:00
parent d286d4f2fe
commit 195dce2704
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/outline/README.md
View File

@ -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.

17
addons/outline/src/OutlineSelector.tsx
View File

@ -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"