From 0bb776f355eb11ecdd8d7091095a875131710895 Mon Sep 17 00:00:00 2001
From: Benjamin Vimeux <vimeux.benji@gmail.com>
Date: Fri, 29 Dec 2023 12:27:54 +0100
Subject: [PATCH] feat(icon): update copy icon on website

---
 components/icons/AllIcons.tsx | 88 ++++++++++++++++++++++-------------
 1 file changed, 55 insertions(+), 33 deletions(-)

diff --git a/components/icons/AllIcons.tsx b/components/icons/AllIcons.tsx
index 5a115676e..d63da93a3 100644
--- a/components/icons/AllIcons.tsx
+++ b/components/icons/AllIcons.tsx
@@ -1,6 +1,15 @@
 import React from 'react';
 import * as Icons from '@radix-ui/react-icons';
-import { Grid, Tooltip, Heading, Box, IconButton, Flex } from '@radix-ui/themes';
+import {
+  Grid,
+  Tooltip,
+  Heading,
+  Box,
+  IconButton,
+  Flex,
+  DropdownMenu,
+  Text,
+} from '@radix-ui/themes';
 import { useCopyToast } from './CopyToast';
 
 import styles from './AllIcons.module.css';
@@ -47,41 +56,54 @@ type CopyButtonProps = {
 const CopyButton = ({ children, label }: CopyButtonProps) => {
   const { showCopyToast } = useCopyToast();
 
-  return (
-    <Tooltip className="radix-themes-custom-fonts" content={label} side="top" sideOffset={5}>
-      <IconButton
-        highContrast
-        variant="ghost"
-        size="4"
-        onClick={(event: React.MouseEvent) => {
-          const svg = event.currentTarget.querySelector('svg');
-          const code = svg ? svg.outerHTML : null;
+  const handleCopyCode = React.useCallback(
+    (code) => {
+      navigator.clipboard.writeText(code);
+      showCopyToast(code);
+    },
+    [label, showCopyToast]
+  );
 
-          // Copy code to clipboard via a hidden textarea element
-          if (code) {
-            // Temporary shim until a proper focus-visible handler is added
-            if (document.activeElement instanceof HTMLButtonElement) {
-              document.activeElement.blur();
-            }
+  const handleCopyLabel = React.useCallback(() => {
+    const formattedLabel = label
+      .split(' ')
+      .map((word) => word[0].toUpperCase() + word.slice(1))
+      .join('')
+      .concat('Icon');
 
-            const textarea = document.createElement('textarea');
-            textarea.value = code.toString();
-            textarea.setAttribute('readonly', '');
-            textarea.style.position = 'absolute';
-            textarea.style.left = '-9999px';
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand('copy');
-            document.body.removeChild(textarea);
+    navigator.clipboard.writeText(formattedLabel);
+    showCopyToast(formattedLabel);
+  }, [label, showCopyToast]);
+
+  return (
+    <DropdownMenu.Root>
+      <Tooltip className="radix-themes-custom-fonts" content={label} side="top" sideOffset={5}>
+        <DropdownMenu.Trigger>
+          <IconButton highContrast variant="ghost" size="4">
+            {children}
+          </IconButton>
+        </DropdownMenu.Trigger>
+      </Tooltip>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item
+          onClick={(event: React.MouseEvent) => {
+            const svg = event.currentTarget.querySelector('svg');
+            const code = svg ? svg.outerHTML : null;
 
-            // Show CopyToast and set latest icon
-            showCopyToast(code);
-          }
-        }}
-      >
-        {children}
-      </IconButton>
-    </Tooltip>
+            code ? handleCopyCode(code) : null;
+          }}
+        >
+          Copy SVG <Text hidden>{children}</Text>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          onClick={() => {
+            handleCopyLabel();
+          }}
+        >
+          Copy label
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 };