From 2c6020a57aa7aad91d6c492fe4ba6c6c203d545c Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Wed, 9 Sep 2020 17:07:53 +0300 Subject: [PATCH] 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 Co-authored-by: Peter Holmberg (cherry picked from commit 1a5c049883c50227f16d140c62abed1f759201a0) --- .../src/components/Cascader/Cascader.mdx | 4 +-- .../ConfirmButton/ConfirmButton.mdx | 22 +++++++++++++- .../ConfirmButton/ConfirmButton.story.tsx | 6 ++++ .../ConfirmButton/ConfirmButton.tsx | 29 +++++++++++++------ .../components/ConfirmButton/DeleteButton.tsx | 7 +++-- 5 files changed, 54 insertions(+), 14 deletions(-) diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.mdx b/packages/grafana-ui/src/components/Cascader/Cascader.mdx index de980a3da5d..9197f93de6e 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.mdx +++ b/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'; # 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. diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.mdx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.mdx index 88ade6d957d..04daec4a46c 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.mdx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.mdx @@ -1,11 +1,31 @@ +import { Meta, Props } from '@storybook/addon-docs/blocks'; +import { ConfirmButton } from './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 + { + console.log('Action confirmed!') + }} +> + Click me + +``` + diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index fdd7526b188..e61f9794043 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/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 = () => { diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index a350eed41ac..3d57bd43ab2 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/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 { - static defaultProps: Partial = { - size: 'md', - confirmText: 'Save', - disabled: false, - confirmVariant: 'primary', - }; - state: State = { showConfirm: false, }; @@ -106,7 +108,7 @@ class UnThemedConfirmButton extends PureComponent { this.props.onCancel(); } }; - onConfirm = (event: SyntheticEvent) => { + onConfirm = () => { this.props.onConfirm(); if (this.props.closeOnConfirm) { this.setState({ @@ -166,4 +168,13 @@ class UnThemedConfirmButton extends PureComponent { } 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'; diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx index 084254ce9c6..1f73f30623c 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx +++ b/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 = ({ size, disabled, onConfirm }) => {