[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. Updated `Tooltip` to dismiss on enter/space key interactions.

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

@@ -1,7 +1,10 @@
-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,
+  Link,
+  Tooltip,
   Button,
   ButtonGroup,
   Card,
@@ -18,6 +21,8 @@ import {
   ChevronDownIcon,
   EditIcon,
   MagicIcon,
+  CheckIcon,
+  ClipboardIcon,
   DeleteIcon,
 } from '@shopify/polaris-icons';
 
@@ -832,3 +837,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"
+            content="Copy"
+          >
+            <Button
+              variant="tertiary"
+              accessibilityLabel="Copy email address"
+              icon={status === 'copied' ? CheckIcon : ClipboardIcon}
+              onClick={copy}
+            />
+          </Tooltip>
+        </InlineStack>
+      </Card>
+    </div>
+  );
+}

polaris-react/src/components/Tooltip/Tooltip.tsx

@@ -158,7 +158,13 @@ export function Tooltip({
 
   const handleKeyUp = useCallback(
     (event: React.KeyboardEvent) => {
-      if (event.key !== 'Escape') return;
+      if (
+        event.key !== 'Escape' &&
+        event.key !== 'Enter' &&
+        event.key !== ' '
+      ) {
+        return;
+      }
       handleClose?.();
       handleBlur();
       persistOnClick && togglePersisting();
@@ -206,6 +212,11 @@ export function Tooltip({
         handleFocus();
       }}
       onBlur={() => {
+        if (hoverDelayTimeout.current) {
+          clearTimeout(hoverDelayTimeout.current);
+          hoverDelayTimeout.current = null;
+        }
+
         handleClose();
         handleBlur();
 

polaris-react/src/index.ts

@@ -423,6 +423,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 {useCallback, useEffect, useState} 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] = useState<Status>('inactive');
+
+  const copy = useCallback(
+    (value?: string) => {
+      navigator.clipboard
+        .writeText(typeof value === 'string' ? value : defaultValue)
+        .then(
+          () => setStatus('copied'),
+          () => setStatus('failed'),
+        )
+        .catch((error) => {
+          throw error;
+        });
+    },
+    [defaultValue],
+  );
+
+  useEffect(() => {
+    if (status === 'inactive') return;
+
+    const timeoutId = setTimeout(() => setStatus('inactive'), timeout);
+
+    return () => clearTimeout(timeoutId);
+  }, [status, timeout]);
+
+  return [copy, status] as const;
+}