Chore: Added controls to IconButton & renamed Simple story to Examples (#54371)

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { useTheme2 } from '../../themes';
@@ -7,7 +7,7 @@ import { IconSize, IconName } from '../../types';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { VerticalGroup } from '../Layout/Layout';
 
-import { IconButton, IconButtonVariant } from './IconButton';
+import { IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
 import mdx from './IconButton.mdx';
 
 const meta: ComponentMeta<typeof IconButton> = {
@@ -19,9 +19,23 @@ const meta: ComponentMeta<typeof IconButton> = {
       page: mdx,
     },
   },
+  args: {
+    name: 'apps',
+    size: 'md',
+    iconType: 'default',
+    tooltip: 'sample tooltip message',
+    tooltipPlacement: 'top',
+    variant: 'secondary',
+    ariaLabel: 'sample aria-label content',
+  },
+  argTypes: {
+    tooltip: {
+      control: 'text',
+    },
+  },
 };
 
-export const Simple = () => {
+export const Examples = () => {
   return (
     <div>
       <RenderScenario background="canvas" />
@@ -31,6 +45,10 @@ export const Simple = () => {
   );
 };
 
+export const Basic: ComponentStory<typeof IconButton> = (args: IconButtonProps) => {
+  return <IconButton {...args} />;
+};
+
 interface ScenarioProps {
   background: 'canvas' | 'primary' | 'secondary';
 }