Grafana-UI: Add docs for ConfirmButton (#27477)

* Grafana-UI: Add docs for ConfirmButton

* Grafana-UI: Add comment

* Update packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.mdx

Co-authored-by: Peter Holmberg <peterholmberg@users.noreply.github.com>

Co-authored-by: Peter Holmberg <peterholmberg@users.noreply.github.com>

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

@@ -1,11 +1,11 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Props } from '@storybook/addon-docs/blocks';
 import { Cascader } from './Cascader';
 
 <Meta title="MDX|Cascader" component={Cascader} />
 
 # Cascader
 
-The cascader component is a `Select` with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the `Select` component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list. 
+The cascader component is a `Select` with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the `Select` component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list.
 
 You can either use the `Simple` cascader component for an empty input as default state or use the `initialValue` or `allowCustomValue` fields to pre-fill your cascader. Initial value means that one of the options from your cascaded list is pre-selected. Custom value means that apart from existing options from the list, your users can add custom values to the list by typing them in the `Select` input.
 

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

@@ -1,11 +1,31 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { ConfirmButton } from './ConfirmButton';
+
 <Meta title="MDX|ConfirmButton" component={ConfirmButton} />
 
 # ConfirmButton
 
-The ConfirmButton is an interactive component that adds a double-confirm option to a clickable action. When clicked, the action is replaced by an inline confirmation with the option to cancel. In Grafana, this is used for example for editing values in settings tables.
+The ConfirmButton is an interactive component that adds a double-confirm option to a clickable action. When clicked, the action is replaced by an inline confirmation with the option to cancel. In Grafana, this is used, for example, for editing values in settings tables.
 
 ## Variants
 
 There are four variants of the `ConfirmButton`: primary, secondary, destructive, and link. The primary and secondary variants include a primary or secondary `Button` component. The primary and secondary variant should be used to confirm actions like saving or adding data. The destructive variant includes a destructive `Button` component. The destructive variant should be used to double-confirm a deletion or removal of an element. The link variant doesn't include any button and double-confirms as links instead.
 
 Apart from the button variant, you can also modify the button size and the button text.
+
+## Usage
+
+```jsx
+ <ConfirmButton
+  closeOnConfirm
+  size='md'
+  confirmText='Are you sure?'
+  confirmVariant='secondary'
+  onConfirm={() => {
+   console.log('Action confirmed!')
+  }}
+>
+  Click me
+</ConfirmButton>
+```
+<Props of={ConfirmButton} />

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

@@ -5,6 +5,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../Button';
 import { DeleteButton } from './DeleteButton';
+import mdx from './ConfirmButton.mdx';
 
 const getKnobs = () => {
   return {
@@ -31,6 +32,11 @@ export default {
   component: ConfirmButton,
   decorators: [withCenteredStory],
   subcomponents: { DeleteButton },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {

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

@@ -53,15 +53,24 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 });
 
 export interface Props extends Themeable {
+  /** Confirm action callback */
+  onConfirm(): void;
+  /** Custom button styles */
   className?: string;
+  /** Button size */
   size?: ComponentSize;
+  /** Text for the Confirm button */
   confirmText?: string;
+  /** Disable button click action */
   disabled?: boolean;
+  /** Variant of the Confirm button */
   confirmVariant?: ButtonVariant;
+  /** Hide confirm actions when after of them is clicked */
   closeOnConfirm?: boolean;
 
-  onConfirm(): void;
+  /** Optional on click handler for the original button */
   onClick?(): void;
+  /** Callback for the cancel action */
   onCancel?(): void;
 }
 
@@ -70,13 +79,6 @@ interface State {
 }
 
 class UnThemedConfirmButton extends PureComponent<Props, State> {
-  static defaultProps: Partial<Props> = {
-    size: 'md',
-    confirmText: 'Save',
-    disabled: false,
-    confirmVariant: 'primary',
-  };
-
   state: State = {
     showConfirm: false,
   };
@@ -106,7 +108,7 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
       this.props.onCancel();
     }
   };
-  onConfirm = (event: SyntheticEvent) => {
+  onConfirm = () => {
     this.props.onConfirm();
     if (this.props.closeOnConfirm) {
       this.setState({
@@ -166,4 +168,13 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
 }
 
 export const ConfirmButton = withTheme(UnThemedConfirmButton);
+
+// Declare defaultProps directly on the themed component so they are displayed
+// in the props table
+ConfirmButton.defaultProps = {
+  size: 'md',
+  confirmText: 'Save',
+  disabled: false,
+  confirmVariant: 'primary',
+};
 ConfirmButton.displayName = 'ConfirmButton';

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx

@@ -4,9 +4,12 @@ import { ComponentSize } from '../../types/size';
 import { Button } from '../Button';
 
 export interface Props {
-  size?: ComponentSize;
-  disabled?: boolean;
+  /** Confirm action callback */
   onConfirm(): void;
+  /** Button size */
+  size?: ComponentSize;
+  /** Disable button click action */
+  disabled?: boolean;
 }
 
 export const DeleteButton: FC<Props> = ({ size, disabled, onConfirm }) => {