GrafanaUI: Improve ClipboardButton story (#52656)

* GrafanaUI: Improve ClipboardButton story

* GrafanaUI: Improve ClipboardButton story

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

@@ -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} />

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx

@@ -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) => {
+export const ClipboardButton: Story<StoryProps> = (args) => {
-  const [copyMessage, setCopyMessage] = useState('');
+  const shareUrl = 'https://grafana.com/d/abcDEF-34t';
-  const clipboardCopyMessage = 'Value copied to clipboard';
+
   return (
-    <div style={{ width: '100%' }}>
+    <ClipboardButtonImpl icon="copy" variant="primary" getText={() => shareUrl} {...args}>
-      <div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}>
+      Copy URL
-        <ClipboardButton
+    </ClipboardButtonImpl>
-          variant="secondary"
+  );
-          size={args.size}
+};
-          getText={() => args.inputText}
+
-          onClipboardCopy={() => setCopyMessage(clipboardCopyMessage)}
+export const AsInputFieldAddon: Story<StoryProps> = (args) => {
-        >
+  const shareUrl = 'https://grafana.com/d/abcDEF-34t';
-          {args.buttonText}
+
-        </ClipboardButton>
+  return (
-        <Input value={args.inputText} onChange={() => {}} />
+    <div style={{ width: '100%', maxWidth: 500 }}>
-      </div>
+      <Field label="Link URL">
-      <span>{copyMessage}</span>
+        <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',
-};