Chore: Improve Toolbar Button Story (#51255)

* Chore: Improve ToolbarButton story

* update .mdx for toolbarButton component

* move toolbarButton component to extra directory

packages/grafana-ui/src/components/Button/ToolbarButton.story.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-
-import { ToolbarButton, ButtonGroup, VerticalGroup, HorizontalGroup } from '@grafana/ui';
-
-import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
-import { ToolbarButtonVariant } from './ToolbarButton';
-import { ToolbarButtonRow } from './ToolbarButtonRow';
-
-export default {
-  title: 'Buttons/ToolbarButton',
-  component: ToolbarButton,
-  decorators: [withCenteredStory],
-  parameters: {},
-};
-
-export const List = () => {
-  const variants: ToolbarButtonVariant[] = ['default', 'active', 'primary', 'destructive'];
-
-  return (
-    <DashboardStoryCanvas>
-      <VerticalGroup>
-        Button states
-        <ToolbarButtonRow>
-          <ToolbarButton>Just text</ToolbarButton>
-          <ToolbarButton icon="sync" tooltip="Sync" />
-          <ToolbarButton imgSrc="./grafana_icon.svg">With imgSrc</ToolbarButton>
-          <ToolbarButton icon="cloud" isOpen={true}>
-            isOpen
-          </ToolbarButton>
-          <ToolbarButton icon="cloud" isOpen={false}>
-            isOpen = false
-          </ToolbarButton>
-        </ToolbarButtonRow>
-        <br />
-        disabled
-        <ToolbarButtonRow>
-          <ToolbarButton icon="sync" disabled>
-            Disabled
-          </ToolbarButton>
-        </ToolbarButtonRow>
-        <br />
-        Variants
-        <ToolbarButtonRow>
-          {variants.map((variant) => (
-            <ToolbarButton icon="sync" tooltip="Sync" variant={variant} key={variant}>
-              {variant}
-            </ToolbarButton>
-          ))}
-        </ToolbarButtonRow>
-        <br />
-        disabled
-        <ToolbarButtonRow>
-          <ToolbarButton icon="sync" disabled>
-            Disabled
-          </ToolbarButton>
-        </ToolbarButtonRow>
-        <br />
-        Variants
-        <ToolbarButtonRow>
-          {variants.map((variant) => (
-            <ToolbarButton icon="sync" tooltip="Sync" variant={variant} key={variant}>
-              {variant}
-            </ToolbarButton>
-          ))}
-        </ToolbarButtonRow>
-        <br />
-        Wrapped in noSpacing ButtonGroup
-        <ButtonGroup>
-          <ToolbarButton icon="clock-nine" tooltip="Time picker">
-            2020-10-02
-          </ToolbarButton>
-          <ToolbarButton icon="search-minus" />
-        </ButtonGroup>
-        <br />
-        <ButtonGroup>
-          <ToolbarButton icon="sync" />
-          <ToolbarButton isOpen={false} narrow />
-        </ButtonGroup>
-        <br />
-        As primary and destructive variant
-        <HorizontalGroup>
-          <ButtonGroup>
-            <ToolbarButton variant="primary" icon="sync">
-              Run query
-            </ToolbarButton>
-            <ToolbarButton isOpen={false} narrow variant="primary" />
-          </ButtonGroup>
-          <ButtonGroup>
-            <ToolbarButton variant="destructive" icon="sync">
-              Run query
-            </ToolbarButton>
-            <ToolbarButton isOpen={false} narrow variant="destructive" />
-          </ButtonGroup>
-        </HorizontalGroup>
-      </VerticalGroup>
-    </DashboardStoryCanvas>
-  );
-};

packages/grafana-ui/src/components/Button/index.ts

@@ -1,4 +1,2 @@
 export * from './Button';
 export { ButtonGroup } from './ButtonGroup';
-export { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton';
-export { ToolbarButtonRow } from './ToolbarButtonRow';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -19,7 +19,8 @@ import { selectors } from '@grafana/e2e-selectors';
 import { withTheme, useTheme } from '../../themes/ThemeContext';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { Themeable } from '../../types';
-import { ButtonGroup, ToolbarButton } from '../Button';
+import { ButtonGroup } from '../Button';
+import { ToolbarButton } from '../ToolbarButton';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 import { TimePickerContent } from './TimeRangePicker/TimePickerContent';

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -8,10 +8,11 @@ import React, { HTMLAttributes } from 'react';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { ToolbarButtonVariant, ToolbarButton, ButtonGroup } from '../Button';
+import { ButtonGroup } from '../Button';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
+import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton';
 import { PopoverContent } from '../Tooltip';
 
 export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -4,8 +4,9 @@ import React, { PureComponent } from 'react';
 import { SelectableValue, parseDuration } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { ButtonGroup, ToolbarButton, ToolbarButtonVariant } from '../Button';
+import { ButtonGroup } from '../Button';
 import { ButtonSelect } from '../Dropdown/ButtonSelect';
+import { ToolbarButtonVariant, ToolbarButton } from '../ToolbarButton';
 
 // Default intervals used in the refresh picker component
 export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.mdx

@@ -0,0 +1,26 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { ToolbarButton } from './ToolbarButton';
+
+# ToolbarButton
+
+Multiple buttons that form a toolbar. Each button can contain an icon, image and text.
+There are three variants of the `ToolbarButton`: default, primary and destructive.
+
+## Usage
+
+This example shows how to use several buttons in a `ToolbarButtonRow`.
+
+```jsx
+<ToolbarButtonRow>
+  <ToolbarButton variant="default" iconOnly={false} isOpen={false}>
+    Last 6 hours
+  </ToolbarButton>
+  <ButtonGroup>
+    <ToolbarButton icon="search-minus" variant="default" />
+    <ToolbarButton icon="search-plus" variant="default" />
+  </ButtonGroup>
+  <ToolbarButton icon="sync" isOpen={false} variant="primary" />
+</ToolbarButtonRow>
+```
+
+<Props of={ToolbarButton} />

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

@@ -0,0 +1,103 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { ButtonGroup } from '../Button';
+
+import { ToolbarButton, ToolbarButtonProps } from './ToolbarButton';
+import mdx from './ToolbarButton.mdx';
+import { ToolbarButtonRow } from './ToolbarButtonRow';
+
+export default {
+  title: 'Buttons/ToolbarButton',
+  component: ToolbarButton,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+    controls: {
+      exclude: ['imgSrc', 'imgAlt', 'iconOnly', 'narrow'],
+    },
+  },
+  args: {
+    variant: 'default',
+    fullWidth: false,
+    disabled: false,
+    toolbarButtonText: 'Just text',
+    icon: 'cloud',
+    showDropdown: false,
+    isOpen: false,
+    tooltip: 'This is a tooltip',
+    isHighlighted: false,
+    imgSrc: '',
+    imgAlt: '',
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'primary', 'active', 'destructive'],
+    },
+    icon: {
+      control: {
+        type: 'select',
+        options: ['sync', 'cloud'],
+      },
+    },
+  },
+} as Meta;
+
+interface StoryProps extends Partial<ToolbarButtonProps> {
+  toolbarButtonText: string;
+  showDropdown: boolean;
+}
+
+export const BasicWithText: Story<StoryProps> = (args) => {
+  return (
+    <ToolbarButton
+      variant={args.variant}
+      disabled={args.disabled}
+      fullWidth={args.fullWidth}
+      tooltip={args.tooltip}
+      isOpen={args.showDropdown ? args.isOpen : undefined}
+      isHighlighted={args.isHighlighted}
+      imgSrc={args.imgSrc}
+      imgAlt={args.imgAlt}
+    >
+      {args.toolbarButtonText}
+    </ToolbarButton>
+  );
+};
+
+export const BasicWithIcon: Story<StoryProps> = (args) => {
+  return (
+    <ToolbarButton
+      variant={args.variant}
+      icon={args.icon}
+      isOpen={args.showDropdown ? args.isOpen : undefined}
+      tooltip={args.tooltip}
+      disabled={args.disabled}
+      fullWidth={args.fullWidth}
+      isHighlighted={args.isHighlighted}
+      imgSrc={args.imgSrc}
+      imgAlt={args.imgAlt}
+    />
+  );
+};
+
+export const List: Story<ToolbarButtonProps> = (args) => {
+  return (
+    <ToolbarButtonRow>
+      <ToolbarButton variant={args.variant} iconOnly={false} isOpen={false}>
+        Last 6 hours
+      </ToolbarButton>
+      <ButtonGroup>
+        <ToolbarButton icon="search-minus" variant={args.variant} />
+        <ToolbarButton icon="search-plus" variant={args.variant} />
+      </ButtonGroup>
+      <ToolbarButton icon="sync" isOpen={false} variant={args.variant} />
+    </ToolbarButtonRow>
+  );
+};

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -8,12 +8,11 @@ import { selectors } from '@grafana/e2e-selectors';
 import { styleMixins, useStyles2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 import { IconName } from '../../types/icon';
+import { getPropertiesForVariant } from '../Button';
 import { Icon } from '../Icon/Icon';
 import { Tooltip } from '../Tooltip/Tooltip';
 
-import { getPropertiesForVariant } from './Button';
+type CommonProps = {
-
-export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Icon name */
   icon?: IconName | React.ReactNode;
   /** Tooltip */
@@ -34,11 +33,13 @@ export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconOnly?: boolean;
   /** Show highlight dot */
   isHighlighted?: boolean;
-}
+};
+
+export type ToolbarButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ToolbarButtonVariant = 'default' | 'primary' | 'destructive' | 'active';
 
-export const ToolbarButton = forwardRef<HTMLButtonElement, Props>(
+export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
   (
     {
       tooltip,

packages/grafana-ui/src/components/ToolbarButton/index.ts

@@ -0,0 +1,2 @@
+export * from './ToolbarButton';
+export { ToolbarButtonRow } from './ToolbarButtonRow';

packages/grafana-ui/src/components/index.ts

@@ -178,7 +178,8 @@ export { RangeSlider } from './Slider/RangeSlider';
 export { Form } from './Forms/Form';
 export { sharedInputStyle } from './Forms/commonStyles';
 export { InputControl } from './InputControl';
-export { Button, LinkButton, ButtonVariant, ToolbarButton, ButtonGroup, ToolbarButtonRow, ButtonProps } from './Button';
+export { Button, LinkButton, ButtonVariant, ButtonGroup, ButtonProps } from './Button';
+export { ToolbarButton, ToolbarButtonRow } from './ToolbarButton';
 export { ValuePicker } from './ValuePicker/ValuePicker';
 export { fieldMatchersUI } from './MatchersUI/fieldMatchersUI';
 export { Link } from './Link/Link';