Chore: Added controls to ContextMenu story (#54373)

packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx

@@ -1,14 +1,14 @@
-import { ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { IconButton } from '../IconButton/IconButton';
-import { MenuGroup } from '../Menu/MenuGroup';
-import { MenuItem } from '../Menu/MenuItem';
 
-import { ContextMenu } from './ContextMenu';
+import { ContextMenu, ContextMenuProps } from './ContextMenu';
 import mdx from './ContextMenu.mdx';
-import { WithContextMenu } from './WithContextMenu';
+import { renderMenuItems } from './ContextMenuStoryHelper';
+import { WithContextMenu, WithContextMenuProps } from './WithContextMenu';
 
 const meta: ComponentMeta<typeof ContextMenu> = {
   title: 'General/ContextMenu',
@@ -18,39 +18,29 @@ const meta: ComponentMeta<typeof ContextMenu> = {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['renderMenuItems', 'renderHeader', 'onClose', 'children'],
+    },
   },
-};
-
-const menuItems = [
-  {
-    label: 'Test',
-    items: [
-      { label: 'First', ariaLabel: 'First' },
-      { label: 'Second', ariaLabel: 'Second' },
-      { label: 'Third', ariaLabel: 'Third' },
-      { label: 'Fourth', ariaLabel: 'Fourth' },
-      { label: 'Fifth', ariaLabel: 'Fifth' },
-    ],
+  args: {
+    x: 200,
+    y: 300,
+    focusOnOpen: true,
+    renderMenuItems: renderMenuItems,
   },
-];
+};
 
-const renderMenuItems = () => {
-  return menuItems.map((group, index) => (
-    <MenuGroup key={`${group.label}${index}`} label={group.label}>
-      {group.items.map((item) => (
-        <MenuItem key={item.label} label={item.label} />
-      ))}
-    </MenuGroup>
-  ));
+const renderHeader = (): React.ReactNode => {
+  return <h6>Menu</h6>;
 };
 
-export const Basic = () => {
-  return <ContextMenu x={10} y={11} onClose={() => {}} renderMenuItems={renderMenuItems} />;
+export const Basic: ComponentStory<typeof ContextMenu> = (args: ContextMenuProps) => {
+  return <ContextMenu {...args} onClose={() => action('onClose')('closed menu')} renderHeader={renderHeader} />;
 };
 
-export const WithState = () => {
+export const WithState: ComponentStory<typeof WithContextMenu> = (args: WithContextMenuProps) => {
   return (
-    <WithContextMenu renderMenuItems={renderMenuItems}>
+    <WithContextMenu {...args}>
       {({ openMenu }) => <IconButton name="info-circle" onClick={openMenu} />}
     </WithContextMenu>
   );

packages/grafana-ui/src/components/ContextMenu/ContextMenuStoryHelper.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { MenuGroup } from '../Menu/MenuGroup';
+import { MenuItem } from '../Menu/MenuItem';
+
+const menuItems = [
+  {
+    label: 'Test',
+    items: [
+      { label: 'First', ariaLabel: 'First' },
+      { label: 'Second', ariaLabel: 'Second' },
+      { label: 'Third', ariaLabel: 'Third' },
+      { label: 'Fourth', ariaLabel: 'Fourth' },
+      { label: 'Fifth', ariaLabel: 'Fifth' },
+    ],
+  },
+];
+
+export const renderMenuItems = () => {
+  return menuItems.map((group, index) => (
+    <MenuGroup key={`${group.label}${index}`} label={group.label}>
+      {group.items.map((item) => (
+        <MenuItem key={item.label} label={item.label} />
+      ))}
+    </MenuGroup>
+  ));
+};

packages/grafana-ui/src/components/ContextMenu/WithContextMenu.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { ContextMenu } from '../ContextMenu/ContextMenu';
 
-interface WithContextMenuProps {
+export interface WithContextMenuProps {
   /** Menu item trigger that accepts openMenu prop */
   children: (props: { openMenu: React.MouseEventHandler<HTMLElement> }) => JSX.Element;
   /** A function that returns an array of menu items */