[Common actions] Add Copy To Clipboard recipe

.changeset/flat-eagles-press.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines

polaris-react/src/components/Button/Button.stories.tsx

@@ -1,7 +1,11 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import type {TextProps} from '@shopify/polaris';
 import {
+  useCopyToClipboard,
+  useMouseHover,
+  Link,
+  Tooltip,
   Button,
   ButtonGroup,
   Card,
@@ -18,6 +22,8 @@ import {
   ChevronDownIcon,
   EditIcon,
   MagicIcon,
+  CheckIcon,
+  ClipboardIcon,
   DeleteIcon,
 } from '@shopify/polaris-icons';
 
@@ -832,3 +838,32 @@ export function LoadingState() {
     </InlineStack>
   );
 }
+
+export function CopyToClipboard() {
+  const [copy, status] = useCopyToClipboard({
+    defaultValue: '[email protected]',
+  });
+
+  return (
+    <div style={{maxWidth: 300, paddingTop: 100}}>
+      <Card>
+        <InlineStack align="space-between" gap="200">
+          <Link removeUnderline>[email protected]</Link>
+          <Tooltip
+            dismissOnMouseOut
+            hoverDelay={500}
+            preferredPosition="above"
+            open={status === 'copied' ? true : undefined}
+            content={status === 'copied' ? 'Copied' : 'Copy'}
+          >
+            <Button
+              variant="tertiary"
+              onClick={copy}
+              icon={status === 'copied' ? CheckIcon : ClipboardIcon}
+            />
+          </Tooltip>
+        </InlineStack>
+      </Card>
+    </div>
+  );
+}

polaris-react/src/index.ts

@@ -420,6 +420,7 @@ export {
 export {useFrame, FrameContext} from './utilities/frame';
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
+export {useCopyToClipboard} from './utilities/use-copy-to-clipboard';
 export {useEventListener} from './utilities/use-event-listener';
 export {useTheme} from './utilities/use-theme';
 export {useIndexResourceState} from './utilities/use-index-resource-state';

polaris-react/src/utilities/use-copy-to-clipboard.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+
+type Status = 'inactive' | 'copied' | 'failed';
+
+interface UseCopyToClipboardOptions {
+  defaultValue?: string;
+  timeout?: number;
+}
+
+/**
+ * Copy text to the native clipboard using the `navigator.clipboard` API
+ * Adapted from https://www.benmvp.com/blog/copy-to-clipboard-react-custom-hook
+ */
+export function useCopyToClipboard(options: UseCopyToClipboardOptions = {}) {
+  const {defaultValue = '', timeout = 1500} = options;
+
+  const [status, setStatus] = React.useState<Status>('inactive');
+
+  const copy = React.useCallback(
+    (value?: string) => {
+      navigator.clipboard
+        .writeText(typeof value === 'string' ? value : defaultValue)
+        .then(
+          () => setStatus('copied'),
+          () => setStatus('failed'),
+        )
+        .catch((error) => {
+          throw error;
+        });
+    },
+    [defaultValue],
+  );
+
+  React.useEffect(() => {
+    if (status === 'inactive') return;
+
+    const timeoutId = setTimeout(() => setStatus('inactive'), timeout);
+
+    return () => clearTimeout(timeoutId);
+  }, [status, timeout]);
+
+  return [copy, status] as const;
+}