mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
GrafanaUI: Improve ClipboardButton story (#52656)
* GrafanaUI: Improve ClipboardButton story * GrafanaUI: Improve ClipboardButton story
This commit is contained in:
parent
39f385d2cd
commit
1ee21b81d1
@ -5,7 +5,9 @@ import { ClipboardButton } from './ClipboardButton';
|
||||
|
||||
# ClipboardButton
|
||||
|
||||
A wrapper for [clipboard.js](https://github.com/zenorocha/clipboard.js) library that allows copying text to clipboard. The text to be copied should be provided via `getText` prop.
|
||||
A control for allowing the user to copy text to their clipboard. Uses native APIs on modern browsers, falling back to the old `document.execCommand('copy')` API on other browsers. The text to be copied should be provided via `getText` prop.
|
||||
|
||||
Commonly it is passed in the `addonAfter` prop on `<Input />`
|
||||
|
||||
# Usage
|
||||
|
||||
@ -19,4 +21,17 @@ A wrapper for [clipboard.js](https://github.com/zenorocha/clipboard.js) library
|
||||
</ClipboardButton>
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Input
|
||||
id="link-url-input"
|
||||
value={shareUrl}
|
||||
readOnly
|
||||
addonAfter={
|
||||
<ClipboardButton icon="copy" variant="primary" getText={() => shareUrl}>
|
||||
Copy
|
||||
</ClipboardButton>
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
||||
<Props of={ClipboardButton} />
|
||||
|
@ -1,15 +1,16 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { Input } from '../Forms/Legacy/Input/Input';
|
||||
import { Field } from '../Forms/Field';
|
||||
import { Input } from '../Input/Input';
|
||||
|
||||
import { ClipboardButton, Props } from './ClipboardButton';
|
||||
import { ClipboardButton as ClipboardButtonImpl, Props } from './ClipboardButton';
|
||||
import mdx from './ClipboardButton.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Buttons/ClipboardButton',
|
||||
component: ClipboardButton,
|
||||
component: ClipboardButtonImpl,
|
||||
decorators: [withCenteredStory],
|
||||
parameters: {
|
||||
docs: {
|
||||
@ -26,29 +27,33 @@ interface StoryProps extends Partial<Props> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
const Wrapper: Story<StoryProps> = (args) => {
|
||||
const [copyMessage, setCopyMessage] = useState('');
|
||||
const clipboardCopyMessage = 'Value copied to clipboard';
|
||||
export const ClipboardButton: Story<StoryProps> = (args) => {
|
||||
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
<div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}>
|
||||
<ClipboardButton
|
||||
variant="secondary"
|
||||
size={args.size}
|
||||
getText={() => args.inputText}
|
||||
onClipboardCopy={() => setCopyMessage(clipboardCopyMessage)}
|
||||
>
|
||||
{args.buttonText}
|
||||
</ClipboardButton>
|
||||
<Input value={args.inputText} onChange={() => {}} />
|
||||
</div>
|
||||
<span>{copyMessage}</span>
|
||||
<ClipboardButtonImpl icon="copy" variant="primary" getText={() => shareUrl} {...args}>
|
||||
Copy URL
|
||||
</ClipboardButtonImpl>
|
||||
);
|
||||
};
|
||||
|
||||
export const AsInputFieldAddon: Story<StoryProps> = (args) => {
|
||||
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', maxWidth: 500 }}>
|
||||
<Field label="Link URL">
|
||||
<Input
|
||||
id="link-url-input"
|
||||
value={shareUrl}
|
||||
readOnly
|
||||
addonAfter={
|
||||
<ClipboardButtonImpl icon="copy" variant="primary" getText={() => shareUrl} {...args}>
|
||||
Copy
|
||||
</ClipboardButtonImpl>
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const CopyToClipboard = Wrapper.bind({});
|
||||
CopyToClipboard.args = {
|
||||
inputText: 'go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only',
|
||||
buttonText: 'Copy to clipboard',
|
||||
size: 'md',
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user